/* FAQ accordion */

function FAQ({ t }) {
  const [open, setOpen] = React.useState(0);

  return (
    <section className="faq section" id="faq">
      <div className="container">
        <div className="faq-grid">
          <div className="reveal">
            <span className="eyebrow"><span className="dot"></span>{t.faq.eyebrow}</span>
            <h2 className="section-title" style={{ marginTop: 16 }}>
              {t.faq.title_1}<em>{t.faq.title_em}</em>
            </h2>
            <p className="section-subtitle" style={{ marginTop: 20, color: 'rgba(251,248,242,0.7)' }}>{t.faq.sub}</p>
          </div>

          <div className="faq-list reveal-stagger">
            {t.faq.items.map((it, i) => (
              <div
                key={i}
                className={"faq-item" + (open === i ? ' is-open' : '')}
                onClick={() => setOpen(open === i ? -1 : i)}
              >
                <div className="faq-q">
                  <span>{it.q}</span>
                  <span className="faq-icon">{Icons.plus}</span>
                </div>
                <div className="faq-a">{it.a}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

window.FAQ = FAQ;