function ProcessSteps() {
  const steps = [
    { n: '1', title: 'Diagnóstico e regularização', body: 'CNPJ, certidões, cadastro no SICAF e PNCP, CNAE compatível. Você sai pronto para participar.' },
    { n: '2', title: 'Seleção de editais e estratégia', body: 'Mapeamos pregões compatíveis. Proposta com preço competitivo, documentação completa, sem erro formal.' },
    { n: '3', title: 'Acompanhamento na sessão', body: 'Estamos com você durante o pregão. Respondemos ao pregoeiro. Você não enfrenta isso sozinho.' },
  ];
  return (
    <section id="como-funciona" style={{ background: 'var(--navy-900)', padding: '120px 0', position: 'relative', overflow: 'hidden' }}>
      <div style={{ maxWidth: 1120, margin: '0 auto', padding: '0 32px' }}>
        <div style={{ maxWidth: 720, marginBottom: 64 }}>
          <span className="eyebrow" data-anim="fade-up">
            <Bars size={14}/>
            Como funciona
          </span>
          <h2 className="h2" data-anim="fade-up" data-anim-delay="1" style={{
            fontFamily: 'var(--font-sans)', fontWeight: 700,
            fontSize: 'clamp(32px, 4vw, 48px)', lineHeight: 1.1,
            letterSpacing: '-0.02em', color: 'var(--cream-50)',
            margin: '20px 0 16px', textWrap: 'balance',
          }}>
            Três etapas para sua empresa estar <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400, color: 'var(--magenta-400)' }}>vendendo para o governo</span>
          </h2>
        </div>
        <div className="three-col" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          {steps.map((s, i) => (
            <div
              key={i}
              data-anim="fade-up"
              data-anim-delay={i + 1}
              className="tilt"
              data-tilt-max="6"
              style={{
                background: 'var(--navy-800)',
                border: '1px solid var(--border-on-dark)',
                borderRadius: 24,
                padding: '32px 28px 36px',
                position: 'relative',
                overflow: 'hidden',
              }}
            >
              <div style={{
                position: 'absolute', right: -10, top: -20,
                fontFamily: 'var(--font-serif)', fontStyle: 'italic',
                fontSize: 220, lineHeight: 1, color: 'rgba(201,168,76,.07)',
                pointerEvents: 'none',
              }}>{s.n}</div>
              <div style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400, fontSize: 88, lineHeight: 0.85, color: 'var(--magenta-500)' }}>{s.n}</div>
              <h3 style={{ margin: '14px 0 0', fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 22, color: 'var(--cream-50)', letterSpacing: '-0.01em' }}>{s.title}</h3>
              <p style={{ margin: '8px 0 0', fontSize: 15, lineHeight: 1.6, color: 'var(--cream-200)' }}>{s.body}</p>
            </div>
          ))}
        </div>
        <div data-anim="fade-up" style={{ marginTop: 48, textAlign: 'center' }}>
          <a className="btn btn-primary magnetic" data-magnet="0.20" href="#formulario">Quero estruturar minha empresa agora</a>
        </div>
      </div>
    </section>
  );
}
window.ProcessSteps = ProcessSteps;