// Process / Méthode
const Process = () => {
  const steps = [
    { n: '01', t: 'Diagnostic', d: 'Atelier 90 min. On cartographie vos processus et on identifie les 3 goulots où l\'automatisation a le plus d\'impact.', dur: '1 semaine' },
    { n: '02', t: 'Maquette & devis', d: 'On livre un schéma du workflow proposé, avec gain de temps estimé, coût, et délai. Vous décidez.', dur: '3-5 jours' },
    { n: '03', t: 'Construction', d: 'Développement itératif en sprints courts. Vous voyez tourner le workflow sur vos propres données dès la semaine 2.', dur: '2-6 semaines' },
    { n: '04', t: 'Mise en production', d: 'Documentation, formation de vos équipes, monitoring. Le workflow tourne en autonomie, avec un contrat de support.', dur: 'Continu' }
  ];

  return (
    <section id="process" className="section band-light" style={{ borderTop: '1px solid var(--line)' }}>
      <div className="wrap">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 64, flexWrap: 'wrap', gap: 20 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 20 }}>Méthode</div>
            <h2 className="h-section">De l'atelier au workflow<br/>en <span className="serif" style={{ color: 'var(--cyan)' }}>4 à 8 semaines</span>.</h2>
          </div>
          <div className="mono" style={{ color: 'var(--fg-mute)', maxWidth: 280 }}>// Pas de cycle en V. Pas de cahier des charges de 60 pages. On livre, on ajuste.</div>
        </div>

        <div style={{ borderTop: '1px solid var(--line-strong)' }}>
          {steps.map((s, i) => (
            <div key={s.n} style={{
              display: 'grid',
              gridTemplateColumns: '120px 1fr 2fr 180px',
              gap: 32,
              padding: '32px 0',
              borderBottom: '1px solid var(--line-strong)',
              alignItems: 'baseline'
            }} className="proc-row">
              <div className="mono" style={{ fontSize: 13, color: 'var(--cyan)' }}>Étape {s.n}</div>
              <div style={{ fontSize: 28, fontWeight: 500, letterSpacing: '-0.01em' }}>{s.t}</div>
              <div style={{ fontSize: 15.5, lineHeight: 1.55, color: 'var(--fg-dim)', maxWidth: 520 }}>{s.d}</div>
              <div className="mono" style={{ textAlign: 'right', color: 'var(--fg-mute)' }}>⌁ {s.dur}</div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 860px) {
          .proc-row { grid-template-columns: 1fr !important; gap: 8px !important; }
          .proc-row > :last-child { text-align: left !important; }
        }
      `}</style>
    </section>
  );
};

Object.assign(window, { Process });