/* global React */

function SectionFaq() {
  const i18n = window.__i18n;
  const [open, setOpen] = useState(0);
  return (
    <section className="section" id="faq">
      <div className="container">
        <div className="section-head section-head--center">
          <div className="eyebrow" style={{margin: "0 auto"}}>{i18n.t("faq.eyebrow")}</div>
          <h2>{i18n.t("faq.title")}</h2>
        </div>

        <div className="faq__list">
          {FAQS.map((f, i) => (
            <Reveal key={i} delay={i * 40}>
              <div className={"faq-item" + (i === open ? " is-open" : "")}>
                <button className="faq-item__btn" onClick={() => setOpen(i === open ? -1 : i)}>
                  <span>{f.q}</span>
                  <span className="faq-item__icon"><Icon name="plus" size={16}/></span>
                </button>
                <div className="faq-item__body"><div><p>{f.a}</p></div></div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

window.SectionFaq = SectionFaq;