---
import BaseLayout from '@/layouts/BaseLayout.astro'
---
<BaseLayout title="Контакты" description="Команда поддержки Food Market в часовом поясе Астаны. Электронная почта, телефон, мессенджеры.">
  <section class="bg-gradient-to-br from-brand-light/30 via-white to-white">
    <div class="max-w-3xl mx-auto px-4 sm:px-6 py-14">
      <h1 class="text-4xl font-extrabold">Контакты</h1>
      <p class="mt-4 text-lg text-slate-600">Команда поддержки в часовом поясе Астаны. Без чат-ботов и многоуровневых меню.</p>
    </div>
  </section>

  <section class="max-w-3xl mx-auto px-4 sm:px-6 py-12 grid sm:grid-cols-2 gap-5">
    <div class="rounded-xl border border-slate-200 bg-white p-5">
      <div class="text-2xl">📧</div>
      <h2 class="font-semibold mt-2">Электронная почта</h2>
      <ul class="text-sm text-slate-700 mt-3 space-y-1">
        <li>Общие вопросы — <a class="text-brand underline" href="mailto:info@food-market.kz">info@food-market.kz</a></li>
        <li>Поддержка — <a class="text-brand underline" href="mailto:support@food-market.kz">support@food-market.kz</a></li>
        <li>Продажи и партнёрство — <a class="text-brand underline" href="mailto:sales@food-market.kz">sales@food-market.kz</a></li>
        <li>Персональные данные — <a class="text-brand underline" href="mailto:privacy@food-market.kz">privacy@food-market.kz</a></li>
      </ul>
    </div>
    <div class="rounded-xl border border-slate-200 bg-white p-5">
      <div class="text-2xl">📞</div>
      <h2 class="font-semibold mt-2">Телефон</h2>
      <p class="text-sm text-slate-700 mt-3">+7 (___) ___-__-__ <span class="text-xs text-slate-400">(будет указан после регистрации юр.лица)</span></p>
      <p class="text-xs text-slate-500 mt-2">Часы работы: пн–пт, 09:00–19:00 (Астана).</p>
    </div>
    <div class="rounded-xl border border-slate-200 bg-white p-5">
      <div class="text-2xl">💬</div>
      <h2 class="font-semibold mt-2">Чат в админке</h2>
      <p class="text-sm text-slate-700 mt-3">Для клиентов с активным аккаунтом — встроенный чат поддержки в правом нижнем углу любого экрана.</p>
    </div>
    <div class="rounded-xl border border-slate-200 bg-white p-5">
      <div class="text-2xl">🏢</div>
      <h2 class="font-semibold mt-2">Юридические реквизиты</h2>
      <p class="text-sm text-slate-700 mt-3"><a class="text-brand underline" href="/legal/requisites">Реквизиты компании →</a></p>
      <p class="text-xs text-slate-500 mt-2">БИН, юридический адрес, банковские реквизиты — на отдельной странице.</p>
    </div>
  </section>

  <section class="bg-slate-50 py-14">
    <div class="max-w-2xl mx-auto px-4 sm:px-6 text-center">
      <h2 class="text-2xl font-bold">Хотите попробовать продукт?</h2>
      <p class="text-slate-500 mt-2">Регистрация занимает минуту, триал 90 дней — без банковской карты.</p>
      <a href="/signup" class="inline-block mt-6 px-5 py-3 bg-brand text-white font-semibold rounded-md hover:bg-brand-hover">Начать бесплатно</a>
    </div>
  </section>
</BaseLayout>
