// ─────────────────────────────────────────────────────────────────
// faq.jsx — Dúvidas frequentes (carregadas da API; fallback estático)
// ─────────────────────────────────────────────────────────────────

const FAQ_FALLBACK = {
  pt: [
    { q: 'Posso levar acompanhante?', a: 'O convite é individual e válido para as pessoas informadas nominalmente no convite recebido.' },
    { q: 'Crianças são convidadas?',  a: 'A cerimônia é um momento de silêncio e a recepção é planejada para adultos.' },
  ],
  en: [
    { q: 'Can I bring a companion?',  a: 'The invitation is individual and valid only for those nominally listed on the invitation you received.' },
    { q: 'Are children invited?',     a: 'The ceremony is a moment of silence, and the reception is planned for adults.' },
  ]
};

function Faq({ t, lang }) {
  const [open, setOpen] = React.useState(0);
  const [items, setItems] = React.useState(null);

  React.useEffect(() => {
    let alive = true;
    fetch('/api/content?kind=faq')
      .then(r => r.ok ? r.json() : { items: [] })
      .then(({ items }) => {
        if (!alive) return;
        if (items && items.length > 0) {
          const mapped = items.map(it => {
            const d = (lang === 'en' && it.data_en) ? it.data_en : it.data_pt;
            return { q: d.q, a: d.a };
          });
          setItems(mapped);
        } else {
          setItems(FAQ_FALLBACK[lang] || FAQ_FALLBACK.pt);
        }
      })
      .catch(() => { if (alive) setItems(FAQ_FALLBACK[lang] || FAQ_FALLBACK.pt); });
    return () => { alive = false; };
  }, [lang]);

  const list = items || FAQ_FALLBACK[lang] || FAQ_FALLBACK.pt;

  return (
    <section className="section" id="faq" data-screen-label="06 FAQ">
      <div className="container">
        <div className="sec-head">
          <span className="sec-head__num">{lang === 'pt' ? '06 · Dúvidas Frequentes' : '06 · Frequently Asked'}</span>
          <h2 className="sec-head__title">
            {lang === 'pt'
              ? <>Antes que <em>perguntem</em></>
              : <>Before you <em>ask</em></>}
          </h2>
          <p className="sec-head__sub">
            {lang === 'pt'
              ? 'As respostas mais comuns. Se algo aqui não estiver claro, basta nos escrever — respondemos em até um dia.'
              : 'The most common answers. If anything is unclear, just write to us — we reply within a day.'}
          </p>
        </div>

        <div className="faq">
          {list.map((it, i) => (
            <div key={i} className={`faq-item ${open === i ? 'is-open' : ''}`} onClick={() => setOpen(open === i ? -1 : i)}>
              <div className="faq-item__head">
                <h3 className="faq-item__q">{it.q}</h3>
                <span className="faq-item__icon" aria-hidden="true">{open === i ? '−' : '+'}</span>
              </div>
              <div className="faq-item__body">
                <p>{it.a}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Faq });