import { useState } from 'react'

const ITEMS = [
  {
    q: 'Чем Food Market подходит моему магазину?',
    a: 'Food Market — облачная программа учёта розничной торговли, созданная под казахстанский рынок. Поддерживает все типы магазинов: продуктовые, аптеки, общепит, алкомаркеты, одежду, бытовые товары. Включает кассу для Windows с нативной поддержкой торговых весов, интеграцию с ОФД РК, Kaspi Pay и казахстанскими банками.',
  },
  {
    q: 'Сколько стоит подписка?',
    a: 'Тариф «Старт» — 5 000 ₸/мес (1 магазин, 1 касса, 1 склад). Тариф «Бизнес» — от 10 000 ₸, цена настраивается через конструктор (до 3 магазинов, 5 касс, 5 складов). Тариф «Сеть» — индивидуально для крупных сетей. Все тарифы — 90 дней бесплатно.',
  },
  {
    q: 'Нужно покупать какое-то железо?',
    a: 'Не обязательно. Если у вас уже есть компьютер с Windows 10+ — установите кассу и работайте. Если нет — подойдёт любой ноутбук. Сканер штрихкодов и весы — стандартное недорогое оборудование, можем посоветовать модели.',
  },
  {
    q: 'Можно ли работать без интернета?',
    a: 'Да. Касса работает офлайн — продолжает пробивать чеки даже при пропадании связи. Как только интернет появится — данные автоматически синхронизируются с облаком.',
  },
  {
    q: 'Я могу забрать свои данные если уйду?',
    a: 'Конечно. Экспорт каталога, контрагентов, операций в Excel/CSV — в любой момент. Это ваши данные.',
  },
  {
    q: 'Безопасно ли хранить данные у вас?',
    a: 'Серверы расположены на территории Казахстана, данные шифруются при передаче (TLS 1.3) и при хранении. Резервные копии каждые 24 часа.',
  },
  {
    q: 'Когда поддерживаете маркетплейсы (Kaspi Magazin, Wildberries, Ozon)?',
    a: 'Базовая интеграция с Kaspi Magazin планируется в Q3 2026. Wildberries и Ozon — в дорожной карте. Подпишитесь на обновления, чтобы узнать первыми.',
  },
]

export default function FAQ() {
  const [open, setOpen] = useState<number | null>(0)
  return (
    <ul className="divide-y divide-slate-200 border border-slate-200 rounded-xl bg-white">
      {ITEMS.map((it, i) => (
        <li key={i}>
          <button
            onClick={() => setOpen(open === i ? null : i)}
            className="w-full flex items-center justify-between gap-3 px-5 py-4 text-left hover:bg-slate-50"
          >
            <span className="font-medium">{it.q}</span>
            <span className={`text-slate-400 transition ${open === i ? 'rotate-45' : ''}`}>+</span>
          </button>
          {open === i && (
            <div className="px-5 pb-4 text-sm text-slate-600">{it.a}</div>
          )}
        </li>
      ))}
    </ul>
  )
}
