// Processo — terminal-style numbered steps
function Processo() {
  const steps = [
    {
      n: '01',
      cmd: 'init',
      title: 'Briefing & descoberta',
      desc: 'Conversa franca pra entender objetivo, público e restrições. Saímos com escopo, prazo e investimento.',
      time: '2-3 dias',
    },
    {
      n: '02',
      cmd: 'design',
      title: 'Estratégia & design',
      desc: 'Arquitetura, UX e identidade visual. Validação rápida em protótipo antes de qualquer linha de código.',
      time: '1-2 semanas',
    },
    {
      n: '03',
      cmd: 'build',
      title: 'Desenvolvimento',
      desc: 'Sprints quinzenais com entregas visíveis. Você acompanha em tempo real, testa e dá feedback constante.',
      time: '3-8 semanas',
    },
    {
      n: '04',
      cmd: 'deploy',
      title: 'Deploy & ajustes',
      desc: 'Go-live com monitoramento, ajustes finos baseados em dados reais e treinamento da sua equipe.',
      time: '1 semana',
    },
    {
      n: '05',
      cmd: 'evolve --watch',
      title: 'Evolução contínua',
      desc: 'Suporte mensal pra evoluir o produto com base em métricas, novas features e otimizações.',
      time: 'on-going',
    },
  ];

  return (
    <section className="section" id="processo" style={{ background: 'var(--bg-warm)' }}>
      <div className="container">
        <div style={{ marginBottom: 56, maxWidth: 720 }}>
          <span className="eyebrow">PROCESSO · 05 etapas</span>
          <h2 className="h-section">
            Da ideia ao deploy, sem <span className="accent">surpresas.</span>
          </h2>
          <p style={{ fontSize: 17, color: 'var(--muted)', marginTop: 18 }}>
            Trabalhamos em sprints curtos e transparentes. Você sabe exatamente o que estamos fazendo, quando e por quê.
          </p>
        </div>

        <div style={{
          background: 'var(--ink)', borderRadius: 20, overflow: 'hidden',
          border: '1px solid #2a2a35', boxShadow: '0 30px 60px -30px rgba(14,14,18,0.4)',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '12px 18px', borderBottom: '1px solid #2a2a35', background: '#16161d' }}>
            <span style={{ width: 11, height: 11, borderRadius: '50%', background: '#FF5F57' }}></span>
            <span style={{ width: 11, height: 11, borderRadius: '50%', background: '#FEBC2E' }}></span>
            <span style={{ width: 11, height: 11, borderRadius: '50%', background: '#28C840' }}></span>
            <span className="mono" style={{ marginLeft: 12, fontSize: 12, color: '#999' }}>nosso-processo.sh</span>
            <span className="mono" style={{ marginLeft: 'auto', fontSize: 11, color: '#666' }}>$ ./run --client=você</span>
          </div>

          <div style={{ padding: 'clamp(20px, 3vw, 36px)' }}>
            {steps.map((s, i) => (
              <div key={s.n} style={{
                display: 'grid',
                gridTemplateColumns: '60px 1fr auto',
                gap: 24,
                padding: '24px 0',
                borderBottom: i === steps.length - 1 ? 'none' : '1px solid #2a2a35',
                alignItems: 'flex-start',
              }} className="step-row">
                <div className="mono" style={{ fontSize: 13, color: '#666', paddingTop: 4 }}>{s.n}</div>
                <div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 8, flexWrap: 'wrap' }}>
                    <span className="mono" style={{ fontSize: 14, color: 'var(--accent)' }}>
                      $ <span style={{ color: '#fff' }}>{s.cmd}</span>
                    </span>
                  </div>
                  <h3 className="display" style={{
                    fontSize: 28, fontWeight: 600, color: '#fff', margin: '0 0 8px',
                    letterSpacing: '-0.02em',
                  }}>
                    {s.title}
                  </h3>
                  <p style={{ color: '#9a9aaa', margin: 0, fontSize: 15, maxWidth: 600, lineHeight: 1.6 }}>{s.desc}</p>
                </div>
                <span className="mono" style={{
                  fontSize: 11, color: '#9a9aaa',
                  padding: '6px 12px', border: '1px solid #2a2a35', borderRadius: 999,
                  whiteSpace: 'nowrap',
                }}>{s.time}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 700px){
          .step-row{ grid-template-columns: 40px 1fr !important; }
          .step-row > :last-child{ grid-column: 2; }
        }
      `}</style>
    </section>
  );
}

window.Processo = Processo;