function Approach() {
  const phases = [
    {
      step: '01',
      title: 'Identificar',
      body: 'Mapeamos gargalos operacionais onde software proprietário supera ferramenta genérica.',
      marker: 'PROBLEMA',
    },
    {
      step: '02',
      title: 'Prototipar',
      body: 'Construímos MVPs rápidos com IA no core. Testamos em operação real, não em laboratório fechado.',
      marker: 'PROTÓTIPO',
    },
    {
      step: '03',
      title: 'Escalar',
      body: 'Transformamos o que funciona em SaaS — com infra, dados e automação operando 24/7.',
      marker: 'PRODUTO',
    },
    {
      step: '04',
      title: 'Compor',
      body: 'Cada produto novo se conecta ao ecossistema — dados fluem, IA aprende, o conjunto cresce mais rápido que a soma das partes.',
      marker: 'ECOSSISTEMA',
    },
  ];

  return (
    <section id="approach" className="section" style={{ background: 'var(--bg-elev)' }}>
      <div className="container">
        <div className="section-head">
          <div className="label">
            <span className="num">§ 03 / ABORDAGEM</span>
            <span className="eyebrow"><span className="dot"></span>COMO OPERAMOS</span>
          </div>
          <div className="title">
            <h2 className="h2">
              Mentalidade de <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic' }}>produto</span> e escala — do primeiro commit ao milionésimo usuário.
            </h2>
            <p>
              Não entregamos projetos pontuais. Construímos sistemas que acumulam valor com o tempo — para nós e para os clientes.
            </p>
          </div>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(4, 1fr)',
          gap: 0,
          position: 'relative',
        }} className="approach-grid">
          {/* connecting line */}
          <div aria-hidden="true" style={{
            position: 'absolute',
            top: 74, left: '12.5%', right: '12.5%',
            height: 1,
            background: `repeating-linear-gradient(to right, var(--line-strong) 0 8px, transparent 8px 14px)`,
          }} />
          {phases.map((p, i) => (
            <div key={p.step} style={{
              padding: '48px 24px 40px',
              borderRight: i < 3 ? '1px solid var(--line)' : 'none',
              display: 'flex', flexDirection: 'column', gap: 16,
              position: 'relative',
            }}>
              <div style={{
                width: 48, height: 48,
                borderRadius: '50%',
                background: 'var(--bg)',
                border: '1px solid var(--line-strong)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: 'var(--font-mono)',
                fontSize: 14,
                color: 'var(--accent-ink)',
                position: 'relative',
                zIndex: 1,
              }}>
                {p.step}
              </div>
              <span className="mono" style={{ fontSize: 10, color: 'var(--ink-3)', letterSpacing: '0.14em', marginTop: 4 }}>
                {p.marker}
              </span>
              <h3 style={{ fontSize: 24, fontWeight: 500, letterSpacing: '-0.02em', margin: 0 }}>
                {p.title}
              </h3>
              <p style={{ color: 'var(--ink-2)', fontSize: 14, lineHeight: 1.55, margin: 0 }}>
                {p.body}
              </p>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .approach-grid { grid-template-columns: 1fr 1fr !important; }
          .approach-grid > div:nth-child(2) { border-right: none !important; }
          .approach-grid > div:nth-child(1), .approach-grid > div:nth-child(2) { border-bottom: 1px solid var(--line); }
        }
        @media (max-width: 560px) {
          .approach-grid { grid-template-columns: 1fr !important; }
          .approach-grid > div { border-right: none !important; border-bottom: 1px solid var(--line); }
          .approach-grid > div:last-child { border-bottom: none; }
        }
      `}</style>
    </section>
  );
}
window.Approach = Approach;