function Process() {
  const steps = [
    {
      k: "01",
      kls: "teal",
      t: "Analise",
      d: "Mergulhamos nos seus dados, sistemas e processos. Mapeamos gargalos, identificamos padrões invisíveis e traduzimos tudo em um diagnóstico claro - sem jargão.",
      tags: ["entrevistas", "audit_de_dados", "mapa_de_fluxo", "diagnóstico"],
    },
    {
      k: "02",
      kls: "",
      t: "Decida",
      d: "Apresentamos caminhos priorizados por retorno, esforço e risco. Você decide com números na mesa - e entende exatamente o que cada opção entrega.",
      tags: ["ROI_por_iniciativa", "prova_de_conceito", "roadmap", "escopo_fechado"],
    },
    {
      k: "03",
      kls: "gold",
      t: "Vença",
      d: "Implementamos em ciclos curtos, com entregas visíveis a cada 2 semanas. Documentação, treinamento e suporte pós-go-live inclusos por padrão.",
      tags: ["sprints_2_sem", "handoff", "treinamento", "suporte"],
    },
  ];

  return (
    <section className="band" id="method" style={{background: "linear-gradient(180deg, rgba(14,36,51,0) 0%, rgba(14,36,51,0.35) 50%, rgba(14,36,51,0) 100%)"}}>
      <div className="shell">
        <div className="sec-head">
          <div>
            <Eyebrow tone="gold">método</Eyebrow>
            <h2 style={{marginTop: 14}}>Três verbos. Um ciclo que <span className="text-grad">repete e acumula</span>.</h2>
          </div>
          <p>Nosso método é o nosso lema. Começa com olhar; termina com resultado medido. E recomeça, porque dado bom sempre abre uma pergunta nova.</p>
        </div>

        <div className="triptych">
          {steps.map(s => (
            <div className={"step " + s.kls} key={s.k}>
              <div className="n">{s.k}</div>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
              <div className="tags">
                {s.tags.map(t => <span className="tag" key={t}>{t}</span>)}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Process });