// Method.jsx — process timeline
const Method = () => {
  const steps = [
    { num: '01', title: 'Descoberta', desc: 'Duas semanas com o time. Mapeamos negócio, audiência e métrica de sucesso.' },
    { num: '02', title: 'Design',     desc: 'Identidade, sistema, prototipagem hi-fi. Dois ciclos de revisão, prazo fechado.' },
    { num: '03', title: 'Código',     desc: 'Stack moderno, performance auditada, deploy contínuo. Sem black box.' },
    { num: '04', title: 'Lançamento', desc: 'Go-live acompanhado, métricas calibradas, transferência completa em 30 dias.' },
  ];
  return (
    <section className="sect surface-cream-2" id="metodo" data-screen-label="Method" style={{ background: 'var(--surface-2)' }}>
      <div className="container">
        <div className="sect__head">
          <div>
            <div className="sect__eyebrow">
              <span className="jet-trail" aria-hidden="true"></span>
              Processo
            </div>
            <h2 className="sect__title display-m" style={{ marginTop: 16 }}>
              Como <em>trabalhamos</em>
            </h2>
          </div>
          <p className="lead" style={{ maxWidth: 360, marginBottom: 6 }}>
            Times pequenos, processo enxuto, entregas previsíveis. Da descoberta ao lançamento em 8 semanas.
          </p>
        </div>

        <div className="method">
          {steps.map((s) => (
            <div key={s.num} className="method__step">
              <div className="method__num">{s.num}</div>
              <h3 className="method__title">{s.title}</h3>
              <p className="method__desc">{s.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.Method = Method;