---
import BaseLayout from '@/layouts/BaseLayout.astro'
const features = [
  { icon: '🍔', title: 'Модификаторы и комбо', text: 'Опции к блюдам (без лука, добавить сыр), комбо-меню с автоматической ценой.' },
  { icon: '👨‍🍳', title: 'Технологические карты', text: 'Состав блюд, нормы списания ингредиентов, автоматический пересчёт остатков продуктов.' },
  { icon: '🧾', title: 'Заказы по столикам', text: 'Открытие чека на столик, перемещение между столами, разделение чека.' },
  { icon: '📈', title: 'Анализ блюд', text: 'Какие блюда продаются, какие нет. Маржинальность по позиции.' },
]
---
<BaseLayout title="Для кафе и общепита" description="Food Market для кафе и общепита: модификаторы, комбо, тех.карты, заказы по столикам." ogImage="/og/for-cafe.png">
  <section class="relative overflow-hidden">
    <img src="/photos/vertical-cafe.jpg" alt="" class="absolute inset-0 w-full h-full object-cover" />
    <div class="absolute inset-0 bg-gradient-to-r from-slate-900/80 via-slate-900/55 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">Модификаторы, комбо, технологические карты, заказы по столикам. Списание ингредиентов автоматом.</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>
