---
import BaseLayout from '@/layouts/BaseLayout.astro'
import BusinessTariffBuilder from '@/components/BusinessTariffBuilder.tsx'
---
<BaseLayout title="Тарифы" description="Простые тарифы Food Market: Старт от 5 000 ₸/мес, Бизнес-конструктор, Сеть по запросу. 90 дней бесплатно без банковской карты.">
  <section class="max-w-6xl mx-auto px-4 sm:px-6 py-12">
    <h1 class="text-4xl font-extrabold text-center">Тарифы Food Market</h1>
    <p class="text-center text-slate-500 mt-3">Никаких скрытых доплат. CRM, финансы, лояльность включены во все тарифы.</p>

    <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>