const Process = () => {
  const steps = [
    { n: "01", title: "Descoberta", desc: "Entendemos o problema, o negócio e quem vai usar. Sem briefings genéricos.", tick: "Semana 1" },
    { n: "02", title: "Design", desc: "Wireframes → protótipo navegável → sistema de design. Você aprova antes de uma linha de código.", tick: "Semana 2–3" },
    { n: "03", title: "Build", desc: "Dev em sprints curtos, ambiente de staging desde o dia 1, deploys contínuos.", tick: "Semana 3–6" },
    { n: "04", title: "Launch & cuidado", desc: "Lançamento, monitoramento, iteração. Não sumimos depois do go-live.", tick: "Contínuo" },
  ];
  return (
    <section className="section" id="process">
      <div className="container">
        <div className="sec-head">
          <div>
            <div className="eyebrow">Como trabalhamos · 03</div>
            <h2 style={{marginTop:20}}>Quatro passos.<br/><em className="grad-text" style={{fontWeight:400}}>Zero mistério.</em></h2>
          </div>
          <div className="body">Um processo enxuto que cabe em uma folha de papel. Sem reunião sobre reunião, sem PMO de PMO. Só o caminho mais curto entre a ideia e o produto rodando.</div>
        </div>
        <div className="process">
          {steps.map((s,i)=>(
            <div className="p" key={i}>
              <div className="n">{s.n}</div>
              <h3>{s.title}</h3>
              <p>{s.desc}</p>
              <div className="tick">◦ {s.tick}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};
window.Process = Process;