function Process() {
  const steps = [
    { n: '01', t: 'Appel découverte', meta: '30 min · gratuit · sans engagement', d: 'Nous comprenons vos process, vos outils, vos points de friction.' },
    { n: '02', t: 'Audit + Devis', meta: '48h · détaillé', d: 'Nous évaluons, nous chiffrons, nous proposons 1 à 3 automatisations à fort impact.' },
    { n: '03', t: 'Construction', meta: '2–4 semaines · démos hebdo', d: 'Nous construisons en transparence. Vous voyez l\'avancée chaque semaine.' },
    { n: '04', t: 'Mise en prod + Formation', meta: '1h suffit · monitoring inclus', d: 'Nous formons votre équipe. Nous surveillons 24/7. Nous itérons.' },
  ];
  return (
    <Section id="process" className="relative py-28 sm:py-36 bg-paper-50 text-ink-900 overflow-hidden border-t border-ink-900/5">
      <div className="absolute inset-0 tech-grid-light opacity-40"></div>
      <div className="relative mx-auto max-w-7xl px-5 sm:px-8">
        <div className="max-w-3xl">
          <Reveal>
            <div className="inline-flex items-center gap-2 font-mono text-[10px] tracking-[0.28em] uppercase text-ink-900/60">
              <span className="w-6 h-px bg-ink-900/30"></span>07 · Process
            </div>
          </Reveal>
          <Reveal delay={80}>
            <h2 className="mt-5 font-display text-4xl sm:text-5xl md:text-6xl font-medium tracking-tight text-balance">4 étapes, 2 à 4 semaines de la signature à la prod.</h2>
          </Reveal>
        </div>

        <div className="mt-16 relative">
          {/* connecting line */}
          <div className="absolute left-0 right-0 top-[42px] hidden md:block">
            <svg viewBox="0 0 1000 8" className="w-full h-2" preserveAspectRatio="none">
              <line x1="0" y1="4" x2="1000" y2="4" stroke="#0a0a0f" strokeOpacity=".15" strokeDasharray="4 6" />
            </svg>
          </div>

          <div className="grid md:grid-cols-4 gap-6">
            {steps.map((s, i) => (
              <Reveal key={s.n} delay={i * 120}>
                <div className="relative">
                  <div className="w-[84px] h-[84px] rounded-full bg-white border border-ink-900/10 grid place-items-center shadow-[0_8px_30px_-12px_rgba(10,10,15,0.2)] relative z-10">
                    <span className="font-display text-2xl font-medium text-ink-900">{s.n}</span>
                  </div>
                  <h3 className="mt-6 font-display text-[20px] font-medium tracking-tight text-ink-900">{s.t}</h3>
                  <div className="mt-1.5 font-mono text-[10.5px] uppercase tracking-[0.16em] text-violet-600">{s.meta}</div>
                  <p className="mt-3 text-[13.5px] text-ink-900/65 leading-relaxed">{s.d}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </div>
    </Section>
  );
}

window.Process = Process;