/* Takotasks — reusable FAQ accordion. */

function FAQ({ items, title = "Common questions", eyebrow = "FAQ" }) {
  const [openIdx, setOpenIdx] = React.useState(0);
  return (
    <section className="tt-band" id="faq">
      <div className="tt-container">
        <div className="tt-section-head">
          <Reveal><Eyebrow>{eyebrow}</Eyebrow></Reveal>
          <Reveal delay={80}><h2>{title}</h2></Reveal>
          <Reveal delay={140}>
            <p>
              The questions we get most often, answered straight. If yours isn't here,
              visit our <a href="contact.html">contact page</a> — a real
              person reads everything.
            </p>
          </Reveal>
        </div>

        <Reveal>
          <div className="tt-faq">
            {items.map((it, i) => {
              const open = openIdx === i;
              return (
                <div key={i} className={cx("tt-faq__item", open && "tt-faq__item--open")}>
                  <button
                    className="tt-faq__q"
                    onClick={() => setOpenIdx(open ? -1 : i)}
                    aria-expanded={open}>
                    
                    <span>{it.q}</span>
                    <span className="tt-faq__icon" aria-hidden="true">
                      <Icon name="plus" size={18} />
                    </span>
                  </button>
                  <div className="tt-faq__a">
                    <div className="tt-faq__a-inner">{it.a}</div>
                  </div>
                </div>);

            })}
          </div>
        </Reveal>
      </div>
    </section>);

}

window.FAQ = FAQ;