// ProcessSteps — how we work, numbered steps.
function ProcessSteps() {
  const { Eyebrow } = window.AmorimECostaDesignSystem_658eb5;
  const steps = [
    ['01', 'Conversa inicial', 'Você relata sua situação. Ouvimos com atenção e sem compromisso.'],
    ['02', 'Análise documental', 'Reunimos CNIS, laudos e documentos para avaliar o direito.'],
    ['03', 'Requerimento ou ação', 'Protocolo administrativo no INSS ou ação judicial, conforme o caso.'],
    ['04', 'Acompanhamento', 'Você é informado a cada movimentação até a decisão final.'],
  ];
  return (
    <section id="processo" style={{ background: 'var(--navy-900)' }}>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: 'var(--space-10) var(--space-6)' }}>
        <div style={{ maxWidth: '600px', marginBottom: 'var(--space-8)' }}>
          <Eyebrow color="inverse">Como atuamos</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'var(--text-2xl)',
            color: 'var(--white)', letterSpacing: 'var(--tracking-tight)', margin: 'var(--space-4) 0 0', textWrap: 'balance',
          }}>Um processo claro, do primeiro contato à decisão</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 'var(--space-6)' }}>
          {steps.map(([n, title, desc]) => (
            <div key={n} style={{ borderTop: '2px solid var(--brown-500)', paddingTop: 'var(--space-4)' }}>
              <div style={{
                fontFamily: 'var(--font-mono)', fontSize: '13px', color: 'var(--brown-400)',
                fontWeight: 600, marginBottom: 'var(--space-3)',
              }}>{n}</div>
              <h3 style={{
                fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'var(--text-md)',
                color: 'var(--white)', margin: '0 0 var(--space-2)',
              }}>{title}</h3>
              <p style={{ fontSize: '14px', color: 'var(--navy-200)', lineHeight: 1.55, margin: 0 }}>{desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.ProcessSteps = ProcessSteps;