const FAQS = [
  { q: 'A inscrição garante minha participação?', a: 'Não. As vagas são limitadas e passam por curadoria da equipe Maitha. Após o envio do formulário, você receberá um retorno sobre a confirmação.' },
  { q: 'O evento é gratuito?', a: 'Sim! Mas a participação está sujeita à curadoria e disponibilidade de vagas. As informações finais serão enviadas aos participantes confirmados.' },
  { q: 'Preciso levar notebook?', a: 'Sim. A experiência terá uma dinâmica prática, por isso recomendamos que todos os participantes levem seu próprio notebook.' },
  { q: 'O evento será online?', a: 'Não. O encontro foi pensado para o formato presencial em São Paulo, para que todos possam fazer juntos na prática.' },
  { q: 'Posso levar alguém do meu time?', a: 'A participação de outros integrantes pode ser avaliada conforme disponibilidade de vagas e perfil dos participantes.' },
  { q: 'Preciso ter conhecimento técnico em IA?', a: 'Não. O evento foi desenhado para líderes de negócio. O foco é entender cenários, problemas e possibilidades de aplicação, não programar ou configurar ferramentas técnicas.' },
];

function FAQ() {
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq">
      <div className="padding-global">
        <div className="container narrow">
          <div className="section-header" style={{ marginBottom: '3rem', maxWidth: 'none' }}>
            <div className="section-eyebrow">FAQ</div>
            <h2 className="h2-bold" style={{ margin: 0 }}>Dúvidas frequentes.</h2>
          </div>
          <div className="faq-list">
            {FAQS.map((f, i) => (
              <div key={f.q} className={`faq-item ${open === i ? 'open' : ''}`}>
                <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                  <span>{f.q}</span>
                  <span className="chev">
                    <img src="assets/icons/FAQ-Arrow.svg" alt="" width="14" />
                  </span>
                </button>
                <div className="faq-a">{f.a}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { FAQ });