// FAQ accordion — CSS-only height animation (grid-template-rows 0fr/1fr
// trick) so opening/closing doesn't need JS to measure content height.
function FAQItem({ item, isOpen, onToggle }) {
  return (
    <div className={`faq-item ${isOpen ? 'is-open' : ''}`}>
      <button className="faq-question" onClick={onToggle} aria-expanded={isOpen}>
        <span>{item.q}</span>
        <svg className="faq-chevron" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
          <polyline points="6 9 12 15 18 9"></polyline>
        </svg>
      </button>
      <div className="faq-answer-wrap">
        <div className="faq-answer"><p>{item.a}</p></div>
      </div>
    </div>
  );
}

function FAQ() {
  const items = window.SITE_DATA.faq;
  const [openIndex, setOpenIndex] = React.useState(0);

  return (
    <section id="faq" className="section container" data-screen-label="FAQ">
      <Reveal><div className="eyebrow"><b>/</b> FAQ</div></Reveal>
      <Reveal><h2 className="h2"><window.AnimatedText parts={[{t:'Common '},{t:'Questions',accent:true},{t:'.'}]} repel /></h2></Reveal>
      <div className="faq-list">
        {items.map((item, i) => (
          <Reveal key={item.q} delay={i * 40}>
            <FAQItem
              item={item}
              isOpen={openIndex === i}
              onToggle={() => setOpenIndex(openIndex === i ? -1 : i)}
            />
          </Reveal>
        ))}
      </div>
    </section>
  );
}

window.FAQ = FAQ;