// Section 10 — FAQ. Two-column accordion, spring open/close, +/− toggle.
function FAQ() {
  const qs = [
    { q: 'Quem é o dono do domínio?', a: 'Você. Registrado no seu CPF ou CNPJ — sem refém. Se um dia quiser sair, leva o domínio com você.' },
    { q: 'Em quanto tempo o site fica pronto?', a: 'Prévia em 24-48h. No ar em até 48h depois que você aprova. Rápido de verdade.' },
    { q: 'Posso usar meu domínio existente?', a: 'Sim. A gente aponta o seu domínio atual sem dor de cabeça e cuida de toda a configuração.' },
    { q: 'E se eu cancelar?', a: 'O site sai do ar, mas você pode levar o domínio. Sem multa, sem letra miúda.' },
    { q: 'Quantas edições por mês?', a: 'Depende do plano. No Fundador são 2 por mês — e, na real, a gente é flexível com o que você precisa.' },
    { q: 'Vocês fazem o conteúdo?', a: 'A gente puxa do seu Instagram e adapta. Um briefing rápido resolve os ajustes finais.' },
    { q: 'E o WhatsApp?', a: 'Integrado, com botão fixo e mensagem pré-pronta pro cliente final já chegar no ponto.' },
    { q: 'Funciona pra qualquer ramo?', a: 'Sim — clínicas, estética, food, serviços. Já temos casos no ar em vários nichos.' },
  ];
  const [open, setOpen] = React.useState(0);
  const half = Math.ceil(qs.length / 2);
  const cols = [qs.slice(0, half), qs.slice(half)];
  return (
    <section id="faq" className="section">
      <div className="container">
        <Reveal>
          <div style={{ textAlign: 'center', marginBottom: 44 }}>
            <span className="eyebrow">Perguntas frequentes</span>
            <h2 className="h-section" style={{ margin: '14px auto 0' }}>Tira as <span className="em">dúvidas.</span></h2>
          </div>
        </Reveal>
        <div className="grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, alignItems: 'start' }}>
          {cols.map((col, ci) => (
            <div key={ci} style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {col.map((item, i) => {
                const idx = ci * half + i;
                const isOpen = open === idx;
                return (
                  <div key={idx} className="card" style={{ padding: 0, overflow: 'hidden' }}>
                    <button onClick={() => setOpen(isOpen ? -1 : idx)} style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 14, padding: '20px 22px', background: 'transparent', border: 0, cursor: 'pointer', textAlign: 'left' }}>
                      <span style={{ fontFamily: 'var(--font-ui)', fontSize: 16, fontWeight: 600, color: 'var(--ink-2)' }}>{item.q}</span>
                      <span style={{ flex: 'none', width: 28, height: 28, borderRadius: 999, border: '1px solid var(--line)', display: 'flex', alignItems: 'center', justifyContent: 'center', background: isOpen ? 'var(--brand)' : 'transparent', transition: 'background .3s' }}>
                        <Icon name={isOpen ? 'minus' : 'plus'} size={15} color={isOpen ? '#fff' : 'var(--brand)'} />
                      </span>
                    </button>
                    <div style={{ display: 'grid', gridTemplateRows: isOpen ? '1fr' : '0fr', transition: 'grid-template-rows .42s var(--ease-out)' }}>
                      <div style={{ overflow: 'hidden' }}>
                        <p style={{ margin: 0, padding: '0 22px 22px', fontSize: 14.5, lineHeight: 1.6, color: 'var(--muted)' }}>{item.a}</p>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.FAQ = FAQ;