---
import BaseLayout from '@/layouts/BaseLayout.astro'
const compare = [
  { row: 'Цена за базовый тариф', moy: 'от 4 900 ₽ ≈ 30 000 ₸', us: '5 000 ₸' },
  { row: 'Касса с весами Масса-К', moy: '— (отдельный модуль)', us: '✓ из коробки' },
  { row: 'CRM и лояльность', moy: '+ доплата', us: '✓ включено' },
  { row: 'Финансовый учёт', moy: '+ доплата', us: '✓ включено' },
  { row: 'Скорость интерфейса', moy: '~3 сек загрузка', us: '<1 сек' },
  { row: 'Поддержка KZ-локализации', moy: 'базовая', us: 'полная (тенге, ОКЕИ, ОФД РК)' },
  { row: 'Триал', moy: '14 дней', us: '90 дней без карты' },
]
---
<BaseLayout title="Переход с МойСклада" description="Перенос товаров, штрихкодов, контрагентов и остатков из МойСклада в Food Market за один клик.">
  <section class="bg-gradient-to-br from-brand-light/40 via-white to-white">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 py-14">
      <h1 class="text-4xl font-extrabold">Переходите с МойСклада<br/>за один клик</h1>
      <p class="mt-4 text-lg text-slate-600">Импорт товаров, групп, контрагентов, остатков и штрихкодов через ваш существующий API-токен МойСклада. 5–10 минут — и магазин уже работает в Food Market.</p>
      <a href="/signup?plan=start" class="inline-block mt-7 px-5 py-3 bg-brand text-white font-semibold rounded-md hover:bg-brand-hover">Начать миграцию</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-8">МойСклад vs Food Market</h2>
    <div class="overflow-x-auto rounded-xl border border-slate-200 bg-white">
      <table class="w-full text-sm">
        <thead class="bg-slate-50">
          <tr>
            <th class="text-left px-4 py-3 font-semibold">Параметр</th>
            <th class="text-left px-4 py-3 font-semibold">МойСклад</th>
            <th class="text-left px-4 py-3 font-semibold text-brand">Food Market</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-slate-100">
          {compare.map((c) => (
            <tr>
              <td class="px-4 py-3 font-medium">{c.row}</td>
              <td class="px-4 py-3 text-slate-600">{c.moy}</td>
              <td class="px-4 py-3 text-slate-900 font-medium">{c.us}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  </section>

  <section class="bg-slate-50 py-14">
    <div class="max-w-4xl 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="grid sm:grid-cols-2 gap-3 text-sm">
        {['Товары и услуги','Группы и категории','Штрихкоды и артикулы','Цены (розничные + оптовые)','Контрагенты (поставщики и клиенты)','Остатки по складам','Единицы измерения','Атрибуты товаров'].map((x) => (
          <div class="bg-white rounded-md border border-slate-200 px-4 py-3">✓ {x}</div>
        ))}
      </div>
    </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">3 шага до запуска</h2>
    <ol class="space-y-6">
      <li class="flex gap-4"><div class="flex-shrink-0 w-10 h-10 rounded-full bg-brand text-white font-bold flex items-center justify-center">1</div>
        <div><h3 class="font-semibold">Зарегистрируйтесь в Food Market</h3><p class="text-sm text-slate-600 mt-1">Создайте аккаунт за минуту. 90 дней триал без банковской карты.</p></div></li>
      <li class="flex gap-4"><div class="flex-shrink-0 w-10 h-10 rounded-full bg-brand text-white font-bold flex items-center justify-center">2</div>
        <div><h3 class="font-semibold">Подключите токен МойСклада</h3><p class="text-sm text-slate-600 mt-1">Настройки → Интеграции → МойСклад → ваш API-токен. Кнопка «Импортировать».</p></div></li>
      <li class="flex gap-4"><div class="flex-shrink-0 w-10 h-10 rounded-full bg-brand text-white font-bold flex items-center justify-center">3</div>
        <div><h3 class="font-semibold">Откройте кассу и работайте</h3><p class="text-sm text-slate-600 mt-1">Скачайте установщик кассы для Windows, подключите весы и сканер. Магазин запущен.</p></div></li>
    </ol>
    <div class="text-center mt-10">
      <a href="/signup?plan=start" class="px-5 py-3 bg-brand text-white font-semibold rounded-md hover:bg-brand-hover">Начать миграцию</a>
    </div>
  </section>
</BaseLayout>