// Como funciona — passos do agendamento até a primeira sessão
function ComoFunciona() {
  const steps = [
    { n: '01', t: 'Você agenda', d: 'Pelo Doctoralia (em minutos, escolhendo o horário) ou pelo WhatsApp se preferir conversar antes.' },
    { n: '02', t: 'Confirmamos juntos', d: 'Te envio o endereço (presencial) ou o link da teleconsulta (online), e tiramos qualquer dúvida prática.' },
    { n: '03', t: 'A primeira sessão', d: 'É uma conversa pra eu te conhecer e entender o que te trouxe aqui. Sem julgamento, sem pressa.' },
    { n: '04', t: 'Construímos o caminho', d: 'A frequência (semanal, quinzenal) e a duração do processo são definidos juntos, conforme o que faz sentido pra você.' },
  ];
  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;