// GSP — FAQ: hero + acordeón data-driven (lee window.GSP_FAQ).
function FAQItem({ q, a, open, onToggle }) {
  const Icon = window.Icon;
  return (
    <div className={'faq-item' + (open ? ' open' : '')}>
      <button className="faq-q" onClick={onToggle} aria-expanded={open}>
        <span className="faq-q-text">{q}</span>
        <span className="faq-chevron"><Icon name="chevron" size={18} sw={2} /></span>
      </button>
      <div className="faq-a-wrap">
        <div className="faq-a"><p>{a}</p></div>
      </div>
    </div>
  );
}

function FAQ() {
  const data = window.GSP_FAQ;
  const [open, setOpen] = React.useState({});
  const toggle = (k) => setOpen((s) => ({ ...s, [k]: !s[k] }));
  return (
    <React.Fragment>
      <section className="faq-hero">
        <div className="faq-hero-glow" />
        <div className="faq-hero-inner">
          <div className="hero-eyebrow">{data.header.overline}</div>
          <h1 className="faq-hero-title">{data.header.title}</h1>
          <p className="faq-hero-sub">{data.header.subtitle}</p>
        </div>
        <div className="hero-diagonal">
          <svg viewBox="0 0 1440 80" preserveAspectRatio="none"><path d="M0 80L1440 0V80H0Z" fill="#fff" /></svg>
        </div>
      </section>

      <section className="section faq-body">
        <div className="faq-inner">
          {data.groups.map((g, gi) => (
            <div className="faq-group" key={g.name}>
              <window.Reveal><h2 className="faq-group-title">{g.name}</h2></window.Reveal>
              <div className="faq-list">
                {g.items.map(([q, a], ii) => {
                  const k = gi + '-' + ii;
                  return (
                    <window.Reveal key={k} delay={0.05 * ii}>
                      <FAQItem q={q} a={a} open={!!open[k]} onToggle={() => toggle(k)} />
                    </window.Reveal>
                  );
                })}
              </div>
            </div>
          ))}
        </div>
      </section>
    </React.Fragment>
  );
}
window.FAQ = FAQ;