---
import BaseLayout from '@/layouts/BaseLayout.astro'
import BusinessTariffBuilder from '@/components/BusinessTariffBuilder.tsx'
---
<BaseLayout title="Тарифы" description="Простые тарифы Food Market: Старт от 5 000 ₸/мес, Бизнес-конструктор, Сеть по запросу. 90 дней бесплатно без банковской карты." ogImage="/og/pricing.png">
  <section class="bg-gradient-to-br from-emerald-500 via-emerald-600 to-emerald-700 text-white py-16">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 text-center">
      <h1 class="text-4xl lg:text-5xl font-extrabold drop-shadow">Прозрачные тарифы Food Market</h1>
      <p class="text-emerald-50 mt-4 text-lg">Никаких скрытых доплат. CRM, финансы, лояльность — во всех тарифах.</p>
      <p class="text-emerald-100/90 mt-2 text-sm">90 дней бесплатно. Без банковской карты. Отмена в любой момент.</p>
    </div>
  </section>
  <section class="max-w-6xl mx-auto px-4 sm:px-6 py-12">

    <div class="grid lg:grid-cols-3 gap-5 mt-10">
      <div class="rounded-xl border border-slate-200 p-6 bg-white">
        <h2 class="font-bold text-lg">Старт</h2>
        <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 text-slate-700">
          <li>✓ 1 магазин · 1 касса · 1 склад</li>
          <li>✓ 2 сотрудника</li>
          <li>✓ Без лимита товаров</li>
          <li>✓ Касса с поддержкой торговых весов</li>
          <li>✓ Импорт из других систем</li>
          <li>✓ Интеграции Kaspi / ОФД</li>
          <li class="text-slate-400">— API</li>
          <li class="text-slate-400">— SLA</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="lg:row-span-2">
        <BusinessTariffBuilder client:load />
      </div>

      <div class="rounded-xl border border-slate-200 p-6 bg-white">
        <h2 class="font-bold text-lg">Сеть</h2>
        <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 text-slate-700">
          <li>✓ Unlimited магазины / кассы / склады</li>
          <li>✓ Unlimited сотрудники</li>
          <li>✓ Расширенный API</li>
          <li>✓ Выделенный менеджер</li>
          <li>✓ Гарантии доступности</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>

    <div class="mt-12 rounded-xl bg-brand-light/30 p-6 text-center">
      <h3 class="font-bold">Никаких доплат за модули</h3>
      <p class="text-sm text-slate-600 mt-2">CRM, финансы, лояльность, импорт, поддержка — всё включено в каждый тариф. Без сюрпризов в счёте.</p>
    </div>
  </section>
</BaseLayout>
