/* global React */
function FAQ() {
  const { t } = window.useT();
  const items = [1, 2, 3, 4, 5, 6].map((n) => ({
    q: t(`faq.${n}.q`),
    a: t(`faq.${n}.a`),
  }));

  return (
    <section className="vsc-faq" id="faq" data-screen-label="FAQ">
      <div className="vsc-wrap">
        <div className="vsc-faq-inner">
          <div className="vsc-faq-left">
            <div className="vsc-eyebrow">{t("faq.eyebrow")}</div>
            <h2>
              {t("faq.h2.a")}<br/><em>{t("faq.h2.b")}</em>
            </h2>
            <p>{t("faq.lead")}</p>
            <a className="vsc-btn vsc-btn-ghost" href="https://wa.me/59995279021" target="_blank" rel="noopener noreferrer">
              {t("common.whatsapp")}
              <span className="arrow" aria-hidden="true"></span>
            </a>
          </div>
          <div className="vsc-faq-list">
            {items.map((it, i) => (
              <details key={i} className="vsc-faq-item" {...(i === 0 ? {open: true} : {})}>
                <summary>
                  <span>{it.q}</span>
                  <span className="toggle" aria-hidden="true"></span>
                </summary>
                <p className="answer">{it.a}</p>
              </details>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
window.FAQ = FAQ;