// Como funciona — passos do primeiro contato à primeira sessão
function ComoFunciona() {
  const steps = [
    { n: '01', t: 'Você me chama', d: 'Pelo WhatsApp, sem formalidade. Me conta em poucas palavras o que está acontecendo — eu mesma respondo.' },
    { n: '02', t: 'Primeira conversa', d: 'Um primeiro encontro pra você contar sua história e sentir se faz sentido. Sem compromisso de continuar.' },
    { n: '03', t: 'Sessões regulares', d: 'Definimos juntos o horário e a frequência. A regularidade é o que dá profundidade ao processo.' },
    { n: '04', t: 'O processo no seu tempo', d: 'Não há prazo fechado: cada análise tem o próprio ritmo. O que existe é um espaço seu, toda semana, garantido.' },
  ];
  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;