// FAQ.jsx — accordion, 4 questions
const FAQ_ITEMS = [
  {
    q: 'Чи видно що це AI? Виглядає реалістично?',
    a: 'Сучасні AI-інструменти дають результат, який не відрізняється від студійної зйомки. Ваші клієнти не побачать різниці — але побачать апетитний, атмосферний контент, який продає.',
  },
  {
    q: 'Що мені потрібно надати для початку?',
    a: 'Достатньо бренд-гайдлайну або кількох прикладів стилю, назви страв і короткого опису побажань. Якщо нічого з цього немає — розберемось разом на першому дзвінку.',
  },
  {
    q: 'Якщо результат не сподобається?',
    a: 'Перед початком роботи я роблю безкоштовні тестові кадри — ви бачите стиль і якість ще до оплати. Якщо щось не так — коригую без доплат.',
  },
  {
    q: 'Як швидко отримаю результат?',
    a: 'Стандартний термін — 24–48 годин на перший результат. Великі пакети — до 3–5 робочих днів. Завжди узгоджую дедлайн заздалегідь.',
  },
];

const FAQ = () => {
  const [open, setOpen] = React.useState(null);
  return (
    <section className="dd-section">
      <div className="container-x">
        <span className="eyebrow">FAQ</span>
        <h2 className="dd-section__title">
          <span className="h-display">Часті запитання.</span>
        </h2>
        <div className="dd-faq">
          {FAQ_ITEMS.map((item, i) => {
            const isOpen = open === i;
            return (
              <div key={i} className={`dd-faq__item${isOpen ? ' dd-faq__item--open' : ''}`}>
                <button
                  className="dd-faq__trigger"
                  onClick={() => setOpen(isOpen ? null : i)}
                  aria-expanded={isOpen}
                >
                  <span>{item.q}</span>
                  <span className="dd-faq__icon" aria-hidden="true">{isOpen ? '−' : '+'}</span>
                </button>
                <div className="dd-faq__body">
                  <div className="dd-faq__body-inner">
                    <p className="dd-faq__answer">{item.a}</p>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};
window.FAQ = FAQ;