---
import BaseLayout from '@/layouts/BaseLayout.astro'
import FAQ from '@/components/FAQ.tsx'

const verticals = [
  { href: '/for-grocery', title: 'Продуктовый магазин', icon: '🛒', desc: 'Весовой товар, штрихкоды, скоропорт' },
  { href: '/for-pharmacy', title: 'Аптека', icon: '💊', desc: 'Серии и сроки годности' },
  { href: '/for-cafe', title: 'Кафе и общепит', icon: '☕', desc: 'Модификаторы и комбо' },
  { href: '/for-alcohol', title: 'Алкоголь', icon: '🍷', desc: 'Акцизные марки, ЕГАИС-ready' },
  { href: '/for-clothing', title: 'Одежда', icon: '👔', desc: 'Размерные сетки и цвета' },
  { href: '/for-household', title: 'Дом и быт', icon: '🏠', desc: 'Гарантийные сроки' },
]

const modules = [
  { icon: '📦', title: 'Товары и каталог', text: 'Группы, штрихкоды, цены, остатки, импорт каталога одной кнопкой.' },
  { icon: '💳', title: 'Продажи и касса', text: 'Касса для Windows с поддержкой торговых весов, штрихкодов, чековых принтеров.' },
  { icon: '🏬', title: 'Склад и приёмки', text: 'Несколько складов, приёмка со сканером, инвентаризация, списание, оприходование.' },
  { icon: '🚚', title: 'Закупки и поставщики', text: 'Документы приёмки с автоматическим расчётом себестоимости (скользящее среднее).' },
  { icon: '👥', title: 'Клиенты и лояльность', text: 'База контрагентов, скидки, акции, программы лояльности (скоро).' },
  { icon: '📊', title: 'Финансы и аналитика', text: 'Отчёты по продажам, остаткам, прибыли. Дашборд кассира и владельца.' },
]

const integrations = [
  'Kaspi Pay', 'Halyk Bank', 'Jusan Bank', 'Forte Bank', 'ОФД РК', 'Kaspi Magazin', 'Ozon', 'Wildberries',
]
---

<BaseLayout
  title="Программа учёта для розничных магазинов"
  description="Программа учёта и касса для розничных магазинов в Казахстане. Касса с поддержкой торговых весов, импорт каталога одной кнопкой, интеграция с Kaspi и ОФД РК. Бесплатно 90 дней без карты."
>
  {/* 1. Hero */}
  <section class="bg-gradient-to-br from-brand-light/40 via-white to-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-12 sm:py-20 grid lg:grid-cols-2 gap-10 items-center">
      <div>
        <h1 class="text-4xl sm:text-5xl font-extrabold leading-tight">
          Программа учёта и&nbsp;касса для розничных магазинов в&nbsp;Казахстане
        </h1>
        <p class="mt-5 text-lg text-slate-600">
          Касса с поддержкой торговых весов, импорт каталога одной кнопкой, интеграция с Kaspi и ОФД РК.
          <strong>Бесплатно 90 дней без карты.</strong>
        </p>
        <div class="mt-7 flex flex-wrap gap-3">
          <a href="/signup" class="px-5 py-3 bg-brand text-white text-sm font-semibold rounded-md hover:bg-brand-hover">Начать бесплатно</a>
          <a href="#screenshot" class="px-5 py-3 border border-slate-300 text-sm font-semibold rounded-md hover:bg-slate-50">Посмотреть демо</a>
        </div>
        <p class="mt-3 text-xs text-slate-500">Без банковской карты · 90 дней триал · Подписка от 5 000 ₸/мес</p>
      </div>
      <div class="rounded-2xl border border-emerald-100 bg-white shadow-2xl overflow-hidden">
        <div class="bg-slate-100 border-b border-slate-200 px-3 py-2 flex gap-1.5">
          <span class="w-3 h-3 rounded-full bg-red-400"></span>
          <span class="w-3 h-3 rounded-full bg-yellow-400"></span>
          <span class="w-3 h-3 rounded-full bg-green-400"></span>
        </div>
        <img src="/screenshots/dashboard-hero.png" alt="Дашборд Food Market" class="w-full block" loading="eager" />
      </div>
    </div>
  </section>

  {/* 2. 3 ключевых выгоды */}
  <section class="max-w-7xl mx-auto px-4 sm:px-6 py-12 grid sm:grid-cols-3 gap-4">
    <div class="rounded-xl border border-slate-200 p-5">
      <div class="text-3xl">🛒</div>
      <h3 class="font-semibold mt-2">Касса с весами из коробки</h3>
      <p class="text-sm text-slate-600 mt-1">Прямая поддержка торговых весов без переходников и драйверов. Подключите весы — Food Market распознает их автоматически. Поддержка штрихкодов, скидок, акций, лояльности.</p>
    </div>
    <div class="rounded-xl border border-slate-200 p-5">
      <div class="text-3xl">⬇️</div>
      <h3 class="font-semibold mt-2">Импорт каталога за 1 клик</h3>
      <p class="text-sm text-slate-600 mt-1">Перенесите товары, контрагентов, остатки и штрихкоды из любой существующей системы. Поддерживаем Excel, CSV и API основных систем учёта.</p>
    </div>
    <div class="rounded-xl border border-slate-200 p-5">
      <div class="text-3xl">🎁</div>
      <h3 class="font-semibold mt-2">90 дней бесплатно, без карты</h3>
      <p class="text-sm text-slate-600 mt-1">Зарегистрируйтесь — и 3 месяца пользуйтесь всеми возможностями без ограничений. Понравится — выберете тариф. Не понравится — заберёте свои данные и уйдёте.</p>
    </div>
  </section>

  {/* 3. Скриншот продукта */}
  <section id="screenshot" class="max-w-7xl mx-auto px-4 sm:px-6 py-12">
    <h2 class="text-3xl font-bold text-center mb-2">Один экран — весь магазин</h2>
    <p class="text-center text-slate-500 mb-8">Дашборд показывает выручку, остатки, движения и топ-товары. Без переключения вкладок и Excel-экспорта.</p>
    <div class="rounded-xl border border-slate-200 bg-slate-50 p-3 sm:p-6 shadow-lg">
      <div class="bg-slate-200 rounded-t-md px-3 py-2 flex gap-1.5 items-center">
        <span class="w-2.5 h-2.5 rounded-full bg-red-400"></span>
        <span class="w-2.5 h-2.5 rounded-full bg-yellow-400"></span>
        <span class="w-2.5 h-2.5 rounded-full bg-green-400"></span>
        <span class="ml-3 text-xs text-slate-500">app.food-market.kz / catalog / products</span>
      </div>
      <img src="/screenshots/catalog.png" alt="Каталог товаров Food Market — 29 540 SKU" class="w-full block rounded-b-md" loading="lazy" />
    </div>
  </section>

  {/* 4. Для кого */}
  <section class="max-w-7xl mx-auto px-4 sm:px-6 py-12">
    <h2 class="text-3xl font-bold text-center mb-2">Для кого Food Market</h2>
    <p class="text-center text-slate-500 mb-8">Шесть вертикалей. Свои фишки в каждой.</p>
    <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
      {verticals.map((v) => (
        <a href={v.href} class="rounded-xl border border-slate-200 p-5 hover:shadow-md hover:border-brand transition group">
          <div class="text-3xl">{v.icon}</div>
          <h3 class="font-semibold mt-2 group-hover:text-brand">{v.title}</h3>
          <p class="text-sm text-slate-600 mt-1">{v.desc}</p>
          <span class="text-xs text-brand mt-3 inline-block">Подробнее →</span>
        </a>
      ))}
    </div>
  </section>

  {/* 5. Возможности */}
  <section class="bg-slate-50 py-14">
    <div class="max-w-7xl mx-auto px-4 sm:px-6">
      <h2 class="text-3xl font-bold text-center mb-2">Возможности</h2>
      <p class="text-center text-slate-500 mb-10">Шесть модулей покрывают полный цикл работы магазина.</p>
      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
        {modules.map((m) => (
          <div class="bg-white rounded-xl border border-slate-200 p-5">
            <div class="text-2xl">{m.icon}</div>
            <h3 class="font-semibold mt-2">{m.title}</h3>
            <p class="text-sm text-slate-600 mt-1.5">{m.text}</p>
            <a href="/features" class="text-xs text-brand mt-3 inline-block">Подробнее →</a>
          </div>
        ))}
      </div>
    </div>
  </section>

  {/* 6. Касса */}
  <section class="max-w-7xl mx-auto px-4 sm:px-6 py-14 grid lg:grid-cols-2 gap-10 items-center">
    <div>
      <span class="inline-block text-xs uppercase tracking-wider text-brand font-semibold">Касса для Windows</span>
      <h2 class="text-3xl font-bold mt-2">Кассовая программа с поддержкой торговых весов</h2>
      <p class="mt-4 text-slate-600">
        Установщик для Windows 10/11. Работает офлайн, синхронизируется с админкой,
        принимает Kaspi Pay, печатает фискальные чеки в ОФД РК.
      </p>
      <div class="mt-6 flex gap-3">
        <a href="/pos" class="px-5 py-3 bg-brand text-white text-sm font-semibold rounded-md hover:bg-brand-hover">Подробнее о кассе</a>
        <span class="px-5 py-3 border border-slate-300 text-sm font-semibold rounded-md text-slate-400 cursor-not-allowed" title="В разработке">Скачать установщик</span>
      </div>
    </div>
    <div class="aspect-video rounded-xl border border-slate-200 bg-cover bg-center relative overflow-hidden shadow-xl" style="background-image: url('/photos/pos-hero.jpg')">
      <div class="absolute inset-0 bg-slate-900/30"></div>
      <div class="absolute bottom-4 left-4 right-4 bg-white/95 backdrop-blur rounded-md px-4 py-3 text-sm">
        <strong class="text-brand">Касса для Windows</strong> · работает офлайн, поддерживает торговые весы и Kaspi Pay
      </div>
    </div>
  </section>

  {/* 7. Интеграции */}
  <section class="relative py-14 overflow-hidden">
    <img src="/photos/integrations.jpg" alt="" class="absolute inset-0 w-full h-full object-cover opacity-15" />
    <div class="absolute inset-0 bg-gradient-to-b from-slate-50/95 via-white/90 to-slate-50/95"></div>
    <div class="relative max-w-7xl mx-auto px-4 sm:px-6">
      <h2 class="text-3xl font-bold text-center mb-2">Интеграции</h2>
      <p class="text-center text-slate-500 mb-8">Кассы, банки, ОФД, маркетплейсы. Подключаем по запросу.</p>
      <div class="flex flex-wrap justify-center gap-3">
        {integrations.map((label) => (
          <span class="px-4 py-2 bg-white border border-slate-200 rounded-md text-sm font-medium shadow-sm">{label}</span>
        ))}
      </div>
    </div>
  </section>

  {/* 8. Тарифы */}
  <section class="max-w-7xl mx-auto px-4 sm:px-6 py-14">
    <h2 class="text-3xl font-bold text-center mb-2">Простые тарифы. Никаких доплат.</h2>
    <p class="text-center text-slate-500 mb-10">CRM / финансы / лояльность включены во все тарифы.</p>
    <div class="grid lg:grid-cols-3 gap-4">
      <div class="rounded-xl border border-slate-200 p-6 bg-white">
        <h3 class="font-bold text-lg">Старт</h3>
        <p class="text-3xl font-bold mt-2">5 000 ₸<span class="text-sm font-normal text-slate-500">/мес</span></p>
        <p class="text-xs text-slate-500 mt-1">90 дней триал</p>
        <ul class="text-sm space-y-1.5 mt-5">
          <li>1 магазин · 1 касса · 1 склад</li>
          <li>2 сотрудника</li>
          <li>Без лимита товаров</li>
          <li>Касса с весами</li>
          <li>Импорт каталога одной кнопкой</li>
        </ul>
        <a href="/signup?plan=start" class="block text-center mt-6 px-4 py-2.5 bg-brand text-white rounded-md font-semibold">Начать</a>
      </div>
      <div class="rounded-xl border-2 border-brand p-6 bg-white relative">
        <span class="absolute -top-3 left-1/2 -translate-x-1/2 bg-brand text-white text-xs px-2 py-0.5 rounded-full">Популярный</span>
        <h3 class="font-bold text-lg">Бизнес</h3>
        <p class="text-3xl font-bold mt-2">от 10 000 ₸<span class="text-sm font-normal text-slate-500">/мес</span></p>
        <p class="text-xs text-slate-500 mt-1">Конструктор по объёму бизнеса</p>
        <ul class="text-sm space-y-1.5 mt-5">
          <li>До 3 магазинов</li>
          <li>До 5 касс и складов</li>
          <li>До 10 сотрудников</li>
          <li>API + все интеграции</li>
        </ul>
        <a href="/pricing" class="block text-center mt-6 px-4 py-2.5 bg-brand text-white rounded-md font-semibold">Настроить тариф</a>
      </div>
      <div class="rounded-xl border border-slate-200 p-6 bg-white">
        <h3 class="font-bold text-lg">Сеть</h3>
        <p class="text-3xl font-bold mt-2">По запросу</p>
        <p class="text-xs text-slate-500 mt-1">Демо + индивидуальный SLA</p>
        <ul class="text-sm space-y-1.5 mt-5">
          <li>Unlimited магазины / кассы</li>
          <li>Выделенный менеджер</li>
          <li>Расширенный API</li>
          <li>Гарантии доступности</li>
        </ul>
        <a href="/contacts" class="block text-center mt-6 px-4 py-2.5 border border-slate-300 rounded-md font-semibold">Связаться</a>
      </div>
    </div>
    <p class="text-center text-sm text-slate-500 mt-8">
      Никаких доплат за CRM, финансы, лояльность, поддержку. Всё включено в каждый тариф.
    </p>
  </section>

  {/* 9. Соцпруф */}
  <section class="bg-slate-50 py-14">
    <div class="max-w-3xl mx-auto px-4 sm:px-6 text-center">
      <p class="text-xs uppercase tracking-wider text-slate-500 mb-4">Кейсы</p>
      <p class="text-xl text-slate-700 italic">«Раздел в разработке. Здесь появятся истории магазинов, которые перешли на Food Market.»</p>
    </div>
  </section>

  {/* 10. FAQ */}
  <section class="max-w-3xl mx-auto px-4 sm:px-6 py-14">
    <h2 class="text-3xl font-bold text-center mb-8">Частые вопросы</h2>
    <FAQ client:visible />
  </section>

  {/* 11. Финальный CTA */}
  <section class="relative py-20 overflow-hidden">
    <img src="/photos/cta-banner.jpg" alt="" class="absolute inset-0 w-full h-full object-cover" />
    <div class="absolute inset-0 bg-emerald-700/75"></div>
    <div class="relative max-w-3xl mx-auto px-4 sm:px-6 text-center">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-white drop-shadow">Запустите магазин за 15 минут</h2>
      <p class="mt-3 text-emerald-50 text-lg">Регистрация — минута. Импорт товаров — десять минут. Касса работает на следующий день.</p>
      <a href="/signup" class="inline-block mt-7 px-7 py-3 bg-white text-brand font-bold rounded-md shadow-lg hover:bg-emerald-50">Начать бесплатно — 90 дней</a>
    </div>
  </section>
</BaseLayout>
