---
import BaseLayout from '@/layouts/BaseLayout.astro'
const sections = [
  { id: 'catalog', icon: '📦', title: 'Товары и каталог', items: ['Иерархические группы и подгруппы','Штрихкоды EAN-13/EAN-8/Code128','Цены: розничная, оптовая, эталонная','Автогенерация артикула и штрихкода','Импорт из других систем','Картинки товаров','Атрибуты и характеристики'] },
  { id: 'sales', icon: '💳', title: 'Продажи и касса', items: ['Касса для Windows','Поддержка весов Масса-К','Сканер штрихкодов USB','Чековые принтеры ESC/POS','Kaspi Pay интеграция','Скидки и акции','Возвраты на кассе'] },
  { id: 'stock', icon: '🏬', title: 'Склад и остатки', items: ['Несколько складов','Приёмка со сканером','Автоматический расчёт себестоимости','Инвентаризация','Списание (брак/просрочка)','Оприходование','Перемещения между складами','История движений'] },
  { id: 'purchase', icon: '🚚', title: 'Закупки и поставщики', items: ['База контрагентов','Заказы поставщикам','Документы приёмки','Скользящее среднее себестоимости','Эталонная цена'] },
  { id: 'crm', icon: '👥', title: 'Клиенты и лояльность', items: ['База клиентов','Скидочные карты (скоро)','Программы лояльности (скоро)','Сегментация (скоро)','SMS-рассылки (скоро)'] },
  { id: 'finance', icon: '📊', title: 'Финансы и аналитика', items: ['Дашборд продаж','Отчёт по марже','Отчёт по остаткам','Аналитика клиентов (скоро)','API для BI-инструментов'] },
]
---
<BaseLayout title="Возможности" description="Полный список возможностей Food Market: каталог, касса, склад, закупки, CRM, аналитика.">
  <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">6 модулей вместо 40 функций. Группируем по сценариям.</p>
    <div class="space-y-8 mt-12">
      {sections.map((s) => (
        <section id={s.id} class="rounded-xl border border-slate-200 bg-white p-6">
          <div class="flex items-center gap-3 mb-4">
            <span class="text-3xl">{s.icon}</span>
            <h2 class="text-2xl font-bold">{s.title}</h2>
          </div>
          <ul class="grid sm:grid-cols-2 gap-1.5 text-sm">
            {s.items.map((it) => <li>✓ {it}</li>)}
          </ul>
        </section>
      ))}
    </div>
  </section>
</BaseLayout>