// FAQ.jsx
function FAQ() {
  const { t } = window.useI18n();
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section section--cream" id="faq">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">{t.faq.eyebrow}</span>
            <h2 className="section-title">{t.faq.title}</h2>
          </div>
          <p className="section-sub">Если что-то осталось — напишите менеджеру в Telegram, ответим в тот же день.</p>
        </div>
        <div className="faq">
          {t.faq.items.map((it, i) => (
            <div key={i} className={`faq-item ${open === i ? "open" : ""}`}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{it.q}</span>
                <span className="faq-q__icon">+</span>
              </button>
              <div className="faq-a">{it.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.FAQ = FAQ;