function Faq() {
  const items = [
    { q: "Funciona sem internet no estádio?", a: "Funciona. O app registra os lances localmente e sincroniza automaticamente assim que a conexão volta. Ideal para quadras e campos com sinal ruim." },
    { q: "O app ajuda a controlar os custos?", a: "Sim. Você registra mensalidade, uniforme, inscrições, viagens e qualquer outro gasto do jogo. O app calcula o total por mês, por campeonato e por temporada." },
    { q: "Posso exportar o relatório de custos?", a: "Pode. Gere um PDF ou planilha com todos os gastos da temporada — ideal para organizar o orçamento familiar." },
    { q: "Meus dados ficam seguros?", a: "Os dados ficam criptografados e são seus. Você pode exportar ou excluir tudo a qualquer momento, direto no app." },
    { q: "Tem iPad e versão web?", a: "iPad já está disponível. A versão web está em beta fechado — entre na lista de espera no rodapé do site." },
  ];
  const [open, setOpen] = React.useState(0);

  return (
    <section id="faq" className="relative py-24 border-t border-outline" data-screen-label="FAQ">
      <div className="max-w-4xl mx-auto px-6">
        <div className="mb-10">
          <div className="code-chip text-on-surface-variant mb-3"><span className="text-primary">/</span>faq</div>
          <h2 className="text-4xl md:text-5xl font-black tracking-tighter">Perguntas frequentes.</h2>
        </div>

        <div className="divide-y divide-outline border-y border-outline">
          {items.map((it, i) => {
            const isOpen = open === i;
            return (
              <div key={i}>
                <button
                  className="w-full flex items-center justify-between py-5 text-left"
                  onClick={() => setOpen(isOpen ? -1 : i)}
                >
                  <span className="text-[15px] font-bold pr-4">{it.q}</span>
                  <Icon
                    name={isOpen ? "remove" : "add"}
                    className={`shrink-0 transition-colors ${isOpen ? "text-primary" : "text-on-surface-variant"}`}
                    size={20}
                  />
                </button>
                {isOpen && (
                  <div className="pb-5 pr-8 text-[14px] text-on-surface-variant leading-relaxed">
                    {it.a}
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

window.Faq = Faq;