function CustomOffer() {
  const steps = [
    {
      n: '01',
      t: 'Vous décrivez vos objectifs',
      d: 'Vous nous indiquez les tâches qui vous prennent du temps et les outils que vous utilisez au quotidien. Rien de technique.',
      icon: (
        <svg viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="1.4">
          <path d="M8 10 H 32 M8 18 H 32 M8 26 H 24" />
          <circle cx="30" cy="29" r="6" />
          <path d="M30 26.5 v5 M27.5 29 h5" />
        </svg>
      ),
    },
    {
      n: '02',
      t: 'Nous construisons sur-mesure',
      d: 'Nous concevons les automatisations calibrées pour votre cabinet — pas un package générique, mais des systèmes adaptés à vos process.',
      icon: (
        <svg viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="1.4">
          <path d="M20 6 L30 12 V28 L20 34 L10 28 V12 Z" />
          <path d="M20 14 L26 17 V23 L20 26 L14 23 V17 Z" />
        </svg>
      ),
    },
    {
      n: '03',
      t: 'Vous récupérez 5 à 10h par semaine',
      d: 'Les automatisations tournent. Vous payez exactement ce qui est construit — ni plus, ni moins — et votre équipe se concentre sur l\'essentiel.',
      icon: (
        <svg viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="1.4">
          <circle cx="20" cy="20" r="14" />
          <path d="M20 12 V20 L26 23" strokeLinecap="round" />
        </svg>
      ),
    },
  ];

  const reasons = [
    {
      t: 'Nous nous adaptons à vos outils',
      d: 'Chaque cabinet a ses propres logiciels. Plutôt que de vous imposer les nôtres, nous connectons les automatisations à ce que vous utilisez déjà.',
    },
    {
      t: 'Vous payez ce qui est construit',
      d: 'Chaque composant a un prix connu à l\'avance. Votre devis reflète exactement le système livré, sans surcoût caché ni fonctionnalité inutile.',
    },
    {
      t: 'Pas de package générique',
      d: 'Les offres « taille unique » ne correspondent à personne. Nous partons de vos points de friction réels pour ne construire que ce qui vous fait gagner du temps.',
    },
  ];

  return (
    <Section id="sur-mesure" 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 [mask-image:radial-gradient(ellipse_at_top,black_20%,transparent_75%)]"></div>
      <div className="relative mx-auto max-w-7xl px-5 sm:px-8">

        {/* Comment ça fonctionne */}
        <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>Comment ça fonctionne
            </div>
          </Reveal>
          <Reveal delay={80}>
            <h2 className="mt-5 font-display text-4xl sm:text-5xl md:text-[56px] font-medium tracking-tight text-balance">Trois étapes, du besoin au temps gagné.</h2>
          </Reveal>
        </div>

        <div className="mt-14 grid md:grid-cols-3 gap-5">
          {steps.map((s, i) => (
            <Reveal key={s.n} delay={i * 120}>
              <div className="gborder-light h-full">
                <div className="p-7 h-full flex flex-col">
                  <div className="flex items-center justify-between">
                    <div className="w-12 h-12 rounded-xl bg-violet-600/10 border border-violet-600/15 grid place-items-center text-violet-600">{s.icon}</div>
                    <span className="font-display text-3xl font-medium text-ink-900/15">{s.n}</span>
                  </div>
                  <h3 className="mt-6 font-display text-[21px] font-medium tracking-tight text-ink-900 text-balance">{s.t}</h3>
                  <p className="mt-3 text-[14px] text-ink-900/65 leading-relaxed flex-1">{s.d}</p>
                </div>
              </div>
            </Reveal>
          ))}
        </div>

        {/* Pourquoi un devis sur-mesure */}
        <div className="mt-28 grid lg:grid-cols-12 gap-12 lg:gap-16 items-start">
          <div className="lg:col-span-5">
            <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>Pourquoi un devis sur-mesure ?
              </div>
            </Reveal>
            <Reveal delay={80}>
              <h2 className="mt-5 font-display text-4xl sm:text-5xl font-medium tracking-tight text-balance">Parce qu'aucune fiduciaire ne se ressemble.</h2>
            </Reveal>
            <Reveal delay={140}>
              <p className="mt-6 text-[16px] text-ink-900/70 leading-relaxed max-w-xl">
                Nous ne vendons pas de produit sur étagère. Nous construisons exactement ce dont votre cabinet a besoin, au prix de ce qui est réellement livré.
              </p>
            </Reveal>
          </div>

          <div className="lg:col-span-7 grid sm:grid-cols-1 gap-4">
            {reasons.map((r, i) => (
              <Reveal key={r.t} delay={100 + i * 80}>
                <div className="flex gap-4 p-5 rounded-2xl bg-white border border-ink-900/8">
                  <div className="mt-0.5 w-6 h-6 rounded-full bg-ink-900 text-white grid place-items-center shrink-0">
                    <Icon.Check className="w-3.5 h-3.5" />
                  </div>
                  <div>
                    <div className="font-display text-[17px] font-medium tracking-tight text-ink-900">{r.t}</div>
                    <p className="mt-1.5 text-[14px] text-ink-900/65 leading-relaxed">{r.d}</p>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>

      </div>
    </Section>
  );
}

window.CustomOffer = CustomOffer;