function Faq() {
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq" style={{ background: 'var(--bg-2)' }}>
      <div className="container" style={{ maxWidth: 880 }}>
        <Reveal><SectionLabel>05 / Preguntas frecuentes</SectionLabel></Reveal>
        <Reveal delay={80}>
          <h2 style={{ marginBottom: 48 }}>
            Lo que la gente <span className="gradient-text">pregunta antes</span> de
            empezar.
          </h2>
        </Reveal>
        <div>
          {FAQS.map((f, i) => (
            <Reveal key={i} delay={i * 40}>
              <div className={`faq-item ${open === i ? 'open' : ''}`} onClick={() => setOpen(open === i ? -1 : i)}>
                <div className="faq-q">
                  <span>{f.q}</span>
                  <span className="faq-icon">{I.plus}</span>
                </div>
                <div className="faq-a">{f.a}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Faq = Faq;