function FAQ() {
  const [open, setOpen] = React.useState(0);
  const items = [
    { q: "Чи безкоштовно це?", a: "Так, базовий доступ повністю безкоштовний — ти можеш тренуватися щодня без жодної копійки. Розширений доступ (всі теми, безлімітні ігри, всі пояснення) — це підписка, яка одночасно підтримує ЗСУ." },
    { q: "На яких платформах працює?", a: "iPhone (iOS 14+) і Android (8+). Прогрес автоматично синхронізується з твоїм акаунтом — можеш міняти телефон, не втрачаючи стрік і досягнення." },
    { q: "Чи актуальні питання для НМТ 2026?", a: "Так. База питань оновлюється відповідно до останньої програми МОН. Ми додаємо нові питання щотижня." },
    { q: "Чи потрібен інтернет?", a: "Ні — застосунок працює офлайн. Завантаж теми один раз — і трен у дорозі, в школі, де завгодно." },
    { q: "Скільки часу потрібно щоденно?", a: "20 хвилин на день — оптимально. Стрік-режим заохочує саме регулярність, а не марафони." },
    { q: "Чи можу я повернути гроші?", a: "Так. Якщо застосунок не зайде — пиши в підтримку, повернемо протягом 14 днів без зайвих питань." },
  ];
  return (
    <section className="section-pad" id="faq">
      <div className="container" style={{ maxWidth: 880 }}>
        <span className="section-eyebrow">Питання та відповіді</span>
        <h2 className="section-title">Що батьки і учні питають найчастіше</h2>

        <div className="faq-list">
          {items.map((it, i) => (
            <div key={i} className={"faq-item " + (open === i ? "open" : "")}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                {it.q}
                <span className="plus"><Icon name="plus" size={16}/></span>
              </button>
              <div className="faq-a">{it.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.FAQ = FAQ;