function FinalCTA() {
  return (
    <Section id="cta" className="relative py-28 sm:py-40 overflow-hidden">
      {/* aurora full bleed */}
      <div className="absolute inset-0 aurora opacity-90"></div>
      <div className="absolute inset-0 bg-gradient-to-b from-ink-900/40 via-ink-900/30 to-ink-900/80"></div>
      <div className="absolute inset-0 tech-grid opacity-25"></div>
      <div className="absolute -top-1/3 left-1/2 -translate-x-1/2 w-[80%] h-[60%] rounded-full bg-violet-600/30 blur-[120px]"></div>
      <div className="absolute -bottom-32 left-1/2 -translate-x-1/2 w-[90%] h-64 rounded-[50%] bg-cy-400/20 blur-[100px]"></div>

      <div className="relative mx-auto max-w-4xl px-5 sm:px-8 text-center">
        <Reveal delay={120}>
          <h2 className="font-display text-5xl sm:text-6xl md:text-7xl font-medium tracking-[-0.025em] text-paper-50 text-balance">Prêt à libérer <span className="gtext">votre équipe</span> ?</h2>
        </Reveal>
        <Reveal delay={200}>
          <p className="mt-7 text-[17px] sm:text-[18px] text-paper-100/75 leading-relaxed max-w-2xl mx-auto">30 minutes pour comprendre vos besoins. 48 heures pour un devis détaillé. Aucun engagement.</p>
        </Reveal>
        <Reveal delay={280}>
          <div className="mt-10 flex flex-col sm:flex-row items-center justify-center gap-3">
            <Magnetic><a href="/configurateur" className="btn-primary !py-4 !px-7 !text-[15px]">Configurer mon offre<Icon.Arrow className="w-4 h-4" /></a></Magnetic>
            <a href="mailto:contact@helloflowo.ch?subject=Appel%20découverte%20Flowo" className="btn-ghost !py-4 !px-7 !text-[15px]">Réserver un appel</a>
          </div>
          <div className="mt-4 flex justify-center">
            <a href="mailto:contact@helloflowo.ch" className="text-paper-100/80 hover:text-paper-50 transition font-mono text-[13px]">contact@helloflowo.ch</a>
          </div>
        </Reveal>

        <Reveal delay={400}>
          <div className="mt-16 grid grid-cols-3 max-w-2xl mx-auto divide-x divide-paper-300/10 text-center">
            {[
              { v: '30min', l: "L'appel" },
              { v: '48h', l: 'Le devis' },
              { v: '2–4 sem.', l: 'La livraison' },
            ].map((s) => (
              <div key={s.l} className="px-4">
                <div className="font-display text-2xl sm:text-3xl text-paper-50">{s.v}</div>
                <div className="mt-1 text-[11px] font-mono uppercase tracking-wider text-paper-300/50">{s.l}</div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </Section>
  );
}

window.FinalCTA = FinalCTA;