// FAQ — perguntas comuns dos pais
function FAQ() {
  const qs = [
    { q: 'Como é a primeira sessão do meu filho?', a: 'Antes da criança, eu converso com vocês, pais. Depois, a criança conhece o espaço no ritmo dela — brincando, sem testes nem pressão. As primeiras sessões servem para criar vínculo e me permitir observar com calma.' },
    { q: 'Os pais participam do processo?', a: 'Sim, sempre. Vocês trazem o contexto que a criança não tem como contar, e recebem devolutivas e orientações ao longo do acompanhamento. Cuidar da criança envolve cuidar do ambiente dela.' },
    { q: 'O que é avaliação neuropsicológica?', a: 'É uma investigação estruturada de funções como atenção, memória, linguagem e raciocínio, feita com instrumentos próprios e adaptada à idade. Ela ajuda a compreender o que está por trás de dificuldades de comportamento ou aprendizagem.' },
    { q: 'A escola pediu uma avaliação. E agora?', a: 'É mais comum do que parece — e não significa nada de definitivo. A escola observa um sinal e pede uma investigação. Me chama no WhatsApp com o que a escola relatou, e eu explico como seria o processo no caso do seu filho.' },
    { q: 'A avaliação dá um diagnóstico de TDAH ou TEA?', a: 'A avaliação gera uma compreensão detalhada do funcionamento da criança e contribui para a investigação diagnóstica, que muitas vezes envolve também médicos e outros especialistas. O compromisso é com a compreensão honesta, não com rótulo.' },
    { q: 'Quanto tempo dura o acompanhamento?', a: 'Depende do caso. A psicoterapia infantil costuma ser um processo contínuo, com frequência combinada com a família. A avaliação neuropsicológica é mais delimitada: um conjunto de encontros com começo, meio e devolutiva.' },
    { q: 'Vocês atendem por convênio?', a: 'As condições de atendimento (particular, recibo para reembolso, formas de pagamento) são conversadas diretamente comigo no WhatsApp — assim você já tira todas as dúvidas de uma vez.' },
    { q: 'O que meu filho falar fica em sigilo?', a: 'Sim. O sigilo profissional é regulado pelo Conselho Federal de Psicologia. Com crianças, o que se compartilha com os pais são as orientações e a leitura do processo — sempre preservando o espaço de confiança da criança.' },
  ];
  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" style={{ background: 'var(--paper-2)' }}>
      <div className="container">
        <Reveal>
          <div style={{ textAlign: 'center', marginBottom: 44 }}>
            <h2 className="h-section">Perguntas <span className="em">frequentes.</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: 15.5, 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.65, color: 'var(--muted)' }}>{item.a}</p>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.FAQ = FAQ;