---
import BaseLayout from '@/layouts/BaseLayout.astro'
const features = [
  { icon: '⚖️', title: 'Нативная поддержка торговых весов', text: 'Подключите весы к компьютеру кассира — Food Market распознаёт их автоматически. Поддерживаются электронные весы стандартных протоколов через RS-232 или USB-COM. Никаких сторонних драйверов.' },
  { icon: '📡', title: 'Офлайн-режим без потери данных', text: 'Интернет пропал — касса продолжает работать. Все чеки записываются локально. Когда связь вернётся — данные подтянутся в облако автоматически.' },
  { icon: '🛒', title: 'Сканеры штрихкодов любых производителей', text: 'Поддерживаем все стандартные модели работающие как клавиатура (HID-эмуляция). Подключили — и работает. EAN-13/EAN-8/Code128/Datamatrix.' },
  { icon: '🖨️', title: 'Печать чеков на ОКП-совместимом оборудовании', text: 'Любые ОКП РК совместимые принтеры. Драйверы устанавливаются автоматически.' },
  { icon: '🔐', title: 'Контроль кассиров', text: 'Каждый кассир работает под своим логином. Открытие смены, инкассация, возврат — только с подтверждения администратора. Полный аудит-лог.' },
  { icon: '💳', title: 'Программы лояльности', text: 'Поиск клиента по карте, телефону, штрихкоду. Автоматический расчёт бонусов и скидок. Накопительные программы — прямо в окне кассы.' },
  { icon: '🧾', title: 'Соответствие требованиям РК', text: 'Регистрация чеков в ОФД РК (Электронный чек). Поддержка возвратов, корректировок, отмены. Соответствие требованиям Налогового кодекса.' },
]
const hardware = [
  ['Компьютер', 'Windows 10+ (32/64 bit), 4 GB RAM, 5 GB на диске'],
  ['Весы', 'Электронные торговые весы стандартных протоколов (RS-232/USB)'],
  ['Сканер штрихкодов', 'Любой HID-совместимый USB-сканер'],
  ['Чековый принтер', 'Любой ОКП РК совместимый принтер'],
  ['Денежный ящик', 'Подключение через принтер чеков (RJ-11)'],
  ['Дисплей покупателя', 'Опционально, любой VFD/LCD по RS-232'],
]
const steps = [
  ['Скачайте установщик', 'Один файл .msi ~80 МБ'],
  ['Запустите', 'Нажмите «Далее» три раза'],
  ['Введите ключ организации', 'Выдаётся в админке Food Market'],
  ['Подключите оборудование', 'Касса автоматически распознает весы и сканер'],
  ['Откройте смену', 'И пробивайте первый чек'],
]
---
<BaseLayout title="Касса для Windows" description="Кассовая программа Food Market для Windows: поддержка торговых весов, офлайн-режим, фискальные чеки ОФД РК, Kaspi Pay." ogImage="/og/pos.png">
  <section class="relative overflow-hidden">
    <img src="/photos/pos-hero.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/65 to-slate-900/35"></div>
    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 py-20 lg:py-28">
      <div class="max-w-2xl bg-white/95 backdrop-blur p-8 rounded-2xl shadow-2xl border border-slate-200">
        <span class="inline-block text-xs uppercase tracking-wider text-brand font-semibold">Касса</span>
        <h1 class="text-4xl font-extrabold mt-2">Касса для Windows<br/>с поддержкой торговых весов</h1>
        <p class="mt-4 text-slate-600">
          Установите за 5 минут. Работайте офлайн. Подключайте стандартное оборудование без переходников и сторонних драйверов.
        </p>
        <div class="mt-7 flex gap-3 flex-wrap">
          <span class="px-5 py-3 bg-slate-200 text-slate-500 rounded-md font-semibold cursor-not-allowed" title="В разработке">Скачать кассу (Windows 10+)</span>
          <a href="/pricing" class="px-5 py-3 border border-slate-300 rounded-md font-semibold hover:bg-slate-50">Тарифы</a>
        </div>
      </div>
    </div>
  </section>

  <section class="max-w-7xl mx-auto px-4 sm:px-6 py-14">
    <div class="rounded-xl border border-slate-200 bg-slate-50 p-3 sm:p-6 shadow-lg">
      <div class="bg-slate-200 rounded-t-md px-3 py-2 flex gap-1.5 items-center">
        <span class="w-2.5 h-2.5 rounded-full bg-red-400"></span>
        <span class="w-2.5 h-2.5 rounded-full bg-yellow-400"></span>
        <span class="w-2.5 h-2.5 rounded-full bg-green-400"></span>
      </div>
      <img src="/screenshots/supply-form.png" alt="Окно приёмки в Food Market" class="w-full block rounded-b-md" loading="lazy" />
    </div>
  </section>

  <section class="max-w-7xl mx-auto px-4 sm:px-6 py-12">
    <h2 class="text-3xl font-bold text-center mb-10">Что внутри</h2>
    <div class="grid sm:grid-cols-2 lg:grid-cols-3 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">
    <div class="max-w-3xl mx-auto px-4 sm:px-6">
      <h2 class="text-3xl font-bold text-center mb-2">Поддерживаемое железо</h2>
      <p class="text-center text-slate-500 mb-8">Касса не требует фирменного железа — работает со стандартным оборудованием.</p>
      <div class="bg-white rounded-xl border border-slate-200 overflow-hidden">
        <table class="w-full text-sm">
          <tbody>
            {hardware.map(([cat, val]) => (
              <tr class="border-b border-slate-100 last:border-b-0">
                <td class="px-5 py-3.5 font-semibold w-1/3">{cat}</td>
                <td class="px-5 py-3.5 text-slate-600">{val}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <p class="text-center text-sm text-slate-500 mt-6">Не уверены, что ваше железо подойдёт? <a href="/contacts" class="text-brand underline">Напишите модель →</a> — проверим за 5 минут.</p>
    </div>
  </section>

  <section class="max-w-3xl mx-auto px-4 sm:px-6 py-14">
    <h2 class="text-3xl font-bold text-center mb-10">Установка за 5 минут</h2>
    <ol class="space-y-4">
      {steps.map(([title, desc], i) => (
        <li class="flex gap-4">
          <div class="flex-shrink-0 w-8 h-8 rounded-full bg-brand text-white font-bold flex items-center justify-center text-sm">{i + 1}</div>
          <div>
            <h3 class="font-semibold">{title}</h3>
            <p class="text-sm text-slate-600 mt-1">{desc}</p>
          </div>
        </li>
      ))}
    </ol>
  </section>

  <section class="bg-brand-light/30 py-14">
    <div class="max-w-3xl mx-auto px-4 sm:px-6 text-center">
      <h2 class="text-3xl font-extrabold">Касса работает с первого дня триала</h2>
      <p class="mt-3 text-slate-600">Зарегистрируйтесь, скачайте кассу, подключите весы — и продавайте. 90 дней бесплатно.</p>
      <a href="/signup" class="inline-block mt-7 px-7 py-3 bg-brand text-white font-semibold rounded-md hover:bg-brand-hover">Начать бесплатно</a>
    </div>
  </section>
</BaseLayout>
