---
import BaseLayout from '@/layouts/BaseLayout.astro'
const groups = [
  { title: 'Платёжные системы', items: ['Kaspi Pay', 'Halyk Bank', 'Jusan Bank', 'Forte Bank'] },
  { title: 'Фискализация', items: ['ОФД РК (все операторы)', 'Чековые принтеры ESC/POS'] },
  { title: 'Маркетплейсы (скоро)', items: ['Kaspi Magazin', 'Ozon', 'Wildberries'] },
  { title: 'Учётные системы', items: ['Импорт из других систем по API', 'Excel/CSV-импорт', 'Выгрузка 1С (XML/Excel)'] },
  { title: 'Оборудование', items: ['Электронные торговые весы (USB/COM)', 'Сканеры штрихкодов USB', 'Денежные ящики', 'Дисплей покупателя'] },
]
---
<BaseLayout title="Интеграции" description="Кассы, банки, ОФД, маркетплейсы, учётные системы — все интеграции Food Market.">
  <section class="max-w-5xl mx-auto px-4 sm:px-6 py-12">
    <h1 class="text-4xl font-extrabold text-center">Интеграции</h1>
    <p class="text-center text-slate-500 mt-3">Стандартные подключения для розницы Казахстана.</p>
    <div class="grid sm:grid-cols-2 gap-5 mt-10">
      {groups.map((g) => (
        <div class="rounded-xl border border-slate-200 bg-white p-5">
          <h2 class="font-semibold mb-3">{g.title}</h2>
          <ul class="space-y-1 text-sm text-slate-700">
            {g.items.map((it) => <li>• {it}</li>)}
          </ul>
        </div>
      ))}
    </div>
    <p class="text-center text-sm text-slate-500 mt-10">Нужна интеграция, которой нет в списке? <a href="/contacts" class="text-brand underline">Напишите нам</a> — добавим в дорожную карту.</p>
  </section>
</BaseLayout>
