const { useState, useEffect, useMemo } = React;

/* ─────────────────────────────────────────────────────────────────────────
   Icons — small inline SVGs (no external icon font needed)
   ───────────────────────────────────────────────────────────────────────── */
const I = ({ d, s = 1.75, size = 20, className = "" }) =>
<svg width={size} height={size} viewBox="0 0 24 24" fill="none"
stroke="currentColor" strokeWidth={s} strokeLinecap="round" strokeLinejoin="round"
className={className} aria-hidden="true">{d}</svg>;

const Icon = {
  arrow: (p) => <I {...p} d={<><path d="M5 12h14" /><path d="m13 5 7 7-7 7" /></>} />,
  check: (p) => <I {...p} d={<path d="M20 6 9 17l-5-5" />} />,
  x: (p) => <I {...p} d={<><path d="M18 6 6 18" /><path d="m6 6 12 12" /></>} />,
  plus: (p) => <I {...p} d={<><path d="M12 5v14" /><path d="M5 12h14" /></>} />,
  alert: (p) => <I {...p} d={<><path d="m21.73 18-8-14a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" /><path d="M12 9v4" /><path d="M12 17h.01" /></>} />,
  trendDn: (p) => <I {...p} d={<><path d="m22 17-8.5-8.5-5 5L2 7" /><path d="M16 17h6v-6" /></>} />,
  flame: (p) => <I {...p} d={<><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z" /></>} />,
  shield: (p) => <I {...p} d={<><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" /><path d="m9 12 2 2 4-4" /></>} />,
  target: (p) => <I {...p} d={<><circle cx="12" cy="12" r="10" /><circle cx="12" cy="12" r="6" /><circle cx="12" cy="12" r="2" /></>} />,
  zap: (p) => <I {...p} d={<path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z" />} />,
  pin: (p) => <I {...p} d={<><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0" /><circle cx="12" cy="10" r="3" /></>} />,
  phone: (p) => <I {...p} d={<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z" />} />,
  mail: (p) => <I {...p} d={<><rect width="20" height="16" x="2" y="4" rx="2" /><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" /></>} />,
  chart: (p) => <I {...p} d={<><path d="M3 3v16a2 2 0 0 0 2 2h16" /><path d="M7 16V9" /><path d="M11 16v-4" /><path d="M15 16V6" /><path d="M19 16v-9" /></>} />,
  search: (p) => <I {...p} d={<><circle cx="11" cy="11" r="7" /><path d="m21 21-4.3-4.3" /></>} />,
  sparkles: (p) => <I {...p} d={<><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z" /></>} />,
  building: (p) => <I {...p} d={<><rect width="16" height="20" x="4" y="2" rx="2" /><path d="M9 22v-4h6v4" /><path d="M8 6h.01" /><path d="M16 6h.01" /><path d="M12 6h.01" /><path d="M12 10h.01" /><path d="M12 14h.01" /><path d="M16 10h.01" /><path d="M16 14h.01" /><path d="M8 10h.01" /><path d="M8 14h.01" /></>} />,
  lock: (p) => <I {...p} d={<><rect width="18" height="11" x="3" y="11" rx="2" /><path d="M7 11V7a5 5 0 0 1 10 0v4" /></>} />,
  clock: (p) => <I {...p} d={<><circle cx="12" cy="12" r="10" /><polyline points="12 6 12 12 16 14" /></>} />
};

/* ─────────────────────────────────────────────────────────────────────────
   Reusable bits
   ───────────────────────────────────────────────────────────────────────── */
const SectionLabel = ({ n, children }) =>
<div className="flex items-center gap-3 mb-6">
    <span className="mono text-[11px] tracking-[0.18em] uppercase text-mute">{n}</span>
    <span className="h-px flex-1 bg-line max-w-[64px]"></span>
    <span className="mono text-[11px] tracking-[0.18em] uppercase text-ink/70">{children}</span>
  </div>;


const Pill = ({ children, tone = "default" }) => {
  const tones = {
    default: "bg-white border-line text-ink",
    red: "bg-red-brand/10 border-red-brand/30 text-red-deep",
    ok: "bg-ok/10 border-ok/30 text-ok",
    ink: "bg-ink text-paper border-ink"
  };
  return (
    <span className={`inline-flex items-center gap-2 px-3 py-1.5 rounded-full border text-[12px] font-semibold ${tones[tone]}`}>
      {children}
    </span>);

};

/* ─────────────────────────────────────────────────────────────────────────
   Top bar + Nav
   ───────────────────────────────────────────────────────────────────────── */
const TopBar = () =>
<div className="bg-red-brand text-white text-[12.5px]">
    <div className="max-w-[1280px] mx-auto px-5 sm:px-8 py-2 flex items-center justify-between gap-4">
      <div className="flex items-center gap-2 min-w-0">
        <Icon.pin size={14} className="shrink-0" />
        <span className="font-bold tracking-wide truncate">
          Mai 2026 — <span className="font-extrabold">2 places disponible ce trimestre</span> · clôture le 30/06
        </span>
      </div>
      <div className="hidden md:flex items-center gap-5 opacity-95 shrink-0">
        <span className="mono uppercase tracking-wider">Garantie 60 jours</span>
        <span className="opacity-50">·</span>
        <span className="mono uppercase tracking-wider">1 menuisier par zone</span>
      </div>
    </div>
  </div>;


const Nav = () =>
<header className="sticky top-0 z-40 bg-paper/85 backdrop-blur border-b border-line">
    <div className="max-w-[1280px] mx-auto px-5 sm:px-8 h-16 flex items-center justify-between">
      <a href="#top" className="flex items-center gap-2">
        <img src="assets/logo-devis-exclusifs.png" alt="Devis Exclusifs" className="h-9 sm:h-10 w-auto block" />
      </a>
      <nav className="hidden md:flex items-center gap-7 text-[14px] font-semibold">
        <a href="#methode" className="hover:text-red-brand">Méthode</a>
        <a href="#preuves" className="hover:text-red-brand">Résultats</a>
        <a href="#tarifs" className="hover:text-red-brand">Tarifs</a>
        <a href="#faq" className="hover:text-red-brand">FAQ</a>
      </nav>
      <a href="#audit"
    className="btn-primary inline-flex items-center gap-2 bg-ink text-paper font-bold text-[13.5px] px-4 py-2.5 rounded-full">
        Audit gratuit <Icon.arrow size={16} s={2.2} />
      </a>
    </div>
  </header>;


/* ─────────────────────────────────────────────────────────────────────────
   HERO with realistic Google Ads–style stat panel (original design)
   ───────────────────────────────────────────────────────────────────────── */
const StatTile = ({ label, value, sub, accent }) =>
<div className="border border-line bg-white rounded-xl p-4">
    <div className="mono text-[10.5px] tracking-[0.14em] uppercase text-mute">{label}</div>
    <div className={`num display text-[34px] mt-1 ${accent || "text-ink"}`}>{value}</div>
    {sub && <div className="mono text-[11px] text-mute mt-0.5">{sub}</div>}
  </div>;


const HeroChart = () => {
  // synthetic upward conversion curve
  const pts = [4, 5, 7, 6, 9, 11, 10, 14, 17, 16, 19, 22, 21, 26, 29, 32, 30, 35, 38, 41];
  const max = 45;
  const w = 560,h = 160,pad = 8;
  const step = (w - pad * 2) / (pts.length - 1);
  const path = pts.map((v, i) => `${i === 0 ? "M" : "L"} ${pad + i * step} ${h - pad - v / max * (h - pad * 2)}`).join(" ");
  const area = path + ` L ${pad + (pts.length - 1) * step} ${h - pad} L ${pad} ${h - pad} Z`;
  return (
    <svg viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none" className="w-full h-[140px] sm:h-[160px] block">
      <defs>
        <linearGradient id="g" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="#06A77D" stopOpacity="0.28" />
          <stop offset="100%" stopColor="#06A77D" stopOpacity="0" />
        </linearGradient>
      </defs>
      {[0, 1, 2, 3].map((i) =>
      <line key={i} x1="0" x2={w} y1={pad + i * ((h - pad * 2) / 3)} y2={pad + i * ((h - pad * 2) / 3)}
      stroke="#E7E4DC" strokeDasharray="2 4" />
      )}
      <path d={area} fill="url(#g)" />
      <path d={path} stroke="#06A77D" strokeWidth="2.25" fill="none" strokeLinecap="round" />
      {pts.map((v, i) => i % 4 === 3 &&
      <circle key={i} cx={pad + i * step} cy={h - pad - v / max * (h - pad * 2)} r="3" fill="#0B0B0C" />
      )}
    </svg>);

};

const AdsPanel = () =>
<div className="relative">
    {/* Mobile-only badge: stacks ABOVE the card, no overlay */}
    <div className="lg:hidden flex justify-end mb-2">
      <span className="inline-flex items-center gap-1.5 bg-ink text-paper px-2.5 py-1 rounded-full text-[10.5px] font-bold shadow-md">
        <Icon.sparkles size={12} /> Données réelles · vérifiables
      </span>
    </div>

    {/* paper card */}
    <div className="relative bg-white border border-line rounded-2xl p-5 sm:p-6 shadow-[0_30px_60px_-30px_rgba(11,11,12,0.25)]">
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center gap-2 min-w-0">
          <div className="w-2 h-2 rounded-full bg-red-brand shrink-0"></div>
          <div className="w-2 h-2 rounded-full bg-[#FFD60A] shrink-0"></div>
          <div className="w-2 h-2 rounded-full bg-ok shrink-0"></div>
          <span className="ml-2 mono text-[11px] text-mute truncate">compte-ads · menuiserie</span>
        </div>
        <span className="chip shrink-0"><span className="dot"></span>LIVE</span>
      </div>

      <div className="flex items-baseline justify-between gap-3">
        <div className="min-w-0">
          <div className="mono text-[10.5px] tracking-[0.14em] uppercase text-mute">Demandes de devis exclusives</div>
          <div className="display text-[clamp(2.8rem,9vw,3.6rem)] leading-none num">227</div>
        </div>
        <div className="text-right shrink-0">
          <div className="mono text-[10.5px] tracking-[0.14em] uppercase text-mute">10 mois</div>
          <div className="mono text-[12px] text-ink whitespace-nowrap">Août 25 → Mai 26</div>
        </div>
      </div>

      <div className="mt-3"><HeroChart /></div>

      <div className="grid grid-cols-1 sm:grid-cols-3 gap-2.5 mt-4">
        <StatTile label="CPA moyen" value="22,53€" sub="vs 60-80€ Habitatpresto" accent="text-ok" />
        <StatTile label="CTR" value="8,38%" sub="benchmark secteur 3,1%" />
        <StatTile label="Conv. rate" value="7,10%" sub="visiteur → devis" />
      </div>

      <div className="mt-4 flex items-center justify-between gap-3 border-t border-line pt-3">
        <div className="mono text-[11px] text-mute">Coût total Google Ads · 10 mois</div>
        <div className="num font-extrabold text-[15px] whitespace-nowrap">5&nbsp;114&nbsp;€</div>
      </div>
    </div>

    {/* Desktop-only floating sticker (lg+) */}
    <div className="hidden lg:inline-flex absolute -right-4 -top-4 items-center gap-2 bg-ink text-paper px-3 py-2 rounded-full text-[12px] font-bold shadow-lg rotate-[3deg]">
      <Icon.sparkles size={14} /> Données réelles · vérifiables
    </div>
  </div>;


const Hero = () =>
<section id="top" className="relative overflow-hidden border-b border-line">
    <div className="absolute inset-0 grid-bg opacity-50 pointer-events-none"></div>
    <div className="relative max-w-[1280px] mx-auto px-5 sm:px-8 pt-14 sm:pt-20 pb-16">
      <div className="grid lg:grid-cols-[1.05fr_0.95fr] gap-10 lg:gap-14 items-center">
        <div>
          <div className="flex flex-wrap items-center gap-2 mb-6">
            <Pill tone="red"><Icon.flame size={13} /> Pour menuisiers, poseurs &amp; fabricants en France</Pill>
            <Pill><Icon.pin size={13} /> France &amp; Luxembourg</Pill>
          </div>

          <h1 className="display text-[clamp(2.4rem,5.6vw,4.5rem)]">
            Vous êtes <span className="marker-strike">meilleur que Tryba</span> localement.{" "}
            <span className="text-red-brand">Mais vos prospects ne le savent pas.</span>
          </h1>

          <p className="mt-6 text-[clamp(1.05rem,1.5vw,1.3rem)] text-ink/80 max-w-[660px] leading-snug font-medium">
            <b className="text-ink">80&nbsp;%</b> des particuliers qui cherchent un menuisier sur Google atterrissent chez
            <b className="text-ink"> Tryba, K par K ou Habitatpresto</b> - pas chez vous.
            Nous installons sur votre site la machine qui change ça : <b className="text-ink">Google Ads ultra-localisé + parcours de qualification</b>.
            1 menuisier par zone, devis exclusifs à <b className="text-ink">22&nbsp;€</b>, garantie 60 jours.
          </p>

          <div className="mt-5 flex items-start gap-3 text-[13px] leading-snug">
            <Icon.shield size={18} className="text-ok shrink-0 mt-0.5" />
            <p className="flex-1">
              <span className="font-semibold">Plus de 850 demandes générées</span>
              <span className="text-mute"> sur le secteur de la menuiserie dans les 12 derniers mois</span>
            </p>
          </div>

          <div className="mt-8 flex flex-wrap items-center gap-4">
            <a href="#audit" className="btn-primary inline-flex items-center gap-2 bg-red-brand text-white font-extrabold text-[16px] px-6 py-4 rounded-full">
              Recevoir mon audit gratuit sur ma zone <Icon.arrow size={18} s={2.3} />
            </a>
            <a href="#methode" className="text-[14px] font-bold underline underline-offset-4 decoration-2">
              Voir la méthode
            </a>
          </div>

          <div className="mt-3 mono text-[12px] text-mute">
            Réservé à 10 entreprises menuiserie / mois · 48 h ouvrées · Valeur 290 €
          </div>
        </div>

        <div className="lg:pl-4">
          <AdsPanel />
        </div>
      </div>
    </div>

    {/* logos / trust strip */}
    <div className="relative border-t border-line bg-white/70">
      <div className="max-w-[1280px] mx-auto px-5 sm:px-8 py-5 flex items-center gap-6 flex-wrap">
        <div className="mono text-[10.5px] tracking-[0.16em] uppercase text-mute shrink-0">Clients actifs</div>
        <img src="assets/mcp-logo.png" alt="MCP Menuiserie" className="h-9 w-auto" />
        <span className="text-line">/</span>
        <img src="assets/iso-store-logo.jpg" alt="ISO Store" className="h-9 w-auto rounded-sm" />
        <span className="text-line">/</span>
        <span className="font-extrabold tracking-tight"><img src="assets/plaisance-logo.png" alt="Plaisance Fenêtres &amp; Stores — depuis 1950" className="h-12 w-auto inline-block" /></span>
        <span className="text-line">/</span>
        <img src="assets/jbz-logo.png" alt="Groupe JBZ — Bâtir ensemble" className="h-8 w-auto" />
        <span className="text-line hidden sm:inline">/</span>
        <span className="mono text-[12px] text-mute hidden sm:inline">Expert Rénovateur K-Line · Bubendorff · Somfy · Schüco</span>
      </div>
    </div>
  </section>;


/* ─────────────────────────────────────────────────────────────────────────
   VILLAIN section
   ───────────────────────────────────────────────────────────────────────── */
const Villain = () => {
  const cards = [
  {
    icon: <Icon.flame size={22} />,
    kicker: "PROBLÈME 01",
    title: "Vos leads ne vous appartiennent pas",
    body: "Habitatpresto, Bobex, plateformes CEE ou même les réseaux qualité qui drainent vos leads vers leurs partenaires. Dans tous les cas, vos demandes sont partagées avec 3-5 concurrents. Vous signez 1 sur 10, et le coût d'acquisition réel monte à 200-400 €.",
    meta: "CAC réel 200-400 € / signature"
  },
  {
    icon: <Icon.search size={22} />,
    kicker: "PROBLÈME 02",
    title: "Les franchises mangent votre SEO",
    body: "Sur « devis fenêtres [votre ville] », les 4 premières annonces sont des franchises nationales. Avec leurs budgets, vous n'apparaissez nulle part - alors que vous êtes meilleur localement.",
    meta: "0 visibilité sur votre ville"
  },
  {
    icon: <Icon.trendDn size={22} />,
    kicker: "PROBLÈME 03",
    title: "Le bouche-à-oreille a ses limites",
    body: "80 % de votre flux dépend des recommandations. Ça marche tant que ça marche - mais c'est invisible sur le web et imprévisible. Quand un mois est creux, vous n'avez aucun levier pour le rattraper. Et votre dernière tentative avec une agence digitale a brûlé du budget pour rien.",
    meta: "0 levier sur les mois creux"
  }];

  return (
    <section className="border-b border-line">
      <div className="max-w-[1280px] mx-auto px-5 sm:px-8 py-20">
        <SectionLabel n="01">Le constat</SectionLabel>
        <h2 className="h2 text-[clamp(2rem,4.5vw,3.5rem)] max-w-[900px]">
          Vous reconnaissez <span className="text-red-brand">cette situation&nbsp;?</span>
        </h2>
        <p className="mt-4 text-ink/70 text-[17px] max-w-[680px]">
          Trois scénarios qu'on entend chaque semaine en discovery avec des dirigeants de menuiserie 5-20 salariés.
        </p>

        <div className="grid md:grid-cols-3 gap-5 mt-12">
          {cards.map((c, i) =>
          <article key={i} className="bg-white border border-line rounded-2xl p-6 flex flex-col">
              <div className="flex items-center justify-between">
                <div className="w-11 h-11 rounded-xl bg-red-brand/10 text-red-deep grid place-items-center">{c.icon}</div>
                <span className="mono text-[10.5px] tracking-[0.16em] text-mute">{c.kicker}</span>
              </div>
              <h3 className="mt-5 font-extrabold text-[22px] tracking-tight leading-tight">{c.title}</h3>
              <p className="mt-3 text-ink/75 text-[15px] leading-relaxed flex-1">{c.body}</p>
              <div className="mt-5 pt-4 border-t border-line mono text-[11.5px] text-red-deep font-bold">
                → {c.meta}
              </div>
            </article>
          )}
        </div>
      </div>
    </section>);

};

/* ─────────────────────────────────────────────────────────────────────────
   MÉCANISME
   ───────────────────────────────────────────────────────────────────────── */
const Mechanism = () => {
  const steps = [
  {
    t: "Audit zone",
    d: "48 h",
    body: "On analyse votre zone : volumes de recherche, CPA cible, concurrence locale, faiblesses des annonces des grandes franchises. Vous recevez tout en vidéo Loom personnalisée 5-8 min.",
    icon: <Icon.search size={22} />
  },
  {
    t: "Setup système",
    d: "2-3 semaines",
    body: "Création des campagnes Google Ads ultra-ciblées, parcours de qualification personnalisé (intégré sur votre site ou en mini-site dédié), tracking appels + formulaires + parcours, intégration CRM. Tout sur votre compte - vous gardez la propriété.",
    icon: <Icon.zap size={22} />
  },
  {
    t: "Lancement & optimisation",
    d: "Jour 7 → 60",
    body: "Premières demandes sous 7-15 jours. Optimisation continue : mots-clés, enchères, créatifs, audiences. Reporting mensuel clair, sans jargon.",
    icon: <Icon.target size={22} />
  },
  {
    t: "Croissance",
    d: "Mois 3+",
    body: "Une fois le ROI prouvé sur 60 jours, on scale le budget. Le CPA reste stable, le volume monte. Vous arrêtez de dépendre du bouche-à-oreille.",
    icon: <Icon.chart size={22} />
  }];


  return (
    <section id="methode" className="bg-ink text-paper border-b border-ink">
      <div className="max-w-[1280px] mx-auto px-5 sm:px-8 py-20">
        <div className="grid lg:grid-cols-[1fr_auto] items-end gap-6">
          <div>
            <div className="flex items-center gap-3 mb-6">
              <span className="mono text-[11px] tracking-[0.18em] uppercase text-paper/60">02</span>
              <span className="h-px flex-1 bg-paper/20 max-w-[64px]"></span>
              <span className="mono text-[11px] tracking-[0.18em] uppercase text-paper/70">La méthode</span>
            </div>
            <h2 className="h2 text-[clamp(2rem,4.5vw,3.5rem)]">
              Notre système : <span className="text-red-brand">Ads + Qualification.</span>
            </h2>
            <p className="mt-5 text-paper/75 text-[16.5px] max-w-[700px] leading-relaxed">
              Les Google Ads seuls ne suffisent plus en 2026. Tryba et K par K les exploitent depuis 15 ans.
              Ce qui fait la différence aujourd'hui c'est ce qui se passe <b className="text-paper">APRÈS le clic</b> :
              un parcours de qualification qui engage le prospect <b className="text-paper">3 minutes</b> au lieu d'un formulaire qu'il abandonne en 30 secondes.
            </p>
            <p className="mt-4 text-paper/75 text-[16.5px] max-w-[700px] leading-relaxed">
              Le prospect investit 3-5 minutes à décrire son projet en détail.
              Vous récupérez un <b className="text-paper">lead ultra-qualifié</b> — pas un simple email balancé en 30 secondes.
              Votre commercial rappelle dans la journée avec un devis précis, pas une découverte commerciale floue.
            </p>
          </div>
          <div className="hidden lg:flex flex-col items-end gap-2 text-right">
            <span className="chip !bg-transparent !border-paper/30 !text-paper">EXCLUSIVITÉ GÉO</span>
            <span className="mono text-[11.5px] text-paper/60">Quand votre zone est prise,<br />elle est fermée à vos concurrents.</span>
          </div>
        </div>

        <ol className="grid md:grid-cols-2 lg:grid-cols-4 gap-5 mt-14">
          {steps.map((s, i) =>
          <li key={i} className="relative bg-paper/[0.04] border border-paper/15 rounded-2xl p-6">
              <div className="flex items-center justify-between">
                <span className="num display text-[44px] leading-none text-paper/30">0{i + 1}</span>
                <div className="w-10 h-10 rounded-lg bg-red-brand/15 text-red-brand grid place-items-center">{s.icon}</div>
              </div>
              <div className="mt-5">
                <div className="font-extrabold text-[19px] tracking-tight">{s.t}</div>
                <div className="mono text-[11px] tracking-[0.14em] uppercase text-paper/55 mt-1">{s.d}</div>
              </div>
              <p className="mt-4 text-[14.5px] text-paper/75 leading-relaxed">{s.body}</p>
            </li>
          )}
        </ol>
      </div>
    </section>);

};

/* ─────────────────────────────────────────────────────────────────────────
   PREUVES — case studies + comparison
   ───────────────────────────────────────────────────────────────────────── */
const CaseStudy = ({ tag, logo, name, sub, stats, quote, author, period }) =>
<article className="bg-white border border-line rounded-2xl p-6 sm:p-8">
    <div className="flex flex-col items-start gap-2 sm:flex-row sm:items-center sm:justify-between">
      <Pill tone="ok"><span className="dot"></span>CAMPAGNE ACTIVE</Pill>
      <span className="mono text-[11px] text-mute">{period}</span>
    </div>
    <div className="mt-5 flex items-center gap-4">
      {logo ?
    <div className="w-14 h-14 rounded-xl bg-white border border-line grid place-items-center overflow-hidden shrink-0">
          <img src={logo} alt={name} className="w-full h-full object-contain" />
        </div> :

    <div className="w-12 h-12 rounded-xl bg-ink text-paper grid place-items-center font-black text-[18px] shrink-0">
          {tag}
        </div>
    }
      <div>
        <div className="font-extrabold text-[20px] tracking-tight">{name}</div>
        <div className="text-mute text-[13.5px]">{sub}</div>
      </div>
    </div>

    <div className="grid grid-cols-2 gap-3 mt-6">
      {stats.map((s, i) =>
    <div key={i} className={`rounded-xl border p-4 ${s.hl ? "bg-ok/5 border-ok/30" : "bg-paper border-line"}`}>
          <div className="mono text-[10.5px] tracking-[0.14em] uppercase text-mute">{s.l}</div>
          <div className={`num display text-[34px] mt-1 ${s.hl ? "text-ok" : ""}`}>{s.v}</div>
          {s.s && <div className="mono text-[11px] text-mute mt-0.5">{s.s}</div>}
        </div>
    )}
    </div>

    <blockquote className="mt-7 border-l-2 border-red-brand pl-4 text-[15.5px] leading-relaxed text-ink/85">
      «&nbsp;{quote}&nbsp;»
      {author && <footer className="mt-2 mono text-[11.5px] tracking-[0.1em] text-mute uppercase">— {author}</footer>}
    </blockquote>
  </article>;


const ComparisonBar = ({ label, value, max, color, note }) => {
  const pct = Math.min(100, value / max * 100);
  return (
    <div>
      <div className="flex items-baseline justify-between mb-1.5">
        <div className="font-bold text-[14.5px]">{label}</div>
        <div className="num font-extrabold text-[16px]">{value}€ <span className="mono text-[11px] text-mute font-medium">/ lead</span></div>
      </div>
      <div className="h-9 bg-paper border border-line rounded-md overflow-hidden relative">
        <div className="h-full flex items-center justify-end pr-3 text-white text-[12px] font-bold"
        style={{ width: `${pct}%`, background: color }}>
          {note}
        </div>
      </div>
    </div>);

};

const Proofs = () =>
<section id="preuves" className="border-b border-line">
    <div className="max-w-[1280px] mx-auto px-5 sm:px-8 py-20">
      <SectionLabel n="03">Preuves</SectionLabel>
      <h2 className="h2 text-[clamp(2rem,4.5vw,3.5rem)] max-w-[900px]">
        Résultats réels sur nos clients actifs.
      </h2>
      <p className="mt-4 text-ink/70 text-[17px] max-w-[680px]">
        Pas de captures Photoshop ni de "résultats moyens". Deux comptes Google Ads en gestion directe,
        chiffres vérifiables sur demande.
      </p>

      <div className="grid lg:grid-cols-2 gap-6 mt-12">
        <CaseStudy
        tag="MCP"
        logo="assets/mcp-logo.png"
        name="MCP Menuiserie"
        sub="#1 Normandie · 30 salariés · 6 agences"
        period="Août 2025 → Mai 2026 · 10 mois"
        stats={[
        { l: "Demandes de devis", v: "227", hl: true },
        { l: "CPA moyen", v: "22,53€", hl: true, s: "vs 60-80€ Habitatpresto" },
        { l: "CTR", v: "8,38%", s: "benchmark 3,1%" },
        { l: "Taux conversion", v: "7,10%", s: "visiteur → devis" }]
        }
        quote="Données issues du compte Google Ads en gestion directe depuis août 2025. CPA actuel : 22 € par demande exclusive — contre 60-80 € historiquement constatés sur les plateformes type Habitatpresto."
        author="" />
      
        <CaseStudy
        tag="ISO"
        logo="assets/iso-store-logo.jpg"
        name="ISO Store"
        sub="Partenaire K-Line · 40 ans · Groupe JBZ"
        period="Mars 2025 → Mai 2026 · 15 mois"
        stats={[
        { l: "Conversions", v: "245", hl: true },
        { l: "CPA moyen", v: "26,18€", hl: true, s: "tous produits confondus" },
        { l: "Clics", v: "3 891", s: "sur 15 mois" },
        { l: "Magasins suivis", v: "7", s: "Île-de-France" }]
        }
        quote="Compte multi-magasins en gestion directe depuis mars 2025. 245 demandes de devis générées sur 15 mois avec une stratégie multi-canal (parcours de qualification + formulaire contact + click-to-call) attribuant les conversions par magasin pour pilotage local."
        author="" />
      
      </div>

      {/* Comparison */}
      <div className="mt-12 bg-white border border-line rounded-2xl p-6 sm:p-8">
        <div className="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-3 mb-6">
          <div>
            <div className="mono text-[11px] tracking-[0.18em] uppercase text-mute">Coût d'un lead menuiserie</div>
            <h3 className="font-extrabold text-[22px] tracking-tight mt-1">Plateformes de leads vs méthode Devis Exclusifs</h3>
          </div>
          <span className="mono text-[11.5px] text-mute">Données moyennes secteur 2024-2026</span>
        </div>
        <div className="space-y-4">
          <ComparisonBar label="Habitatpresto / Bobex (lead partagé ×4)" value={80} max={100} color="#E63946" note="80 €" />
          <ComparisonBar label="Travaux.com (lead partagé ×3)" value={60} max={100} color="#B92836" note="60 €" />
          <ComparisonBar label="Méthode Devis Exclusifs (exclusif)" value={22} max={100} color="#06A77D" note="22 €" />
        </div>
        <div className="mt-6 flex flex-wrap gap-3 text-[13px]">
          <Pill tone="ok"><Icon.check size={14} /> Lead 100% à vous</Pill>
          <Pill tone="ok"><Icon.pin size={14} /> Géolocalisé sur votre zone</Pill>
          <Pill tone="ok"><Icon.target size={14} /> Qualifié par formulaire métier</Pill>
        </div>
      </div>
    </div>
  </section>;


/* ─────────────────────────────────────────────────────────────────────────
   À PROPOS — Nathan
   ───────────────────────────────────────────────────────────────────────── */
const About = () =>
<section id="a-propos" className="border-b border-line bg-white">
    <div className="max-w-[1280px] mx-auto px-5 sm:px-8 py-20">
      <SectionLabel n="04">Qui pilote</SectionLabel>
      <h2 className="h2 text-[clamp(2rem,4.5vw,3.5rem)] max-w-[900px]">
        Qui gère <span className="text-red-brand">vos campagnes&nbsp;?</span>
      </h2>

      <div className="grid md:grid-cols-[280px_1fr] lg:grid-cols-[320px_1fr] gap-8 lg:gap-12 mt-12 items-start">
        <div className="mx-auto md:mx-0">
          <div className="relative w-[260px] h-[260px] lg:w-[300px] lg:h-[300px] rounded-full overflow-hidden border border-line bg-paper">
            <img src="assets/nathan.jpg" alt="Nathan Blondin, fondateur Devis Exclusifs" className="w-full h-full object-cover" />
          </div>
        </div>

        <div>
          <div className="mono text-[11px] tracking-[0.18em] uppercase text-mute">Fondateur · Devis Exclusifs</div>
          <div className="display text-[clamp(1.8rem,3.2vw,2.6rem)] mt-1 leading-tight">Nathan Blondin</div>

          <div className="mt-6 space-y-4 text-[16px] text-ink/85 leading-relaxed max-w-[680px]">
            <p>
              Je gère <b className="text-ink">5 millions d'euros de pub Google et Meta par an</b> pour une grosse boîte industrielle. C'est mon job principal.
            </p>
            <p>
              À côté, depuis 2 ans, je pilote les campagnes Google Ads de plusieurs menuisiers du Groupe JBZ :
              <b className="text-ink"> MCP Menuiserie</b> (#1 Normandie, 30 salariés, 6 agences),
              <b className="text-ink"> ISO Store</b> (7 magasins en Île-de-France, partenaire K-Line)
              et <b className="text-ink">Plaisance Fenêtres &amp; Stores</b> (Paris, depuis 1950).
            </p>
            <p>
              C'est en pilotant ces comptes que j'ai vu le truc :
              <b className="text-ink"> les installateurs indépendants comme vous se font massacrer par Habitatpresto et Tryba</b>,
              alors que vous avez tout pour gagner localement.
              Vous installez mieux. Vous connaissez votre zone. Vous avez la confiance bouche-à-oreille.
              Mais personne ne vous trouve sur Google.
            </p>
            <p>
              Devis Exclusifs, c'est la réponse. Avec <b className="text-ink">mon frère Liam</b> (qui s'occupe de la partie web),
              on prend <b className="text-ink">2 nouveaux menuisiers par trimestre</b>. Pas plus.
            </p>
            <p>
              <b className="text-ink">C'est moi qui vous prends en RDV. C'est moi qui pilote vos campagnes chaque semaine. C'est moi qui vous reporte chaque mois.</b>
            </p>
            <p className="text-ink/70 text-[14.5px] pt-1 border-t border-line">
              Pas de junior. Pas de sous-traitance. <b className="text-ink">Exclusivité géographique.</b>
            </p>
          </div>

          <div className="mt-7 flex flex-wrap gap-2.5">
            <Pill><Icon.check size={13} />5 M€/an de pub Google + Meta gérés</Pill>
            <Pill><Icon.check size={13} />2 ans d'expérience menuiserie B2C</Pill>
            <Pill><Icon.check size={13} />850+ demandes générées en menuiserie</Pill>
          </div>

          {/* ----- Bande logos clients menuiserie ----- */}
          <div className="mt-10 pt-7 border-t border-line">
            <div className="mono text-[10.5px] tracking-[0.2em] uppercase text-mute mb-5">
              Marques en gestion directe
            </div>
            <div className="flex flex-wrap items-center gap-x-8 gap-y-5 grayscale opacity-70">
              <img src="assets/mcp-logo.png" alt="MCP Menuiserie" className="h-9 w-auto" />
              <img src="assets/iso-store-logo.jpg" alt="ISO Store" className="h-9 w-auto rounded-sm" />
              <img src="assets/plaisance-logo.png" alt="Plaisance Fenêtres &amp; Stores" className="h-12 w-auto" />
            </div>
            <p className="mt-5 text-[12.5px] italic text-mute">
              Comptes Google Ads pilotés en direct depuis 2024-2025.
            </p>
          </div>
        </div>
      </div>
    </div>
  </section>;


/* ─────────────────────────────────────────────────────────────────────────
   POUR QUI / PAS POUR QUI
   ───────────────────────────────────────────────────────────────────────── */
const ForWho = () => {
  const yes = [
  "Vous êtes installateur de fenêtres / portes / volets / portails / pergolas",
  "Vous avez entre 5 et 40 salariés",
  "Vous faites au moins 500 k€ de CA",
  "Vous êtes prêt à investir 4 500 € + 1 800 €/mois sur 6 mois minimum",
  "Vous voulez arrêter de dépendre des plateformes type Habitatpresto",
  "Vous travaillez majoritairement avec des particuliers (B2C)",
  "Vous êtes hors Paris et grande couronne",
  "Vous êtes prêt à laisser un parcours de qualification détecter les bons prospects 24/7",
  "Vous avez un site web existant ou êtes prêt à un mini-site one-page dédié"];

  const no = [
  "Vous êtes agenceur d'intérieur / cuisiniste / carreleur",
  "Vous avez moins de 3 salariés ou plus de 50",
  "Vous travaillez exclusivement sur marchés publics",
  "Vous cherchez des résultats instantanés en moins de 30 jours",
  "Vous voulez la solution la moins chère du marché",
  "Vous êtes basé à Paris intramuros",
  "Vous êtes en franchise nationale avec marketing imposé",
  "Vous voulez gérer 100% de votre acquisition vous-même en interne (l'intérêt d'une agence externe est nul pour vous)"];

  return (
    <section className="border-b border-line">
      <div className="max-w-[1280px] mx-auto px-5 sm:px-8 py-20">
        <SectionLabel n="05">Pour qui</SectionLabel>
        <h2 className="h2 text-[clamp(2rem,4.5vw,3.5rem)] max-w-[900px]">
          Cette méthode est faite <span className="text-red-brand">pour vous si…</span>
        </h2>
        <p className="mt-4 text-ink/70 text-[17px] max-w-[700px]">
          On préfère vous dire non maintenant que vous décevoir dans 3 mois. Lisez les deux colonnes.
        </p>

        <div className="grid md:grid-cols-2 gap-5 mt-12">
          <div className="bg-white border-2 border-ok/40 rounded-2xl p-6 sm:p-8">
            <div className="flex items-center gap-3 mb-5">
              <div className="w-10 h-10 rounded-lg bg-ok/15 text-ok grid place-items-center"><Icon.check size={20} /></div>
              <div>
                <div className="mono text-[10.5px] tracking-[0.16em] uppercase text-ok">Vert · feu vert</div>
                <div className="font-extrabold text-[18px]">C'est pour vous</div>
              </div>
            </div>
            <ul className="space-y-3">
              {yes.map((y, i) =>
              <li key={i} className="flex gap-3 text-[15px] leading-snug">
                  <Icon.check size={18} className="text-ok shrink-0 mt-0.5" />
                  <span>{y}</span>
                </li>
              )}
            </ul>
          </div>

          <div className="bg-white border-2 border-red-brand/30 rounded-2xl p-6 sm:p-8">
            <div className="flex items-center gap-3 mb-5">
              <div className="w-10 h-10 rounded-lg bg-red-brand/15 text-red-deep grid place-items-center"><Icon.x size={20} /></div>
              <div>
                <div className="mono text-[10.5px] tracking-[0.16em] uppercase text-red-deep">Rouge · stop</div>
                <div className="font-extrabold text-[18px]">Ce n'est pas pour vous</div>
              </div>
            </div>
            <ul className="space-y-3">
              {no.map((n, i) =>
              <li key={i} className="flex gap-3 text-[15px] leading-snug text-ink/80">
                  <Icon.x size={18} className="text-red-deep shrink-0 mt-0.5" />
                  <span>{n}</span>
                </li>
              )}
            </ul>
          </div>
        </div>
      </div>
    </section>);

};

/* ─────────────────────────────────────────────────────────────────────────
   TARIFS — Hormozi 2-hero + accordions
   ───────────────────────────────────────────────────────────────────────── */

const StackRow = ({ label, sub, value, bonus, last }) =>
<li className={`flex items-start gap-3 py-3 ${last ? "" : "border-b border-line/70"}`}>
    <span className={`shrink-0 w-6 h-6 rounded-full grid place-items-center mt-0.5 ${bonus ? "bg-[#FFD60A] text-ink" : "bg-ok/15 text-ok"}`}>
      {bonus ? <Icon.sparkles size={13} s={2.2} /> : <Icon.check size={14} s={2.6} />}
    </span>
    <div className="flex-1 min-w-0">
      <div className="font-bold text-[15px] leading-snug">{label}</div>
      {sub && <div className="text-[12.5px] text-mute mt-0.5 leading-snug">{sub}</div>}
    </div>
    <div className="mono text-[13px] font-extrabold text-ink shrink-0 num tabular-nums">{value}</div>
  </li>;


const Accordion = ({ id, kicker, title, hint, children, defaultOpen }) =>
<details className="group bg-white border border-line rounded-2xl overflow-hidden transition" {...defaultOpen ? { open: true } : {}}>
    <summary className="flex items-center gap-4 px-5 sm:px-7 py-5 cursor-pointer hover:bg-paper/60 transition">
      <span className="shrink-0 mono text-[10.5px] tracking-[0.18em] uppercase text-mute w-10">{kicker}</span>
      <div className="flex-1 min-w-0">
        <div className="font-extrabold text-[15.5px] sm:text-[17px] tracking-tight leading-tight">{title}</div>
        {hint && <div className="text-[12.5px] text-mute mt-0.5">{hint}</div>}
      </div>
      <span className="faq-plus shrink-0 w-9 h-9 rounded-full border border-line grid place-items-center text-ink bg-paper">
        <Icon.plus size={16} />
      </span>
    </summary>
    <div className="px-5 sm:px-7 pb-7 pt-2 border-t border-line/70">
      {children}
    </div>
  </details>;


const OptionCard = ({ rank, title, body, items, total, totalNote, recommended }) =>
<div className={`relative rounded-2xl p-6 sm:p-7 flex flex-col ${
recommended ?
"bg-ink text-paper border-2 border-ink ring-4 ring-red-brand/25 shadow-[0_30px_70px_-30px_rgba(11,11,12,0.55)] md:-translate-y-3" :
"bg-paper border border-line text-ink/70"}`
}>
    {recommended &&
  <span className="absolute -top-3 -right-3 bg-red-brand text-white mono text-[10.5px] font-extrabold tracking-[0.16em] uppercase px-3 py-1.5 rounded-full rotate-[3deg] shadow-lg">
        Recommandé
      </span>
  }
    <div className={`mono text-[10.5px] tracking-[0.16em] uppercase ${recommended ? "text-paper/55" : "text-mute"}`}>
      Option {rank}
    </div>
    <h3 className={`mt-1 font-extrabold tracking-tight ${recommended ? "text-[22px] text-paper" : "text-[17px] text-ink/75"}`}>
      {title}
    </h3>
    <p className={`mt-3 text-[14px] leading-relaxed ${recommended ? "text-paper/85" : "text-ink/60"}`}>
      {body}
    </p>
    <ul className={`mt-4 space-y-1.5 text-[13.5px] ${recommended ? "text-paper/85" : "text-ink/60"}`}>
      {items.map((x, i) =>
    <li key={i} className="flex gap-2"><span className={recommended ? "text-red-brand mt-1" : "text-ink/30 mt-1"}>•</span><span>{x}</span></li>
    )}
    </ul>
    <div className={`mt-auto pt-5 border-t ${recommended ? "border-paper/15" : "border-line"}`}>
      <div className={`mono text-[10.5px] tracking-[0.16em] uppercase ${recommended ? "text-ok" : "text-red-deep/70"}`}>
        {recommended ? "Gain net annuel" : "Coût net annuel"}
      </div>
      <div className={`num display text-[clamp(1.5rem,2.4vw,2rem)] leading-tight mt-1 ${
    recommended ? "text-ok" : "text-red-deep/85"}`
    }>
        {total}
      </div>
      {totalNote &&
    <div className={`mono text-[11.5px] mt-1 ${recommended ? "text-paper/65" : "text-mute"}`}>{totalNote}</div>
    }
    </div>
  </div>;


const Pricing = () =>
<section id="tarifs" className="border-b border-line bg-paper">
    {/* Section intro (compact — heros do the heavy lifting) */}
    <div className="max-w-[1180px] mx-auto px-5 sm:px-8 pt-20">
      <SectionLabel n="06">Tarifs</SectionLabel>
      <h2 className="h2 text-[clamp(2rem,5vw,3.8rem)] max-w-[900px]">
        Tarifs <span className="text-red-brand">transparents</span>. Valeur visible.
      </h2>
    </div>

    {/* ===================== HERO 1 — VALEUR (noir profond, plein écran) ===================== */}
    <div className="relative bg-[#0A0A0A] text-white mt-12 sm:mt-16">
      <div aria-hidden className="absolute inset-0 opacity-[0.06]" style={{ backgroundImage: "linear-gradient(to right, #fff 1px, transparent 1px), linear-gradient(to bottom, #fff 1px, transparent 1px)", backgroundSize: "64px 64px" }}></div>
      <div className="relative max-w-[1180px] mx-auto px-5 sm:px-8 py-24 sm:py-32 min-h-[500px] flex flex-col justify-center">
        <div className="text-center mb-12 sm:mb-16">
          <div className="mono text-[11px] tracking-[0.24em] uppercase text-white/50">LA VALEUR</div>
          <h3 className="display text-[clamp(1.6rem,3vw,2.2rem)] mt-3 text-white">Voici les maths, en 3 chiffres.

        </h3>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-y-14 md:gap-y-0 md:gap-x-4 md:divide-x divide-white/15">
          {/* Col 1 — Vous recevez */}
          <div className="text-center md:px-10">
            <div className="mono text-[11px] tracking-[0.22em] uppercase text-white/55 font-bold">Vous recevez</div>
            <div className="num display text-[clamp(3.6rem,6.8vw,6.8rem)] leading-[0.95] mt-4 text-white whitespace-nowrap">
              10 000<span className="text-white/55 text-[0.55em] font-extrabold align-top ml-1">€</span>
            </div>
            <div className="num font-extrabold text-[clamp(1rem,1.6vw,1.4rem)] mt-3 text-white/70">
              + 2 500 €<span className="text-white/45"> / mois</span>
            </div>
          </div>
          {/* Col 2 — Vous payez */}
          <div className="text-center md:px-10">
            <div className="mono text-[11px] tracking-[0.22em] uppercase text-white/55 font-bold">Vous payez</div>
            <div className="num display text-[clamp(3.6rem,6.8vw,6.8rem)] leading-[0.95] mt-4 text-white whitespace-nowrap">
              4 500<span className="text-white/55 text-[0.55em] font-extrabold align-top ml-1">€</span>
            </div>
            <div className="num font-extrabold text-[clamp(1rem,1.6vw,1.4rem)] mt-3 text-white/70">
              + 1 800 €<span className="text-white/45"> / mois</span>
            </div>
          </div>
          {/* Col 3 — Vous économisez */}
          <div className="text-center md:px-10">
            <div className="mono text-[11px] tracking-[0.22em] uppercase text-[#FFD60A] font-bold">Vous économisez</div>
            <div className="num display text-[clamp(3.6rem,6.8vw,6.8rem)] leading-[0.95] mt-4 text-[#FFD60A] whitespace-nowrap">
              <span className="text-[#FFD60A]/65 text-[0.55em] font-extrabold align-top mr-1">↓</span>5 500<span className="text-[#FFD60A]/65 text-[0.55em] font-extrabold align-top ml-1">€</span>
            </div>
            <div className="num font-extrabold text-[clamp(1rem,1.6vw,1.4rem)] mt-3 text-[#FFD60A]/85">
              + 700 €<span className="text-[#FFD60A]/60"> / mois économisés</span>
            </div>
          </div>
        </div>

        <a href="#tarif-detail" className="mt-14 sm:mt-16 mx-auto inline-flex items-center gap-2 italic text-[14px] text-white/60 hover:text-white transition">
          Détail complet de ce que vous recevez
          <span className="inline-block transition group-hover:translate-y-0.5">↓</span>
        </a>
      </div>
    </div>

    {/* ===================== HERO 2 — GARANTIE (vert vif, plein écran) ===================== */}
    <div className="relative bg-ok text-white overflow-hidden">
      <div aria-hidden className="absolute -right-20 -top-20 w-[420px] h-[420px] rounded-full bg-white/10"></div>
      <div aria-hidden className="absolute -left-32 -bottom-20 w-[380px] h-[380px] rounded-full bg-white/8"></div>
      <div aria-hidden className="absolute right-1/3 top-1/4 w-32 h-32 rounded-full bg-black/5"></div>

      <div className="relative max-w-[1180px] mx-auto px-5 sm:px-8 py-24 sm:py-32 min-h-[550px] flex flex-col items-center justify-center text-center">
        <div className="w-20 h-20 sm:w-24 sm:h-24 rounded-2xl bg-white/15 grid place-items-center">
          <Icon.shield size={56} s={1.7} />
        </div>
        <div className="mono text-[11px] tracking-[0.24em] uppercase text-white/75 mt-6">
          Garantie Zero Risk · 60 jours
        </div>

        <h3 className="display mt-5 text-white text-[clamp(1.9rem,4.2vw,3.4rem)] leading-[1.02] max-w-[1000px]">
          Si je ne génère pas <span className="text-[#FFD60A]">15 demandes qualifi<span style={{ color: "rgb(255, 214, 10)" }}>é</span>es en 60 jours</span>,<br className="hidden sm:block" />
          je <u className="decoration-2 underline-offset-[6px]">rembourse intégralement</u> les 4 500 € de setup.
        </h3>

        <p className="italic text-white/85 text-[clamp(1rem,1.6vw,1.2rem)] mt-7 max-w-[640px] leading-snug">
          C'est un risque que je prends, pas vous. <b className="not-italic"></b>
        </p>

        <a href="#tarif-detail" className="mt-12 inline-flex items-center gap-2 italic text-[14px] text-white/80 hover:text-white transition">
          Comment ça marche concrètement
          <span>↓</span>
        </a>
      </div>
    </div>

    {/* ===================== NIVEAU 2 — TRANSITION ===================== */}
    <div id="tarif-detail" className="max-w-[1180px] mx-auto px-5 sm:px-8 pt-20 sm:pt-24 text-center">
      <h3 className="font-black tracking-tight text-[clamp(1.5rem,2.8vw,2rem)] text-ink">
        Tout le détail si vous voulez creuser.
      </h3>
      <p className="mt-2 text-mute text-[14.5px] max-w-[560px] mx-auto">
        Cliquez sur ce qui vous intéresse — pas obligé de tout lire.
      </p>
    </div>

    {/* ===================== NIVEAU 3 — ACCORDÉONS ===================== */}
    <div className="max-w-[900px] mx-auto px-5 sm:px-8 mt-10 space-y-4">
      {/* Accordéon 1 — Détail valeur */}
      <Accordion
      kicker="01"
      title="Le détail de ce que vous recevez"
      hint="10 000 € + 2 500 €/mois de valeur — ligne par ligne">
      
        <div className="grid md:grid-cols-2 gap-x-10 gap-y-8 mt-3">
          <div>
            <div className="flex items-baseline justify-between border-b-2 border-ink pb-2">
              <div className="mono text-[11px] tracking-[0.18em] uppercase text-ink/80 font-bold">Setup · one-shot</div>
              <Icon.zap size={16} />
            </div>
            <ul className="mt-1">
              <StackRow label="Audit complet de votre zone" value="1 200 €" />
              <StackRow label="Stratégie Google Ads + setup campagnes" value="2 500 €" />
              <StackRow label="Parcours de qualification personnalisé" value="1 200 €" />
              <StackRow label="Tracking GA4 / GTM complet" value="1 800 €" />
              <StackRow last label="Formation prise en main (2 h visio)" value="600 €" />
            </ul>
            <div className="mt-3 flex items-center justify-between bg-paper border border-line rounded-lg px-4 py-2.5">
              <span className="mono text-[11px] tracking-[0.16em] uppercase text-mute">Sous-total setup</span>
              <span className="num font-extrabold text-[15px]">7 300 €</span>
            </div>
          </div>

          <div>
            <div className="flex items-baseline justify-between border-b-2 border-ink pb-2">
              <div className="mono text-[11px] tracking-[0.18em] uppercase text-ink/80 font-bold">Mensuel · récurrent</div>
              <Icon.target size={16} />
            </div>
            <ul className="mt-1">
              <StackRow label="Pilotage hebdomadaire campagnes" value="1 800 €/mois" />
              <StackRow label="Reporting mensuel personnalisé" value="400 €/mois" />
              <StackRow last label="Support prioritaire email + tél" value="300 €/mois" />
            </ul>
            <div className="mt-3 flex items-center justify-between bg-paper border border-line rounded-lg px-4 py-2.5">
              <span className="mono text-[11px] tracking-[0.16em] uppercase text-mute">Sous-total mensuel</span>
              <span className="num font-extrabold text-[15px]">2 500 €/mois</span>
            </div>
          </div>
        </div>

        <div className="mt-7 rounded-2xl border-2 border-dashed border-[#FFD60A] bg-[#FFD60A]/10 p-5 sm:p-6">
          <div className="flex items-center gap-2 mono text-[11px] tracking-[0.18em] uppercase text-ink font-bold">
            <Icon.sparkles size={14} /> Bonus offerts (inclus)
          </div>
          <ul className="mt-2">
            <StackRow bonus label="Bonus 1 — Diagnostic Concurrence Locale" sub="analyse complète des 5 concurrents Ads les plus actifs sur votre zone : annonces, mots-clés, LPs, faiblesses" value="1 500 €" />
            <StackRow bonus label="Bonus 2 — Setup CRM HubSpot Free" sub="HubSpot pré-configuré pour menuiserie : pipeline, séquences, tags. Prêt à l'emploi." value="1 200 €" />
            <StackRow bonus last label="Garantie 60 jours résultat" sub="vous ne pouvez pas perdre d'argent" value="∞ priceless" />
          </ul>
        </div>

        <div className="mt-7 rounded-xl bg-ink text-paper p-5 sm:p-6">
          <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 text-center sm:text-left">
            <div>
              <div className="mono text-[10.5px] tracking-[0.16em] uppercase text-paper/55">Valeur livrée</div>
              <div className="num font-black text-[18px] mt-1">10 000 € <span className="text-paper/75 font-bold text-[13px]">+ 2 500 €/mois</span></div>
            </div>
            <div>
              <div className="mono text-[10.5px] tracking-[0.16em] uppercase text-paper/55">Votre invest.</div>
              <div className="num font-black text-[18px] mt-1">4 500 € <span className="text-paper/75 font-bold text-[13px]">+ 1 800 €/mois</span></div>
            </div>
            <div>
              <div className="mono text-[10.5px] tracking-[0.16em] uppercase text-[#FFD60A]">Vous économisez</div>
              <div className="num font-black text-[18px] mt-1 text-[#FFD60A]">5 500 € <span className="font-bold text-[13px]">+ 700 €/mois</span></div>
            </div>
          </div>
        </div>
      </Accordion>

      {/* Accordéon 2 — Détail offre */}
      <Accordion
      kicker="02"
      title="Le détail de l'offre et les conditions"
      hint="Une seule offre. Une seule promesse. Un seul prix.">
      
        <div className="grid md:grid-cols-2 gap-x-10 gap-y-0 mt-3">
          {[
        [["Setup initial (one-shot)", "4 500 € HT"],
        ["Pilotage mensuel", "1 800 € HT / mois"],
        ["Engagement", "6 mois minimum"]],
        [["Budget Google Ads", "à votre charge · 1 500-3 000 €/mois"],
        ["Garantie résultat", "60 jours"],
        ["Exclusivité", "1 menuisier par zone"]]].
        map((col, ci) =>
        <dl key={ci} className="divide-y divide-line/70">
              {col.map(([k, v]) =>
          <div key={k} className="flex items-baseline justify-between py-4 gap-4">
                  <dt className="text-[14.5px] text-ink/70">{k}</dt>
                  <dd className="font-extrabold text-[14.5px] num text-right">{v}</dd>
                </div>
          )}
            </dl>
        )}
        </div>
        <p className="mt-5 text-[13.5px] italic text-mute leading-relaxed">
          Le budget Google Ads reste sur votre propre compte Google. Vous gardez la propriété complète des campagnes, des données et du parcours de qualification.
        </p>
      </Accordion>

      {/* Accordéon 3 — Garantie détail */}
      <Accordion
      kicker="03"
      title="Comment la garantie « Zero Risk » fonctionne en détail"
      hint="J+60 · J+90 · vous ne pouvez pas perdre">
      
        <p className="text-[15px] leading-relaxed text-ink/85">
          Si à <b>J+60</b> vous n'avez pas reçu au moins <b>15 demandes de devis exclusives qualifiées</b> :
        </p>
        <ul className="mt-4 space-y-3 text-[14.5px]">
          {[
        <>Je continue à piloter votre compte <b>sans facturer un seul euro</b> de pilotage.</>,
        <>Jusqu'à ce que vous atteigniez les <b>15 demandes minimum</b>.</>,
        <>Et si à <b>J+90</b> nous n'y sommes toujours pas, je <b>rembourse intégralement</b> le setup de 4 500 €.</>].
        map((node, i) =>
        <li key={i} className="flex gap-3">
              <span className="shrink-0 w-6 h-6 rounded-full bg-ok/15 text-ok grid place-items-center mt-0.5">
                <Icon.check size={14} s={2.6} />
              </span>
              <span className="leading-relaxed">{node}</span>
            </li>
        )}
        </ul>
        <p className="mt-5 text-[15px] leading-relaxed text-ink/85">
          Vous ne pouvez littéralement pas perdre d'argent sur cette offre. <b>C'est un risque que JE prends, pas vous.</b>
        </p>
        <div className="mt-5 pt-5 border-t border-line">
          <div className="mono text-[10.5px] tracking-[0.16em] uppercase text-mute mb-2">Pourquoi je peux prendre ce risque</div>
          <p className="text-[14.5px] text-ink/80 leading-relaxed">
            Sur MCP Menuiserie, en 60 jours, j'avais déjà généré <b>56 demandes exclusives</b>. Sur mes autres comptes, même mécanique.
            Ce système fonctionne. Si je me plante chez vous, c'est mon problème, pas le vôtre.
          </p>
        </div>
      </Accordion>

      {/* Accordéon 4 — Comparatif 3 options */}
      <Accordion
      kicker="04"
      title="Comparez les 3 options réelles sur votre table"
      hint="Ne rien faire · Embaucher · Devis Exclusifs">
      
        <p className="text-[13.5px] text-mute italic">
          Tous les chiffres sont basés sur des moyennes secteur ou nos données clients vérifiables.
        </p>
        <div className="grid md:grid-cols-3 gap-4 mt-6 items-stretch">
          <div><OptionCard
            rank="1"
            title="Ne rien faire"
            body="Vous restez sur le bouche-à-oreille + leads Habitatpresto à 60-80 € partagés."
            items={[
            "20-30 leads payants : 18-29 k€",
            "Taux signature 10 %",
            "2-3 nouveaux clients / an",
            "CA généré : 8-24 k€"]
            }
            total="−10 à −20 k€"
            totalNote="vous perdez de l'argent" />
        </div>
          <div><OptionCard
            rank="2"
            title="Embaucher un commercial"
            body="Recruter en interne pour gérer l'acquisition."
            items={[
            "Salaire chargé : 35-45 k€/an",
            "Outils (Ads, CRM, formations) : 5-10 k€/an",
            "Formation 3-6 mois avant opérationnel",
            "Résultats incertains avant 12 mois"]
            }
            total="−40 k€ min."
            totalNote="risque RH élevé" />
        </div>
          <div><OptionCard
            rank="3"
            title="Devis Exclusifs"
            body="Le système complet, opérationnel sous 3 semaines."
            items={[
            "Setup 4 500 € + 21 600 € pilotage",
            "30 000 € budget Ads sur 12 mois",
            "Coût total : 56 100 € / an",
            "30-60 nouveaux clients / an (base MCP)",
            "CA généré : 120-480 k€"]
            }
            total="+60 à +420 k€"
            totalNote="ROI 2× à 8×"
            recommended />
        </div>
        </div>
        <p className="mt-10 text-center display text-[clamp(1.3rem,2.6vw,1.9rem)] tracking-tight max-w-[820px] mx-auto leading-tight">
          L'option la plus chère, c'est <span className="text-red-brand">NE PAS</span> prendre Devis Exclusifs.
        </p>
      </Accordion>
    </div>

    {/* ===================== NIVEAU 4 — CTA FINAL ===================== */}
    <div className="max-w-[1180px] mx-auto px-5 sm:px-8 mt-16 sm:mt-20 pb-24 text-center">
      <h3 className="font-black tracking-tight text-[clamp(1.6rem,3.2vw,2.4rem)]">
        Vérifier le potentiel de votre zone.
      </h3>
      <p className="mt-3 text-mute text-[14.5px] max-w-[560px] mx-auto">
        Audit gratuit envoyé en 48 h ouvrées · Aucune CB demandée · Vous décidez ensuite.
      </p>
      <a href="#audit" className="btn-primary mt-8 inline-flex items-center justify-center gap-2 bg-red-brand text-white font-extrabold text-[18px] px-9 py-5 rounded-full">
        <Icon.arrow size={20} s={2.3} /> Recevoir mon audit gratuit
      </a>
      <div className="mt-4 mono text-[11.5px] tracking-[0.12em] uppercase text-mute">
        1 place disponible ce trimestre — clôture le 30/06
      </div>
    </div>
  </section>;


/* ─────────────────────────────────────────────────────────────────────────
   FAQ
   ───────────────────────────────────────────────────────────────────────── */
const FAQ = () => {
  const items = [
  {
    q: "C'est quoi exactement le parcours de qualification ? Vos clients l'utilisent vraiment ?",
    a: "C'est un parcours en 5-7 étapes qui qualifie le projet du prospect (type de produit, surface, contraintes, urgence) et lui indique qu'il recevra son estimation personnalisée sous 24 h. Le prospect s'engage 3-5 minutes au lieu d'abandonner un formulaire classique en 30 secondes. Cette friction positive joue 2 rôles : (1) elle filtre les curieux non-sérieux qui partent dès l'étape 2 ; (2) elle vous donne beaucoup plus d'informations sur le projet AVANT votre 1er appel commercial. Résultat : vous récupérez un lead ultra-qualifié, votre commercial rappelle dans la journée avec un devis précis — pas une découverte commerciale floue."
  },
  {
    q: "J'ai déjà essayé Google Ads, ça n'a pas marché. Pourquoi ça serait différent ?",
    a: "Trois raisons classiques d'échec : mots-clés trop larges (CPC qui explose), pas de landing page dédiée (le visiteur arrive sur la home et part), pas de tracking conversions (impossible d'optimiser). Sur MCP avant ma reprise, le CPA était à 60-80 €. Aujourd'hui : 22 €. La différence c'est la structure, pas le canal."
  },
  {
    q: "C'est combien votre prestation au total ?",
    a: "Tout est transparent (vous l'avez vu dans la section Tarifs juste au-dessus) : setup système complet (one-shot) 4 500 € HT, pilotage mensuel 1 800 € HT/mois sur 6 mois minimum, budget Google Ads à votre charge sur votre compte (typiquement 1 500 à 3 000 €/mois pour démarrer). Total investi année 1 : ~56 100 €. En contrepartie, sur la base des résultats MCP + boost parcours de qualification : 30 à 60 nouveaux clients signés sur 12 mois. Si votre panier moyen est de 5 000 €, ça représente 150 000 à 300 000 € de CA généré. À vous de faire le calcul selon votre activité."
  },
  {
    q: "Pourquoi 1 menuisier par zone ?",
    a: "Parce que si je travaille avec 2 menuisiers sur Besançon, ils se cannibalisent mutuellement les mots-clés et le CPC double. Ça vous coûterait plus cher pour le même résultat. L'exclusivité géographique est dans votre intérêt, pas dans le mien."
  },
  {
    q: "Vous travaillez avec quelles marques (K-Line, etc.) ?",
    a: "Mes clients actifs sont Expert Rénovateur K-Line (MCP, ISO Store), partenaires Bubendorff, Somfy, Schüco. Si vous êtes en réseau franchise national, ça ne marchera pas — votre tête de réseau gère déjà votre marketing. Si vous êtes indépendant, c'est exactement pour vous."
  },
  {
    q: "Combien de temps avant les premiers résultats ?",
    a: "Premières demandes : 7-15 jours après lancement. Stabilisation du CPA : 4-6 semaines. ROI net positif : généralement à partir du mois 3. Si on n'y est pas en 60 jours, je travaille gratuitement jusqu'à atteinte."
  },
  {
    q: "Et si je veux arrêter au bout de 3 mois ?",
    a: "Vous ne pouvez pas — l'engagement est de 6 mois minimum. C'est pour vous protéger : un arrêt prématuré gâche tout l'investissement initial et donne des résultats biaisés. Si vous n'êtes pas prêt à 6 mois, ce n'est pas le bon moment."
  }];

  return (
    <section id="faq" className="border-b border-line">
      <div className="max-w-[1280px] mx-auto px-5 sm:px-8 py-20">
        <SectionLabel n="07">FAQ</SectionLabel>
        <div className="grid lg:grid-cols-[0.85fr_1.15fr] gap-10">
          <div>
            <h2 className="h2 text-[clamp(2rem,4.5vw,3.5rem)]">
              Vos questions,<br /><span className="text-red-brand">mes réponses</span>.
            </h2>
            <p className="mt-5 text-ink/70 text-[17px] max-w-[460px]">Sans langue de bois. Si une réponse manque, posez-la directement dans le formulaire en bas - j'y réponds par retour de mail.

            </p>
            <div className="mt-7 flex items-center gap-3 text-[14px]">
              <Icon.mail size={18} />
              <a href="mailto:nathan@devisexclusifs.fr" className="font-bold underline underline-offset-4">
                nathan@devisexclusifs.fr
              </a>
            </div>
          </div>

          <div className="divide-y divide-line border-y border-line">
            {items.map((it, i) =>
            <details key={i} className="group py-5" {...i === 0 ? { open: true } : {}}>
                <summary className="flex items-start justify-between gap-4">
                  <h3 className="font-extrabold text-[17.5px] tracking-tight leading-snug pr-4">{it.q}</h3>
                  <span className="faq-plus shrink-0 w-9 h-9 rounded-full border border-line grid place-items-center text-ink">
                    <Icon.plus size={16} />
                  </span>
                </summary>
                <p className="mt-3 text-ink/80 text-[15.5px] leading-relaxed max-w-[680px]">{it.a}</p>
              </details>
            )}
          </div>
        </div>
      </div>
    </section>);

};

/* ─────────────────────────────────────────────────────────────────────────
   FORM
   ───────────────────────────────────────────────────────────────────────── */
const Field = ({ label, name, type = "text", required, placeholder, value, onChange, as, options, rows }) => {
  const cls = "w-full bg-white border border-line rounded-lg px-3.5 py-3 text-[15px] font-medium placeholder:text-mute/70";
  const id = `f-${name}`;
  return (
    <label htmlFor={id} className="block">
      <div className="flex items-baseline justify-between mb-1.5">
        <span className="font-bold text-[13px]">{label}{required && <span className="text-red-brand ml-1">*</span>}</span>
      </div>
      {as === "textarea" ?
      <textarea id={id} name={name} rows={rows || 3} placeholder={placeholder} required={required}
      value={value} onChange={onChange} className={cls} /> :
      as === "select" ?
      <select id={id} name={name} required={required} value={value} onChange={onChange} className={cls}>
          <option value="">— Choisir —</option>
          {options.map((o) => <option key={o} value={o}>{o}</option>)}
        </select> :

      <input id={id} name={name} type={type} placeholder={placeholder} required={required}
      value={value} onChange={onChange} className={cls} />
      }
    </label>);

};

const FORMSPREE_ENDPOINT = "https://formspree.io/f/xlgvekwj";

const AuditForm = () => {
  const [form, setForm] = useState({
    firstname: "", lastname: "", company: "", city: "", email: "", phone: "", website: "", pain: "", effectif: ""
  });
  const [sent, setSent] = useState(false);
  const [sending, setSending] = useState(false);
  const [err, setErr] = useState("");
  const on = (e) => setForm((f) => ({ ...f, [e.target.name]: e.target.value }));
  const submit = async (e) => {
    e.preventDefault();
    if (sending) return;
    setSending(true);
    setErr("");
    try {
      const res = await fetch(FORMSPREE_ENDPOINT, {
        method: "POST",
        headers: { "Accept": "application/json", "Content-Type": "application/json" },
        body: JSON.stringify({
          firstname: form.firstname,
          lastname: form.lastname,
          company: form.company,
          email: form.email,
          phone: form.phone,
          pain: form.pain,
          "Ville d'intervention": form.city,
          "Site web actuel": form.website,
          "Effectif": form.effectif,
          _subject: `Demande d'audit — ${form.company || form.firstname + ' ' + form.lastname}`
        })
      });
      if (res.ok) {
        setSent(true);
      } else {
        const data = await res.json().catch(() => ({}));
        const fieldErrs = (data && data.errors && data.errors.map((x) => x.message).join(" ")) || "";
        setErr(fieldErrs || "L'envoi a échoué. Réessayez dans un instant ou écrivez-moi à nathan@devisexclusifs.fr.");
        setSending(false);
      }
    } catch (e2) {
      setErr("Connexion impossible. Vérifiez votre réseau et réessayez, ou écrivez-moi à nathan@devisexclusifs.fr.");
      setSending(false);
    }
  };

  if (sent) {
    return (
      <div className="bg-white border border-ok/40 rounded-2xl p-8 text-center">
        <div className="w-14 h-14 mx-auto rounded-full bg-ok/15 text-ok grid place-items-center">
          <Icon.check size={26} s={2.4} />
        </div>
        <h3 className="display text-[32px] mt-4">Merci !</h3>
        <p className="mt-3 text-ink/75 text-[15.5px] max-w-[460px] mx-auto">
          Nathan vous recontacte <b>sous 24 h</b> avec votre <b>estimation personnalisée</b>{form.email ? <> à <b>{form.email}</b></> : null}.
          En attendant, mettez son numéro dans vos contacts :
          <b className="block mono mt-2">+33 6 10 11 38 19</b>
        </p>
      </div>);

  }

  return (
    <form onSubmit={submit} action={FORMSPREE_ENDPOINT} method="POST" noValidate className="bg-white border border-line rounded-2xl p-6 sm:p-8">
      <div className="grid sm:grid-cols-2 gap-4">
        <Field label="Prénom" name="firstname" required value={form.firstname} onChange={on} />
        <Field label="Nom" name="lastname" required value={form.lastname} onChange={on} />
        <Field label="Entreprise" name="company" required value={form.company} onChange={on} placeholder="Ex : MCP Menuiserie" />
        <Field label="Ville d'intervention principale" name="city" required value={form.city} onChange={on} placeholder="Ex : Caen" />
        <Field label="Email pro" name="email" type="email" required value={form.email} onChange={on} />
        <Field label="Téléphone" name="phone" type="tel" required value={form.phone} onChange={on} placeholder="06 ..." />
        <Field label="Site web actuel" name="website" type="url" required value={form.website} onChange={on} placeholder="https://" />
        <Field label="Effectif" name="effectif" as="select" required value={form.effectif} onChange={on}
        options={["1-4 salariés", "5-9 salariés", "10-19 salariés", "20+ salariés"]} />
        <div className="sm:col-span-2">
          <Field label="Votre frein principal aujourd'hui ?" name="pain" as="textarea" required
          value={form.pain} onChange={on} rows={3}
          placeholder="Ex : 'leads Habitatpresto trop chers', 'budget Google Ads cramé', 'pas de site qui convertit'…" />
        </div>
      </div>

      {err && (
        <div role="alert" className="mt-5 rounded-lg border border-red-brand/30 bg-red-brand/5 text-red-deep text-[13.5px] px-4 py-3">
          {err}
        </div>
      )}

      <button type="submit" disabled={sending} className="btn-primary mt-6 w-full inline-flex items-center justify-center gap-2 bg-red-brand text-white font-extrabold text-[16px] px-6 py-4 rounded-full disabled:opacity-60 disabled:cursor-not-allowed">
        {sending ? (
          <><span className="inline-block w-4 h-4 border-2 border-white/40 border-t-white rounded-full animate-spin"></span> Envoi en cours…</>
        ) : (
          <>Recevoir mon audit gratuit <Icon.arrow size={18} s={2.3} /></>
        )}
      </button>
      <div className="mt-3 text-center mono text-[11.5px] text-mute">
        Réponse sous 48 h ouvrées · Aucun engagement · Vos données restent confidentielles
      </div>
    </form>);

};

const FinalCTA = () =>
<section id="audit" className="bg-paper border-b border-line">
    <div className="max-w-[1280px] mx-auto px-5 sm:px-8 py-20">
      <div className="grid lg:grid-cols-[0.9fr_1.1fr] gap-10 lg:gap-14">
        <div>
          <SectionLabel n="08">Audit gratuit</SectionLabel>
          <h2 className="h2 text-[clamp(2rem,5vw,4rem)]">
            Recevez votre audit <span className="text-red-brand">personnalisé</span>.
          </h2>
          <p className="mt-5 text-ink/80 text-[17px] max-w-[520px] leading-relaxed">
            En 48 h, je vous envoie :
          </p>
          <ul className="mt-5 space-y-3 text-[15.5px]">
            {[
          "Une vidéo Loom personnalisée 5-8 min sur votre zone",
          "Volumes de recherche réels + CPA estimé",
          "Une démo LIVE du parcours de qualification - testez-le comme un prospect",
          "Un plan d'action concret en 1 page"].
          map((x, i) =>
          <li key={i} className="flex gap-3"><Icon.check size={18} className="text-ok shrink-0 mt-0.5" /><span>{x}</span></li>
          )}
          </ul>

          <div className="mt-8 inline-flex items-center gap-3 bg-ink text-paper rounded-full pl-2 pr-4 py-2">
            <span className="bg-red-brand text-white font-extrabold text-[12px] px-2.5 py-1 rounded-full mono">290 €</span>
            <span className="font-bold text-[14px]">Offert pour 5 entreprises menuiserie / mois</span>
          </div>
        </div>

        <div className="lg:pt-2">
          <AuditForm />
        </div>
      </div>
    </div>
  </section>;


/* ─────────────────────────────────────────────────────────────────────────
   Footer + sticky guarantee bar
   ───────────────────────────────────────────────────────────────────────── */
const Footer = () =>
<footer className="bg-ink text-paper">
    <div className="max-w-[1280px] mx-auto px-5 sm:px-8 py-14">
      <div className="grid md:grid-cols-[1.2fr_1fr_1fr] gap-10">
        <div>
          <img src="assets/logo-devis-exclusifs-light.png" alt="Devis Exclusifs" className="h-12 sm:h-14 w-auto block" />
          <p className="mt-5 text-paper/70 text-[14.5px] max-w-[380px] leading-relaxed">
            Acquisition Google Ads pour installateurs de fermetures indépendants en France. 1 menuisier par zone.
            Devis exclusifs à 22 €. Garantie 60 jours.
          </p>
        </div>

        <div>
          <div className="mono text-[10.5px] tracking-[0.18em] uppercase text-paper/55">Contact</div>
          <div className="mt-4 space-y-3 text-[14.5px]">
            <div className="font-extrabold">Nathan Blondin, fondateur</div>
            <a href="mailto:nathan@devisexclusifs.fr" className="flex items-center gap-2 hover:text-red-brand">
              <Icon.mail size={16} /> nathan@devisexclusifs.fr
            </a>
            <a href="tel:+33610113819" className="flex items-center gap-2 hover:text-red-brand">
              <Icon.phone size={16} /> +33 6 10 11 38 19
            </a>
          </div>
        </div>

        <div>
          <div className="mono text-[10.5px] tracking-[0.18em] uppercase text-paper/55">Légal</div>
          <ul className="mt-4 space-y-2 text-[14px]">
            <li><a href="#" className="hover:text-red-brand">Mentions légales</a></li>
            <li><a href="#" className="hover:text-red-brand">Politique de confidentialité</a></li>
            <li><a href="#" className="hover:text-red-brand">CGV</a></li>
          </ul>
        </div>
      </div>

      <div className="mt-12 pt-6 border-t border-paper/15 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 text-[12.5px] text-paper/55">
        <div>© 2026 Devis Exclusifs — Tous droits réservés.</div>
        <div className="mono">SIRET · code NAF 7311Z — fait à Caen 🇫🇷</div>
      </div>
    </div>
  </footer>;


const GuaranteeBar = () => {
  const [hidden, setHidden] = useState(false);
  useEffect(() => {
    const onScroll = () => setHidden(window.scrollY < 300);
    onScroll();window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  if (hidden) return null;
  return (
    <div className="fixed bottom-3 left-1/2 -translate-x-1/2 z-50 max-w-[min(94vw,720px)] w-full px-2">
      <div className="flex items-center gap-2 sm:gap-3 bg-ink text-paper rounded-full pl-3 sm:pl-4 pr-1.5 sm:pr-2 py-1.5 sm:py-2 shadow-[0_20px_50px_-15px_rgba(0,0,0,0.5)]">
        <Icon.shield size={16} className="text-ok shrink-0" />
        <div className="text-[12.5px] sm:text-[13px] font-semibold leading-tight flex-1 min-w-0 truncate">
          <span className="font-extrabold">Garantie 60 jours</span>
          <span className="hidden sm:inline text-paper/70"> · sinon prestation gratuite jusqu'à atteinte</span>
        </div>
        <a href="#audit" className="bg-red-brand hover:bg-red-deep text-white font-extrabold text-[12px] sm:text-[12.5px] px-3.5 sm:px-4 py-2 rounded-full shrink-0 min-h-[44px] inline-flex items-center">
          Audit gratuit
        </a>
      </div>
    </div>);

};

/* ─────────────────────────────────────────────────────────────────────────
   App
   ───────────────────────────────────────────────────────────────────────── */
const App = () =>
<div className="min-h-screen">
    <TopBar />
    <Nav />
    <main>
      <Hero />
      <Villain />
      <Mechanism />
      <Proofs />
      <About />
      <ForWho />
      <Pricing />
      <FAQ />
      <FinalCTA />
    </main>
    <Footer />
    <GuaranteeBar />
  </div>;


ReactDOM.createRoot(document.getElementById("app")).render(<App />);