// FAQ — perguntas comuns dos pais sobre terapia infantil
function FAQ() {
  const qs = [
    { q: 'Como sei se meu filho precisa de terapia?', a: 'Alguns sinais comuns: mudanças de comportamento que persistem (irritabilidade, isolamento, medos novos), queda no rendimento escolar, dificuldade pra dormir, reações intensas demais pra idade. Na dúvida, vale uma conversa — às vezes uma orientação pontual aos pais já resolve.' },
    { q: 'Como é a primeira sessão?', a: 'O processo começa com uma conversa com os pais, sem a criança, pra eu entender a história e o que motivou a busca. Depois a criança vem conhecer o espaço — as primeiras sessões são de vínculo, no ritmo dela.' },
    { q: 'A criança vai "só brincar" na sessão?', a: 'O brincar é a forma como a criança se comunica e elabora o que sente. O que parece só brincadeira é material clínico: pelos jogos, desenhos e histórias, ela mostra o que ainda não consegue dizer com palavras.' },
    { q: 'Os pais participam do processo?', a: 'Sim, sempre. Vocês recebem devolutivas e orientações periódicas. O conteúdo das sessões da criança é protegido pelo sigilo, mas a direção do trabalho é construída junto com a família.' },
    { q: 'Com que frequência são as sessões?', a: 'Em geral as sessões são semanais, principalmente no início, porque a regularidade dá segurança pra criança. A frequência é combinada com a família conforme o caso.' },
    { q: 'Vocês atendem adolescentes também?', a: 'Sim. O atendimento de adolescentes tem formato próprio: mais conversa, mais espaço de privacidade, e um combinado claro entre o que fica entre nós e o que é compartilhado com os pais.' },
    { q: 'Atende plano de saúde?', a: 'O atendimento é particular, com recibo para quem quiser solicitar reembolso ao plano de saúde. Vale verificar com o seu plano como funciona o reembolso de psicoterapia.' },
    { q: 'O que meu filho falar fica em sigilo?', a: 'Sim. O sigilo profissional é regulado pelo Conselho Federal de Psicologia e protege também a criança e o adolescente. Os pais recebem devolutivas sobre o processo, sem exposição do conteúdo das sessões.' },
  ];
  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;