---
import BaseLayout from '@/layouts/BaseLayout.astro'

const formats = [
  { icon: '📊', title: 'Excel и CSV', text: 'Загрузите файл с каталогом — Food Market распознает столбцы и подгрузит данные. Подходит для миграции из любой системы, которая умеет экспортировать в Excel/CSV. Требуемые столбцы: название, штрихкод, цена. Остальные опциональны.' },
  { icon: '🔌', title: 'API сторонних систем', text: 'Прямая интеграция через API для популярных систем учёта в Казахстане. Введите API-токен — Food Market подтянет товары, контрагентов, остатки и цены автоматически.' },
  { icon: '📦', title: '1С: Бухгалтерия', text: 'Импорт через стандартную выгрузку 1С (XML/Excel). Каталог, контрагенты, остатки.' },
]

const matrix: [string, string, string][] = [
  ['Товары (название, штрихкоды, цены)', '✅', '✅'],
  ['Группы товаров', '✅', '✅'],
  ['Единицы измерения', '✅', '✅'],
  ['Контрагенты (поставщики, клиенты)', '⚠️ Отдельным файлом', '✅'],
  ['Текущие остатки по складам', '⚠️ Отдельным файлом', '✅'],
  ['Цены по типам (опт, розница, акция)', '⚠️ Отдельным файлом', '✅'],
  ['Фотографии товаров', '❌ Только по URL', '✅'],
  ['Характеристики (произвольные поля)', '✅', '✅'],
]

const steps = [
  { title: 'Зарегистрируйтесь в Food Market', text: 'Заполните минимальную форму: email, название магазина, пароль. Триал 90 дней активируется автоматически.' },
  { title: 'Подготовьте данные', text: 'Excel/CSV: экспортируйте каталог в .xlsx или .csv. Через API: получите API-токен в вашей текущей системе.' },
  { title: 'Запустите импорт', text: 'В админке: «Импорт» → выберите формат → загрузите файл или введите токен → нажмите «Запустить».' },
  { title: 'Проверьте результат', text: 'Откройте «Товары» — каталог должен быть полным. Проверьте 5-10 случайных товаров: цены, штрихкоды, остатки.' },
  { title: 'Установите кассу и продавайте', text: 'Скачайте установщик кассы для Windows. Подключите весы и сканер. Откройте смену.' },
]

const faq = [
  { q: 'Сохранятся ли данные в исходной системе?', a: 'Да. Импорт через API только читает данные — ничего не удаляет и не меняет. Excel-импорт работает с файлом-копией. Ваш текущий учёт остаётся нетронутым.' },
  { q: 'Можно ли работать в обеих системах параллельно?', a: 'Технически — да, в течение триала. Но синхронизация в режиме реального времени НЕ предусмотрена — это создаст путаницу с остатками. Лучше выбрать одну систему как основную.' },
  { q: 'Что если у меня кастомные поля или специфичные настройки?', a: 'Напишите нам перед импортом — посмотрим. В большинстве случаев всё переносится. Если что-то нестандартное — настроим вручную.' },
  { q: 'Сколько времени занимает импорт?', a: 'Каталог 1 000 товаров — около 1 минуты. 10 000 товаров — 5–10 минут. 50 000+ — до часа. Прогресс отображается в реальном времени.' },
  { q: 'Сколько стоит импорт?', a: 'Бесплатно. Никаких сборов за импорт, настройку или консультацию.' },
  { q: 'Что если возникли проблемы?', a: 'Напишите на support@food-market.kz — поможем разобраться и при необходимости настроим импорт вручную.' },
]
---
<BaseLayout title="Импорт каталога" description="Перенесите товары, контрагентов, остатки и штрихкоды из вашей текущей системы за минуты. Excel, CSV, API." ogImage="/og/import.png">
  <section class="relative overflow-hidden">
    <img src="/photos/import-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/60 to-slate-900/30"></div>
    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 py-20 lg:py-28">
      <div class="max-w-2xl">
        <span class="inline-block text-xs uppercase tracking-wider text-emerald-300 font-semibold">Импорт</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">
          Не перепечатывайте товары вручную. Импортируйте каталог из вашей текущей системы за минуты.
        </p>
        <div class="mt-7 flex gap-3 flex-wrap">
          <a href="/signup" class="px-5 py-3 bg-white text-brand text-sm font-bold rounded-md shadow-lg">Начать импорт</a>
          <a href="#formats" class="px-5 py-3 border border-white/40 text-white rounded-md font-semibold hover:bg-white/10">Поддерживаемые форматы</a>
        </div>
      </div>
    </div>
  </section>

  <section id="formats" 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 md:grid-cols-3 gap-5">
      {formats.map((f) => (
        <div class="rounded-xl border border-slate-200 p-5 bg-white">
          <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-4xl mx-auto px-4 sm:px-6">
      <h2 class="text-3xl font-bold text-center mb-8">Что переносится</h2>
      <div class="bg-white rounded-xl border border-slate-200 overflow-hidden">
        <table class="w-full text-sm">
          <thead class="bg-slate-50 border-b border-slate-200">
            <tr>
              <th class="px-5 py-3 text-left font-semibold">Сущность</th>
              <th class="px-5 py-3 text-center font-semibold">Excel/CSV</th>
              <th class="px-5 py-3 text-center font-semibold">API</th>
            </tr>
          </thead>
          <tbody>
            {matrix.map(([entity, csv, api]) => (
              <tr class="border-b border-slate-100 last:border-b-0">
                <td class="px-5 py-3.5">{entity}</td>
                <td class="px-5 py-3.5 text-center">{csv}</td>
                <td class="px-5 py-3.5 text-center">{api}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </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">Шаги импорта</h2>
    <ol class="space-y-4">
      {steps.map((s, 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">{s.title}</h3>
            <p class="text-sm text-slate-600 mt-1">{s.text}</p>
          </div>
        </li>
      ))}
    </ol>
  </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-8">FAQ импорта</h2>
      <ul class="bg-white border border-slate-200 rounded-xl divide-y divide-slate-100">
        {faq.map((it) => (
          <li class="px-5 py-4">
            <p class="font-semibold">{it.q}</p>
            <p class="text-sm text-slate-600 mt-1.5">{it.a}</p>
          </li>
        ))}
      </ul>
    </div>
  </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>
