/* global React */
function Process() {
  const wrap = { padding: '120px 0', borderTop: '1px solid var(--ink)' };
  const header = {
    display: 'grid', gridTemplateColumns: '5fr 7fr', gap: '64px',
    alignItems: 'end', paddingBottom: '64px',
  };
  const h2 = {
    fontSize: 'clamp(40px, 5.4vw, 72px)', fontWeight: 500,
    letterSpacing: '-0.03em', lineHeight: 1.02, color: 'var(--ink)', margin: 0,
    maxWidth: '18ch',
  };
  const lead = {
    fontSize: '19px', lineHeight: 1.55, color: 'var(--warm-700)', margin: 0,
    maxWidth: '46ch',
  };

  const phases = [
    {
      n: '01',
      label: 'Diagnóstico',
      title: 'Onde a operação ainda perde tempo.',
      body: 'Imersão com o time. Mapeamento de processos. Lista de casos de uso priorizados por impacto e viabilidade.',
      deliverables: ['Mapa de processos', 'Lista de casos de uso', 'Plano de implementação'],
    },
    {
      n: '02',
      label: 'Implementação',
      title: 'O agente entra em produção.',
      body: 'Construção do agente, integração com o stack existente e métrica de impacto desde o primeiro dia. Sem reinventar a infraestrutura.',
      deliverables: ['Agente em produção', 'Integração com seu stack', 'Painel de métricas'],
    },
    {
      n: '03',
      label: 'Manutenção',
      title: 'O agente acompanha o time.',
      body: 'Monitoramento, evolução do modelo e governança. Ajustamos conforme a operação muda. Seu time não fica sozinho com a IA.',
      deliverables: ['Monitoramento contínuo', 'Evolução do modelo', 'Governança de IA'],
    },
  ];

  const phaseRow = {
    display: 'grid', gridTemplateColumns: '80px 1fr 1fr 1fr', gap: '48px',
    alignItems: 'start', padding: '40px 0', borderTop: '1px solid var(--border)',
  };
  const phaseRowLast = { ...phaseRow, borderBottom: '1px solid var(--border)' };
  const num = {
    fontFamily: 'var(--font-display)', fontSize: '64px', fontWeight: 500,
    letterSpacing: '-0.04em', lineHeight: 0.9, color: 'var(--graphite)',
  };
  const label = {
    fontFamily: 'var(--font-mono)', fontSize: '11px', letterSpacing: '0.14em',
    textTransform: 'uppercase', color: 'var(--warm-600)', display: 'block', marginBottom: '8px',
  };
  const t = { fontSize: '24px', fontWeight: 500, letterSpacing: '-0.02em', color: 'var(--ink)', margin: 0, maxWidth: '20ch' };
  const d = { fontSize: '14px', lineHeight: 1.55, color: 'var(--warm-600)', margin: '12px 0 0', maxWidth: '34ch' };
  const list = { display: 'flex', flexDirection: 'column', gap: '8px', listStyle: 'none', padding: 0, margin: 0 };
  const item = {
    display: 'flex', alignItems: 'baseline', gap: '10px',
    fontSize: '13px', color: 'var(--ink)',
    fontFamily: 'var(--font-mono)', letterSpacing: '0.02em',
  };
  const itemMark = { color: 'var(--graphite)', fontWeight: 500, fontSize: '11px' };

  return (
    <section style={wrap} id="processo">
      <div className="container">
        <header style={header}>
          <div>
            <div className="eyebrow"><span className="n">03</span>Processo</div>
            <h2 style={{ ...h2, marginTop: '16px' }}>Como o agente entra e permanece.</h2>
          </div>
          <p style={lead}>
            Cada fase existe para reduzir o atrito interno e levar o time a adotar o agente de verdade.
          </p>
        </header>

        {phases.map((p, i) => (
          <div key={p.n} style={i === phases.length - 1 ? phaseRowLast : phaseRow}>
            <div style={num}>{p.n}</div>
            <div>
              <span style={label}>{p.label}</span>
            </div>
            <div>
              <h3 style={t}>{p.title}</h3>
              <p style={d}>{p.body}</p>
            </div>
            <ul style={list}>
              {p.deliverables.map((d, j) => (
                <li key={j} style={item}><span style={itemMark}>·</span> {d}</li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </section>
  );
}

window.Process = Process;