// Como funciona — passos do primeiro contato à primeira sessão
function ComoFunciona() {
  const steps = [
    { n: '01', t: 'Vocês me chamam', d: 'Pelo WhatsApp, sem formalidade. Me contam o que estão percebendo no filho ou na filha, e eu respondo pessoalmente.' },
    { n: '02', t: 'Conversa com os pais', d: 'O processo começa por vocês: uma conversa inicial pra eu entender a história, a rotina e o que motivou a busca.' },
    { n: '03', t: 'A criança conhece o espaço', d: 'As primeiras sessões são de vínculo. A criança chega no ritmo dela — brincando, desenhando, se sentindo segura.' },
    { n: '04', t: 'Acompanhamento contínuo', d: 'Sessões regulares com devolutivas periódicas pra vocês. A frequência é combinada conforme a necessidade de cada caso.' },
  ];
  return (
    <section id="como" className="section" style={{ background: 'var(--paper-2)' }}>
      <div className="container">
        <Reveal>
          <div style={{ textAlign: 'center', maxWidth: 640, margin: '0 auto 56px' }}>
            <span className="tagline">Passo a passo</span>
            <h2 className="h-section" style={{ marginTop: 14 }}>Do primeiro contato à <span className="em">primeira sessão.</span></h2>
          </div>
        </Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20, maxWidth: 1100, margin: '0 auto' }} className="grid-2">
          {steps.map((s, i) => (
            <Reveal key={s.n} delay={i * 0.1}>
              <div style={{ position: 'relative' }}>
                <div style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 56, fontWeight: 500, color: 'var(--brand-300)', lineHeight: 1, marginBottom: 14 }}>{s.n}</div>
                <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 600, color: 'var(--ink-2)', margin: '0 0 8px' }}>{s.t}</h3>
                <p style={{ fontSize: 14.5, lineHeight: 1.6, color: 'var(--muted)', margin: 0 }}>{s.d}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

window.ComoFunciona = ComoFunciona;