const howStyles = {
  inner: { maxWidth: 1200, margin: '0 auto', padding: '0 32px' },
  header: { textAlign: 'center', marginBottom: 64 },
  track: {
    position: 'relative',
    display: 'grid',
    gridTemplateColumns: 'repeat(4, 1fr)',
    gap: 0,
  },
  trackLine: {
    position: 'absolute',
    top: 23, left: '12.5%', right: '12.5%', height: 1,
    background: 'linear-gradient(90deg, transparent, rgba(201,169,110,0.45), rgba(201,169,110,0.45), transparent)',
    pointerEvents: 'none',
    zIndex: 0,
  },
  step: {
    position: 'relative', zIndex: 1,
    padding: '0 18px',
    textAlign: 'center',
    display: 'flex', flexDirection: 'column', alignItems: 'center',
  },
  node: {
    width: 46, height: 46,
    borderRadius: '50%',
    background: 'var(--bg-surface-2)',
    border: '1px solid rgba(201,169,110,0.35)',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    color: 'var(--brand-gold)',
    fontFamily: 'var(--font-display)',
    fontSize: 14, fontWeight: 700,
    boxShadow: '0 0 0 4px var(--bg-base), 0 0 24px rgba(201,169,110,0.22)',
    marginBottom: 24,
  },
  nodeActive: {
    background: 'var(--brand-gold)',
    color: 'var(--brand-black)',
    boxShadow: '0 0 0 4px var(--bg-base), 0 0 36px rgba(201,169,110,0.55)',
  },
  monoLabel: {
    fontFamily: 'var(--font-mono)',
    fontSize: 10, fontWeight: 700,
    color: 'var(--brand-gold)',
    letterSpacing: '0.16em',
    textTransform: 'uppercase',
    marginBottom: 12,
  },
  stepTitle: {
    fontFamily: 'var(--font-display)',
    fontSize: 22, fontWeight: 700,
    letterSpacing: '-0.025em',
    color: 'var(--fg-1)',
    marginBottom: 10,
  },
  stepDesc: {
    fontSize: 14, color: 'var(--fg-2)', lineHeight: 1.65,
    margin: 0, maxWidth: 240,
  },
  stepMeta: {
    marginTop: 16,
    fontFamily: 'var(--font-mono)',
    fontSize: 10, color: 'var(--fg-3)',
    letterSpacing: '0.1em', textTransform: 'uppercase',
    padding: '4px 10px',
    border: '1px solid var(--border-default)',
    borderRadius: 99,
  },
};

const steps = [
  {
    n: '01', tag: 'FASE 01',
    title: 'Diagnóstico',
    desc: 'Mapeamos seus processos, identificamos os gargalos e priorizamos onde a IA gera ROI imediato.',
    meta: '~ 5 dias',
  },
  {
    n: '02', tag: 'FASE 02',
    title: 'Planejamento',
    desc: 'Definimos escopo, integrações, métricas e cronograma. Você aprova o blueprint antes de qualquer linha de código.',
    meta: '~ 10 dias',
  },
  {
    n: '03', tag: 'FASE 03',
    title: 'Implementação',
    desc: 'Construímos os agentes, integramos ao seu stack e operamos em piloto até atingir > 95% de precisão.',
    meta: '~ 6 semanas',
  },
  {
    n: '04', tag: 'FASE 04',
    title: 'Escala',
    desc: 'Subimos para produção, monitoramos e expandimos. Você paga por resultado, não por hora.',
    meta: 'Contínuo',
  },
];

function HowItWorks() {
  return (
    <section className="bb-section" id="processo">
      <div style={howStyles.inner}>
        <div style={howStyles.header}>
          <div className="bb-eyebrow" style={{ justifyContent: 'center' }}>Como funciona</div>
          <h2 className="bb-section-title" style={{ margin: '14px auto 18px' }}>
            Quatro fases. <span className="bb-gold">Zero terceirização.</span>
          </h2>
          <p className="bb-section-desc" style={{ margin: '0 auto' }}>
            Cada projeto é conduzido pelo mesmo time do diagnóstico até a operação.
            Engenheiros sêniores que assinam o resultado.
          </p>
        </div>

        <div data-grid="how" style={howStyles.track}>
          <div data-how-line style={howStyles.trackLine}></div>
          {steps.map((s, i) => (
            <div key={s.n} style={howStyles.step}>
              <div style={{ ...howStyles.node, ...(i === 0 ? howStyles.nodeActive : {}) }}>
                {s.n}
              </div>
              <div style={howStyles.monoLabel}>{s.tag}</div>
              <div style={howStyles.stepTitle}>{s.title}</div>
              <p style={howStyles.stepDesc}>{s.desc}</p>
              <div style={howStyles.stepMeta}>{s.meta}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { HowItWorks });