function Pricing() {
  // Exemples concrets — chiffres vérifiés par le moteur du configurateur.
  const examples = [
    {
      name: 'Tri des emails + Relances clients',
      sub: 'Le duo le plus demandé',
      results: ['Tri & classification des emails', 'Relances de documents clients'],
      setup: "5'950", monthly: "1'360",
      bundle: '−15% bundle',
      glow: true,
      badge: 'Le plus populaire',
    },
    {
      name: 'Suivi des échéances + Rapport direction',
      sub: 'Pilotage et conformité',
      results: ['Suivi des échéances fiscales', 'Rapport hebdomadaire direction'],
      setup: "5'700", monthly: "1'350",
      bundle: '−15% bundle',
      glow: false,
    },
    {
      name: 'Onboarding clients + Courriers auto',
      sub: 'Accueil et documents',
      results: ['Onboarding nouveau client', 'Génération de courriers automatiques'],
      setup: "6'550", monthly: "1'480",
      bundle: '−15% bundle',
      glow: false,
    },
  ];

  return (
    <Section id="niveaux" className="relative py-28 sm:py-36 bg-paper-50 text-ink-900 overflow-hidden">
      <div className="absolute inset-0 tech-grid-light opacity-50 [mask-image:radial-gradient(ellipse_at_top,black_30%,transparent_75%)]"></div>
      <div className="relative mx-auto max-w-7xl px-5 sm:px-8">
        <div className="text-center max-w-3xl mx-auto">
          <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>03 · Le modèle & les prix
          </div>
          <h2 className="mt-5 font-display text-4xl sm:text-5xl md:text-6xl font-medium tracking-tight text-ink-900">Vous choisissez vos résultats. Le prix se compose.</h2>
          <p className="mt-5 text-ink-900/60 text-[17px]">Pas de package figé. Vous sélectionnez les automatisations dont votre cabinet a besoin — chacune avec ou sans intelligence artificielle — et votre devis se calcule automatiquement.</p>
        </div>

        {/* Comment se compose le prix — 3 briques */}
        <Reveal>
          <div className="mt-14 grid sm:grid-cols-3 gap-4 max-w-5xl mx-auto">
            {[
              { n: '01', t: 'Vous choisissez vos résultats', d: 'Tri des emails, relances, suivi des échéances… Chaque résultat est indépendant.' },
              { n: '02', t: 'Avec ou sans IA', d: 'Chaque résultat existe en version déterministe ou enrichie par l\'IA. Vous décidez, résultat par résultat.' },
              { n: '03', t: 'Le prix se compose', d: 'Mise en place + abonnement mensuel calculés automatiquement, réductions de volume appliquées.' },
            ].map((s) => (
              <div key={s.n} className="gborder-light h-full">
                <div className="p-6 h-full flex flex-col">
                  <div className="font-mono text-[11px] tracking-[0.22em] uppercase text-violet-600">{s.n}</div>
                  <h3 className="mt-3 font-display text-[18px] font-medium tracking-tight text-ink-900">{s.t}</h3>
                  <p className="mt-2 text-[13.5px] text-ink-900/60 leading-relaxed">{s.d}</p>
                </div>
              </div>
            ))}
          </div>
        </Reveal>

        {/* Exemples concrets — chiffres vérifiés */}
        <div className="mt-16 text-center">
          <div className="font-mono text-[10px] tracking-[0.28em] uppercase text-ink-900/50">Quelques combinaisons fréquentes</div>
          <p className="mt-2 text-[14px] text-ink-900/55 max-w-xl mx-auto">Exemples réels avec intelligence artificielle. Votre devis exact dépend de vos résultats et de vos outils.</p>
        </div>

        <div className="mt-10 grid lg:grid-cols-3 gap-5 lg:gap-4 items-stretch">
          {examples.map((ex, i) => (
            <Reveal key={ex.name} delay={i * 100} className={ex.glow ? 'lg:-translate-y-4' : ''}>
              <ExampleCard {...ex} />
            </Reveal>
          ))}
        </div>

        <Reveal>
          <div className="mt-8 text-center text-[12.5px] text-ink-900/55 max-w-2xl mx-auto">
            L'intelligence artificielle utilise OpenAI Ireland Ltd, encadrée contractuellement par clauses contractuelles types (art. 16 al. 2 let. d LPD), avec une conservation de 30 jours maximum — son activation est optionnelle.
          </div>
        </Reveal>

        {/* Paliers de réduction */}
        <Reveal>
          <div className="mt-16 grid sm:grid-cols-2 gap-4 max-w-3xl mx-auto">
            <BundleCard
              tag="01 · Plus vous combinez, plus c'est avantageux"
              tiers={[
                { label: '2 résultats', value: '−15%' },
                { label: '3 résultats', value: '−20%' },
                { label: '4 résultats et +', value: '−25%' },
              ]}
              suffix="sur la mise en place"
              desc="La réduction s'applique automatiquement dès deux résultats livrés ensemble. Cumulable avec l'engagement annuel."
              gradient="from-violet-600 via-violet-500 to-mag-400"
              illus={(
                <svg viewBox="0 0 80 80" fill="none" className="w-full h-full">
                  <rect x="10" y="10" width="34" height="34" rx="6" fill="white" fillOpacity="0.18" stroke="white" strokeOpacity="0.5" />
                  <rect x="22" y="22" width="34" height="34" rx="6" fill="white" fillOpacity="0.28" stroke="white" strokeOpacity="0.6" />
                  <rect x="34" y="34" width="34" height="34" rx="6" fill="white" fillOpacity="0.45" stroke="white" />
                  <text x="51" y="58" textAnchor="middle" fontSize="14" fontFamily="Space Grotesk" fontWeight="700" fill="white">×N</text>
                </svg>
              )}
            />
            <BundleCard
              tag="02 · Engagement annuel"
              headline="−2 mois"
              suffix="sur la maintenance"
              desc="12 mois d'engagement, 10 mois facturés. Équivaut à ~16% d'économie annuelle."
              gradient="from-ink-900 via-ink-800 to-violet-700"
              illus={(
                <svg viewBox="0 0 80 80" fill="none" className="w-full h-full">
                  <circle cx="40" cy="40" r="28" stroke="white" strokeOpacity="0.5" strokeWidth="1.5" fill="none" />
                  <path d="M40 40 L40 14 A 26 26 0 0 1 64 44 Z" fill="white" fillOpacity="0.85" />
                  <circle cx="40" cy="40" r="3" fill="white" />
                  {[...Array(12)].map((_, i) => {
                    const a = (i * 30) * Math.PI / 180;
                    const x1 = 40 + Math.cos(a) * 24;
                    const y1 = 40 + Math.sin(a) * 24;
                    const x2 = 40 + Math.cos(a) * 28;
                    const y2 = 40 + Math.sin(a) * 28;
                    return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="white" strokeOpacity="0.6" strokeWidth="1.2" />;
                  })}
                </svg>
              )}
            />
          </div>
        </Reveal>

        <Reveal>
          <div className="mt-6 text-center text-[12.5px] text-ink-900/55 max-w-2xl mx-auto">
            Cumulables. Trois résultats en engagement annuel = <strong className="text-ink-900 font-semibold">−20% sur la mise en place + ~16% sur la maintenance</strong>. Détaillé lors de l'entretien de diagnostic.
          </div>
        </Reveal>

        {/* CTA configurateur */}
        <Reveal>
          <div className="mt-16 flex flex-col items-center gap-4 text-center">
            <Magnetic>
              <a
                href="/configurateur"
                className="inline-flex items-center justify-center gap-2.5 py-4 px-8 rounded-full font-medium text-[15px] bg-gradient-to-r from-violet-600 to-cy-400 text-white shadow-[0_14px_40px_-12px_rgba(124,58,237,0.7)] hover:scale-[1.02] transition"
              >
                <Icon.Spark className="w-4 h-4" />
                Construire mon devis en 3 minutes
                <Icon.Arrow className="w-4 h-4" />
              </a>
            </Magnetic>
            <div className="text-[12.5px] text-ink-900/50">Gratuit · sans engagement · estimation immédiate</div>
          </div>
        </Reveal>
      </div>
    </Section>
  );
}

function ExampleCard({ name, sub, results, setup, monthly, bundle, glow, badge }) {
  const inner = (
    <div className={`relative h-full p-7 sm:p-8 flex flex-col ${glow ? 'text-paper-50' : 'text-ink-900'}`}>
      {badge && (
        <div className="absolute -top-3 left-1/2 -translate-x-1/2">
          <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[10.5px] font-mono uppercase tracking-[0.18em] bg-gradient-to-r from-violet-600 to-cy-400 text-white shadow-lg">
            <Icon.Spark className="w-3 h-3" /> {badge}
          </span>
        </div>
      )}
      <div className="flex items-baseline justify-between gap-3">
        <div>
          <div className={`font-mono text-[11px] tracking-[0.22em] uppercase ${glow ? 'text-violet-500' : 'text-ink-900/50'}`}>{sub}</div>
          <div className="font-display text-[22px] sm:text-[24px] font-medium mt-1 tracking-tight text-balance">{name}</div>
        </div>
      </div>

      <div className={`mt-6 pt-6 border-t ${glow ? 'border-paper-300/10' : 'border-ink-900/10'}`}>
        <div className="flex items-baseline gap-2">
          <span className="font-display text-4xl font-medium tracking-tight">{setup}</span>
          <span className="text-[13px] opacity-60">CHF mise en place</span>
        </div>
        <div className={`mt-1 text-[13px] ${glow ? 'text-paper-100/70' : 'text-ink-900/60'}`}>
          + <strong className={glow ? 'text-paper-50' : 'text-ink-900'}>{monthly} CHF</strong> / mois · maintenance + IA
        </div>
        {bundle && (
          <div className="mt-3 inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11px] font-mono bg-emerald-500/10 text-emerald-600 border border-emerald-500/20">
            {bundle} appliqué
          </div>
        )}
      </div>

      <div className={`mt-6 text-[11px] font-mono uppercase tracking-[0.18em] ${glow ? 'text-paper-300/50' : 'text-ink-900/40'}`}>Résultats inclus</div>
      <ul className="mt-3 space-y-3 flex-1">
        {results.map((f, i) => (
          <li key={i} className="flex items-start gap-2.5 text-[14px]">
            <span className={`mt-0.5 grid place-items-center w-4 h-4 rounded-full shrink-0 ${glow ? 'bg-violet-600 text-white' : 'bg-ink-900 text-white'}`}>
              <Icon.Check className="w-2.5 h-2.5" />
            </span>
            <span className={glow ? 'text-paper-100/80' : 'text-ink-900/75'}>{f}</span>
          </li>
        ))}
        <li className="flex items-start gap-2.5 text-[14px]">
          <span className={`mt-0.5 grid place-items-center w-4 h-4 rounded-full shrink-0 ${glow ? 'bg-violet-600/40 text-white' : 'bg-ink-900/10 text-ink-900'}`}>
            <Icon.Spark className="w-2.5 h-2.5" />
          </span>
          <span className={glow ? 'text-paper-100/60' : 'text-ink-900/55'}>Avec intelligence artificielle (optionnelle)</span>
        </li>
      </ul>

      <a href="/configurateur" className={`mt-8 inline-flex items-center justify-center gap-2 py-3.5 rounded-full font-medium text-[13.5px] transition ${glow ? 'bg-gradient-to-r from-violet-600 to-cy-400 text-white shadow-[0_10px_30px_-10px_rgba(124,58,237,0.7)] hover:scale-[1.02]' : 'bg-ink-900 text-paper-50 hover:bg-ink-700'}`}>
        Configurer cette combinaison <Icon.Arrow className="w-3.5 h-3.5" />
      </a>
    </div>
  );

  if (glow) return <div className="glow-card relative h-full">{inner}</div>;
  return <div className="gborder-light h-full">{inner}</div>;
}

window.Pricing = Pricing;

function BundleCard({ tag, headline, tiers, suffix, desc, gradient, illus }) {
  return (
    <div className={`relative rounded-3xl overflow-hidden bg-gradient-to-br ${gradient} text-white p-7 sm:p-8 min-h-[220px] group hover:-translate-y-1 transition-transform duration-500 shadow-[0_24px_60px_-30px_rgba(124,58,237,0.6)]`}>
      <div className="absolute inset-0 opacity-25 [background-image:radial-gradient(rgba(255,255,255,0.6)_1px,transparent_1px)] [background-size:18px_18px] mix-blend-overlay"></div>
      <div className="absolute -top-12 -right-12 w-44 h-44 rounded-full bg-white/15 blur-3xl group-hover:scale-110 transition-transform"></div>
      <div className="relative flex items-start justify-between gap-6">
        <div className="flex-1">
          <div className="font-mono text-[10px] tracking-[0.22em] uppercase text-white/75">{tag}</div>
          {tiers ? (
            <div className="mt-5 space-y-2">
              {tiers.map((t) => (
                <div key={t.label} className="flex items-baseline justify-between gap-3 border-b border-white/15 pb-1.5 last:border-0">
                  <span className="text-[13px] text-white/85">{t.label}</span>
                  <span className="font-display text-2xl sm:text-[28px] font-semibold tracking-[-0.03em] leading-none">{t.value}</span>
                </div>
              ))}
            </div>
          ) : (
            <div className="mt-5 flex items-baseline gap-2">
              <div className="font-display text-5xl sm:text-6xl font-semibold tracking-[-0.04em] leading-none">{headline}</div>
            </div>
          )}
          <div className="mt-3 text-[14px] text-white/90 font-medium">{suffix}</div>
          <p className="mt-3 text-[13px] text-white/80 leading-relaxed max-w-[26ch]">{desc}</p>
        </div>
        <div className="w-20 h-20 sm:w-24 sm:h-24 shrink-0 opacity-95">{illus}</div>
      </div>
    </div>
  );
}
window.BundleCard = BundleCard;