---
import BaseLayout from '@/layouts/BaseLayout.astro'
const features = [
  { icon: '🏷️', title: 'Акцизные марки', text: 'Сканирование марок при приёмке, привязка к товарным позициям, контроль продаж.' },
  { icon: '📜', title: 'ЕГАИС-ready', text: 'Архитектура совместима с ЕГАИС-РК (когда систему развернут полностью). Подготовлены отчёты.' },
  { icon: '🕐', title: 'Контроль времени продаж', text: 'Запрет продаж в часы после 23:00 / до 9:00 (по требованию законодательства).' },
  { icon: '🆔', title: 'Проверка возраста', text: 'Запрос подтверждения возраста на кассе перед продажей алкогольных позиций.' },
]
---
<BaseLayout title="Для алкогольных магазинов" description="Food Market для алкоголя: акцизные марки, ЕГАИС-ready, контроль времени продаж, проверка возраста." ogImage="/og/for-alcohol.png">
  <section class="relative overflow-hidden">
    <img src="/photos/vertical-alcohol.jpg" alt="" class="absolute inset-0 w-full h-full object-cover" />
    <div class="absolute inset-0 bg-gradient-to-r from-slate-900/85 via-slate-900/60 to-transparent"></div>
    <div class="relative max-w-4xl mx-auto px-4 sm:px-6 py-20 lg:py-28">
      <span class="text-3xl">🍷</span>
      <h1 class="text-4xl lg:text-5xl font-extrabold mt-2 text-white drop-shadow-lg">Программа учёта<br/>для алкоголя</h1>
      <p class="mt-4 text-lg text-emerald-50 max-w-xl">Акцизные марки, ЕГАИС-ready, контроль времени продаж и возраста.</p>
      <a href="/signup?plan=start" class="inline-block mt-7 px-5 py-3 bg-white text-brand font-bold rounded-md shadow-lg">Начать бесплатно</a>
    </div>
  </section>
  <section class="max-w-5xl mx-auto px-4 sm:px-6 py-14">
    <h2 class="text-3xl font-bold text-center mb-10">Что важно для алкомаркета</h2>
    <div class="grid sm:grid-cols-2 gap-5">
      {features.map((f) => (
        <div class="rounded-xl border border-slate-200 p-5">
          <div class="text-3xl">{f.icon}</div>
          <h3 class="font-semibold mt-2">{f.title}</h3>
          <p class="text-sm text-slate-600 mt-1.5">{f.text}</p>
        </div>
      ))}
    </div>
  </section>
  <section class="bg-slate-50 py-14 text-center">
    <p class="italic text-slate-700 max-w-2xl mx-auto px-4">«Раздел кейсов в разработке.»</p>
  </section>
</BaseLayout>
