/* Page /moteur-prospection : la landing du Pack (prospection clé en main).
 * Maquette validée par Julia le 13/10/2026 (handoff « Le Pack, nouveau menu,
 * nouvelle home »). Textes et chiffres : voir HANDOFF § 8, ne pas les modifier
 * sans Julia. Toute donnée inventée dans une animation porte le badge
 * « Données fictives » ou « Exemple fictif ».
 *
 * Animations : une seule horloge pour toute la page (useMotionClock, shared.jsx).
 * Chaque animation boucle sur sa propre période ; les onglets de « Ce que fait
 * l'app » défilent seuls jusqu'au premier clic, puis l'onglet choisi tourne en
 * boucle. En mouvement réduit (et pour le pré-rendu), tout est figé sur
 * l'image finale. */

const { useState, useEffect } = React;
const {
  ArrowUpRight, Check, FooterMin, SiteNav, APP_URL,
  useMotionClock, motion, MOTION_STILL, isDarkTheme, EspaceMotion, PackPricing,
} = window.BMShared;

const { loop, fade, count, type, grow } = motion;

/* Période de chaque onglet, en secondes (ordre des onglets). */
const TAB_PERIODS = [10, 10, 11, 13, 10, 11];
const TABS = ['Ton marché', 'Le bon moment', 'Le tri', 'Tes mots', 'Ton compte', 'Tout inclus'];

const TOC = [
  { href: '#espace', n: '/ 01', title: 'Ton espace' },
  { href: '#essai', n: '/ 02', title: '10 messages offerts' },
  { href: '#app', n: '/ 03', title: "Ce que fait l'app" },
  { href: '#comparatif', n: '/ Chiffres', title: 'Pourquoi le Pack' },
  { href: '#prix', n: '/ Prix', title: 'Ciblage, Pack, Boost' },
  { href: '#resultats', n: '/ Live', title: 'Notre propre campagne' },
  { href: '#faq', n: '/ FAQ', title: 'Questions fréquentes' },
];

/* Même liste que le FAQPage de moteur-prospection.html : Google demande que
 * le balisage corresponde au texte affiché. Modifier les deux ensemble. */
const FAQ = [
  { q: "Qu'est-ce qui est offert ?", a: 'Tes 10 premiers messages, écrits avec toi sur ton propre marché. Tu vois aussi ton marché chiffré et ton ordre de priorité. Tu paies seulement si tu valides.', cta: true },
  { q: 'Combien de temps ça me prend ?', a: '10 minutes pour décrire ton offre. Puis le temps de relire tes 10 premiers messages. Une fois lancé, ton seul travail, c\'est de répondre.' },
  { q: 'Et si je ne valide pas ?', a: "Tu t'arrêtes là. Rien n'est débité avant ta validation." },
  { q: 'Est-ce que ça va sonner robotique ?', a: 'Non. Tes 10 premiers messages sont écrits avec toi, sur ta façon de parler. Tu les relis et tu corriges avant que quoi que ce soit parte.' },
  { q: 'Mon LinkedIn risque-t-il quelque chose ?', a: 'On reste sur des volumes prudents : 50 personnes par semaine, contactées progressivement depuis ton compte.' },
  { q: 'Quelle différence entre Ciblage, le Pack et le Boost ?', a: 'Avec Ciblage, tu reçois chaque semaine 50 personnes stratégiques et la raison de les appeler, et tu écris toi-même. Avec le Pack, on écrit aussi les messages avec tes mots et ils partent depuis ton email et ton LinkedIn. Le Boost lève la limite de contacts et ajoute l\'automatisation des réponses et du suivi CRM, avec une gestion chaque mois.' },
  { q: 'Je dois payer des outils en plus ?', a: 'Non. La recherche des contacts, les outils d\'envoi et l\'IA sont inclus dans le prix.' },
  { q: 'Comment j\'arrête ?', a: 'Depuis ton espace, en un clic. Sans engagement, sans justification.' },
];

/* --- Petits blocs réutilisés ---------------------------------------------- */

const Eyebrow = ({ children, style }) => (
  <div className="expertise-eyebrow eyebrow" style={style}><span className="pulse" />{children}</div>
);

const Checklist = ({ items }) => (
  <ul className="tarifs-roi-list">
    {items.map((it, i) => <li key={i}><Check /><span>{it}</span></li>)}
  </ul>
);

const Dash = ({ title, live = 'Démo', children }) => (
  <div className="cc-dash">
    <div className="cc-dash-bar">
      <div className="cc-dash-dots"><span /><span /><span /></div>
      <span className="cc-dash-title">{title}</span>
      <span className="cc-dash-live">{live}</span>
    </div>
    <div className="cc-dash-body">{children}</div>
  </div>
);

const Fict = ({ children = 'Exemple fictif' }) => <span className="lp-fict">{children}</span>;

const Toggle = ({ on, dark }) => (
  <span className="lp-toggle" aria-hidden="true" style={{ background: on ? 'var(--violet)' : (dark ? 'rgba(255,255,255,0.18)' : '#D8D8E0') }}>
    <span className="lp-knob" style={{ transform: `translateX(${on ? 20 : 0}px)` }} />
  </span>
);

const Person = ({ initials, name, role }) => (
  <div className="lp-person">
    <span className="lp-avatar">{initials}</span>
    <div><b>{name}</b><small>{role}</small></div>
  </div>
);

const InlineCta = ({ children }) => (
  <a href={APP_URL} className="lp-inline-cta">{children} <ArrowUpRight /></a>
);

/* Style d'un bouton sélectionné (onglets et sélecteur de taux). */
const pressedStyle = (on, dark) => (on
  ? { borderColor: 'var(--violet)', background: 'rgba(var(--violet-rgb),0.10)', color: dark ? 'var(--ink)' : 'var(--violet-deep)' }
  : undefined);

const stepStyle = (on) => ({
  borderColor: on ? 'var(--violet)' : 'var(--line-strong)',
  background: on ? 'rgba(var(--violet-rgb),0.06)' : 'transparent',
  transition: 'border-color .4s ease, background .4s ease',
});

/* --- 02 · Les 10 messages offerts : animation des 3 étapes (12 s) ---------- */

const EssaiMotion = ({ S, dark }) => {
  const m = loop(S, 12, 10);
  const clock = m < 0.4 || m >= 11.6 ? '0:00' : `0:${String(Math.min(10, Math.floor((m - 0.4) / 0.8))).padStart(2, '0')} min`;
  const typed = m >= 11.6 ? '' : type(m, 0.6, 3.0, 'Formation commerciale, pour les PME de 10 à 50 salariés');
  return (
    <Dash title="app.boommaker.io · ton démarrage" live={clock}>
      <div className="lp-motion lp-stack">
        <div className="lp-track"><div className="lp-fill" style={{ width: `${grow(m, 0.4, 8.4, 100)}%` }} /></div>
        <div className="lp-step" style={stepStyle(m >= 0.4 && m < 11.6)}>
          <div className="lp-step-head"><span><i>01</i>Tu décris ce que tu vends</span></div>
          <div className="lp-step-body">{typed}</div>
        </div>
        <div className="lp-step" style={stepStyle(m >= 3.8 && m < 11.6)}>
          <div className="lp-step-head"><span><i>02</i>Ton marché et tes messages</span></div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, ...fade(m, 4.0, 11.6, 8) }}>
            <span className="lp-chip">12 400 entreprises</span>
            <span className="lp-chip">1 860 en priorité</span>
            <span className="lp-chip">10 messages prêts</span>
          </div>
        </div>
        <div className="lp-step" style={stepStyle(m >= 7.2 && m < 11.6)}>
          <div className="lp-step-head">
            <span><i>03</i>Tu valides ? Tu lances.</span>
            <Toggle on={m >= 8.2 && m < 11.6} dark={dark} />
          </div>
        </div>
        <div className="lp-paid"><span>Débité jusqu'ici</span><b>0 €</b></div>
        <div className="lp-paid-note" style={fade(m, 8.6, 11.6, 8)}>Validé : ta prospection démarre. 390 € HT par mois, sans engagement.</div>
      </div>
    </Dash>
  );
};

/* --- 03 · Les 6 onglets : une animation par onglet ------------------------ */

const MarcheMotion = ({ m }) => {
  const res = fade(m, 3.8, 9.5, 10);
  const bars = [
    { b: 'En priorité', l: 'elles recrutent', v: '1 860', w: grow(m, 5.6, 6.6, 25.5) },
    { b: 'Ensuite', l: 'nouveau dirigeant', v: '3 240', w: grow(m, 5.9, 6.9, 44.4) },
    { b: 'Le reste', l: 'même métier, même taille', v: '7 300', w: grow(m, 6.2, 7.2, 100) },
  ];
  return (
    <Dash title="app.boommaker.io · ton marché">
      <div className="lp-motion lp-stack">
        <div className="lp-head" style={{ marginBottom: 0 }}><span className="lp-label">Ta cible</span><Fict /></div>
        <div className="lp-two">
          <div className="lp-field"><small>Ton offre</small><span>{m >= 9.5 ? '' : type(m, 0.4, 1.8, 'Formation commerciale')}</span></div>
          <div className="lp-field"><small>Pour qui</small><span>{m >= 9.5 ? '' : type(m, 2.0, 3.6, 'Dirigeants de PME, 10 à 50 salariés')}</span></div>
        </div>
        <div style={res}>
          <div className="lp-big">{count(m, 3.9, 5.6, 12400)}</div>
          <div className="lp-big-label">entreprises à viser</div>
        </div>
        <div className="lp-stack" style={res}>
          {bars.map((r) => (
            <div className="lp-bar-row" key={r.b}>
              <div>
                <div className="lp-bar-name"><b>{r.b}</b> · {r.l}</div>
                <div className="lp-track"><div className="lp-fill" style={{ width: `${r.w}%` }} /></div>
              </div>
              <span className="lp-bar-val">{r.v}</span>
            </div>
          ))}
        </div>
      </div>
    </Dash>
  );
};

const MomentMotion = ({ m }) => {
  const rows = [
    { i: 'CM', n: 'Claire Moreau', r: 'Dirigeante · Atelier Nova', s: 'Recrute 2 commerciaux' },
    { i: 'TL', n: 'Thomas Leroy', r: 'Directeur commercial · Velto', s: 'Nouveau poste depuis 2 mois' },
    { i: 'SB', n: 'Sarah Benali', r: 'Gérante · Studio Cèdre', s: '2e site ouvert à Lyon' },
  ];
  return (
    <Dash title="app.boommaker.io · contacts de la semaine">
      <div className="lp-motion lp-stack">
        <div className="lp-head" style={{ marginBottom: 0 }}><span className="lp-label">Pourquoi maintenant</span><Fict /></div>
        {rows.map((r, k) => (
          <div className="lp-row" key={r.n} style={fade(m, 0.4 + 0.6 * k, 9.5, 12)}>
            <Person initials={r.i} name={r.n} role={r.r} />
            <span className="lp-chip" style={fade(m, 2.6 + 0.8 * k, 9.5, 0)}>{r.s}</span>
          </div>
        ))}
      </div>
    </Dash>
  );
};

const TRI = [
  { name: 'Claire Moreau', co: 'Atelier Nova', flag: '', kind: '' },
  { name: 'Thomas Leroy', co: 'Velto', flag: '', kind: '' },
  { name: 'Thomas Leroy', co: 'Velto', flag: 'DOUBLON', kind: 'y' },
  { name: 'Marc Dubois', co: 'Optima Conseil', flag: 'DÉJÀ CLIENT', kind: 'p' },
  { name: 'Sarah Benali', co: 'Studio Cèdre', flag: '', kind: '' },
  { name: 'Inès Garnier', co: 'Rival Formation', flag: 'CONCURRENT', kind: 'p' },
  { name: 'Paul Martin', co: 'Boulangerie Martin', flag: 'HORS CIBLE', kind: 'o' },
];

const TriMotion = ({ m, dark }) => {
  const bgs = dark
    ? { y: 'rgba(255,233,74,0.16)', p: 'rgba(255,79,166,0.16)', o: 'rgba(255,255,255,0.08)' }
    : { y: '#FFF8C2', p: '#FFEAF2', o: '#ECEAE0' };
  let flagged = 0;
  return (
    <Dash title="app.boommaker.io · avant livraison">
      <div className="lp-motion" style={{ gap: 4 }}>
        <div className="lp-head" style={{ marginBottom: 8 }}><span className="lp-label">7 lignes avant le tri</span><Fict /></div>
        {TRI.map((r, i) => {
          const tf = r.flag ? 1.6 + 0.6 * (flagged++) : 99;
          const showFlag = m >= tf && m < 10.4;
          /* Les lignes signalées se replient à 5 s (max-height 60 → 0 en 0,5 s). */
          const gone = r.flag && m >= 5.0 && m < 10.4;
          const inn = m >= 0.2 + i * 0.12 && m < 10.4;
          return (
            <div key={i} style={{ overflow: 'hidden', maxHeight: gone ? 0 : 60, opacity: inn && !gone ? 1 : 0, transition: 'max-height .5s ease, opacity .35s ease' }}>
              <div className="lp-tri-row" style={{ background: showFlag ? bgs[r.kind] : 'transparent', transition: 'background .4s ease' }}>
                <span><b>{r.name}</b> <span className="co">· {r.co}</span></span>
                <span className="lp-flag" aria-hidden={!r.flag || undefined}
                      style={{ opacity: showFlag ? 1 : 0, transition: 'opacity .3s ease', visibility: r.flag ? 'visible' : 'hidden' }}>
                  {r.flag || '.'}
                </span>
              </div>
            </div>
          );
        })}
        <div className="lp-done" style={fade(m, 5.8, 10.4, 8)}>Il ne reste que les bonnes personnes.</div>
      </div>
    </Dash>
  );
};

const MotsMotion = ({ m, S }) => {
  /* Curseur de la machine à écrire : clignote à 2,5 Hz une fois la ligne tapée. */
  const blink = Math.floor(S * 2.5) % 2 === 0 ? 1 : 0;
  const cursor = (a, b, end) => (m < a || m >= end ? 0 : (m < b ? 1 : blink));
  const T1 = 'Claire, tu recrutes 2 commerciaux chez Atelier Nova.';
  const T2 = "Leurs 3 premiers mois décident de tout. J'aide les PME à les rendre opérationnels en 4 semaines.";
  const T3 = 'On se cale 15 min cette semaine ?';
  return (
    <Dash title="app.boommaker.io · message 1 sur 10">
      <div className="lp-motion lp-stack" style={{ gap: 14 }}>
        <div className="lp-head" style={{ marginBottom: 0 }}>
          <Person initials="CM" name="Claire Moreau" role="Dirigeante · Atelier Nova" />
          <Fict />
        </div>
        <div className="lp-msg" style={fade(m, 0.5, 12.4, 8)}>
          <span className="lp-label">Le bon moment</span>
          <span className="lp-msg-text">{type(m, 0.8, 2.6, T1)}<span className="lp-cursor" style={{ opacity: cursor(0.8, 2.6, 2.8) }} /></span>
        </div>
        <div className="lp-msg" style={fade(m, 2.8, 12.4, 8)}>
          <span className="lp-label">Ton offre</span>
          <span className="lp-msg-text" style={{ minHeight: 50 }}>{type(m, 3.0, 6.0, T2)}<span className="lp-cursor" style={{ opacity: cursor(3.0, 6.0, 6.2) }} /></span>
        </div>
        <div className="lp-msg" style={fade(m, 6.2, 12.4, 8)}>
          <span className="lp-label">Ta phrase</span>
          <span className="lp-msg-phrase">{type(m, 6.4, 7.6, T3)}<span className="lp-cursor" style={{ opacity: cursor(6.4, 7.6, 12.4) }} /></span>
        </div>
        <div className="lp-ok" style={fade(m, 8.4, 12.4, 8)}><b>✓ Validé par toi</b><span>Part depuis ton email</span></div>
      </div>
    </Dash>
  );
};

const CompteMotion = ({ m, dark }) => {
  const seen = (a) => ({ opacity: m >= a && m < 9.5 ? 1 : 0, transition: 'opacity .3s ease' });
  return (
    <Dash title="app.boommaker.io · tes comptes">
      <div className="lp-motion lp-stack">
        <div className="lp-row">
          <div className="lp-account"><div><b>Ton email</b><small>toi@tonentreprise.fr · <i style={seen(1.2)}>connecté</i></small></div></div>
          <Toggle on={m >= 1.0 && m < 9.5} dark={dark} />
        </div>
        <div className="lp-row">
          <div className="lp-account"><div><b>Ton LinkedIn</b><small>Ton profil · <i style={seen(2.0)}>connecté</i></small></div></div>
          <Toggle on={m >= 1.8 && m < 9.5} dark={dark} />
        </div>
        <div className="cc-block" style={{ marginTop: 6, ...fade(m, 2.6, 9.5, 10) }}>
          <div className="cc-block-eyebrow">Cette semaine</div>
          <div className="lp-sent" style={{ marginTop: 10 }}>
            <span className="lp-big">{count(m, 3.0, 6.0, 50)}</span>
            <span className="lp-big-label" style={{ margin: 0 }}>messages partis, signés de ton nom</span>
          </div>
          <div className="lp-big-label" style={fade(m, 6.2, 9.5, 6)}>Les réponses arrivent directement dans ta boîte.</div>
        </div>
      </div>
    </Dash>
  );
};

const TOOLS = ['Base de contacts', "Recherche d'emails", "Vérification d'emails", 'Préchauffage de ta boîte mail', "Outil d'envoi d'emails", 'Automatisation LinkedIn', 'IA pour écrire les messages'];

const InclusMotion = ({ m }) => (
  <Dash title="Ce qu'il te faudrait sans le Pack">
    <div className="lp-motion" style={{ gap: 0 }}>
      {TOOLS.map((name, i) => {
        const shown = m >= 0.3 + i * 0.35 && m < 10.4;
        const struck = m >= 3.6 + i * 0.15 && m < 10.4;
        return (
          <div className="lp-tool" key={name} style={{ opacity: shown ? 1 : 0, transform: `translateX(${shown ? 0 : -12}px)`, transition: 'opacity .4s ease, transform .4s ease' }}>
            <span className="lp-tool-n">0{i + 1}</span>
            <span className="lp-tool-name" style={{ color: struck ? 'var(--mute)' : 'var(--ink)' }}>{name}</span>
            <span className="lp-strike" aria-hidden="true" style={{ transform: `scaleX(${struck ? 1 : 0})` }} />
          </div>
        );
      })}
      <div className="lp-one" style={fade(m, 5.6, 10.4, 12)}>
        <div><b>1 outil</b><small>1 facture · 0 réglage · 0 abonnement en plus</small></div>
        <span>390 € HT / mois</span>
      </div>
    </div>
  </Dash>
);

/* Texte de chaque onglet ; `hold` = instant de l'image finale (mouvement réduit). */
const PANELS = [
  {
    hold: 8, Motion: MarcheMotion,
    title: <>Ton marché adressable, <em>chiffré et priorisé.</em></>,
    text: "Tu décris ton offre et ta cible. L'app compte les entreprises qui correspondent et les classe : d'abord celles qui ont un besoin visible maintenant, puis le reste.",
    list: ['Le volume de ton marché, avant de payer.', 'Un ordre de priorité clair, semaine après semaine.'],
    cta: 'Voir mon marché',
  },
  {
    hold: 7, Motion: MomentMotion,
    title: <>Chaque contact arrive avec <em>sa raison d'être appelé.</em></>,
    text: "Un fichier de 5 000 lignes ne fait répondre personne. Chaque contact est livré avec le signal qui rend ton offre pertinente aujourd'hui : un recrutement, une prise de poste, une ouverture.",
    list: ['Un signal par contact, relié à ton offre.', "Des messages qui partent de ce signal, pas d'un modèle."],
    cta: 'Démarrer sur mon marché',
  },
  {
    hold: 8, Motion: TriMotion,
    title: <>Dédoublonné, filtré, <em>sans tes clients ni tes concurrents.</em></>,
    text: "Doublons, entreprises hors cible, clients actuels, concurrents : tout est retiré avant livraison. Tu fournis ta liste d'exclusion une seule fois, au démarrage.",
    list: ['Jamais deux fois la même personne.', '0 minute passée à trier.'],
    cta: 'Démarrer sur mon marché',
  },
  {
    hold: 10.5, Motion: MotsMotion,
    title: <>Des messages écrits <em>avec tes mots.</em></>,
    text: "À l'accueil, tu indiques ton ton, tes formulations et ta façon de conclure. On rédige ensemble tes 10 premiers messages, tu corriges, puis chaque semaine part dans ton style.",
    list: ['Ton registre, tes phrases, tutoiement ou vouvoiement.', 'Tu valides avant le premier envoi.'],
    cta: 'Écrire mes 10 premiers messages',
  },
  {
    hold: 8, Motion: CompteMotion,
    title: <>Envoyés depuis <em>ton email et ton LinkedIn.</em></>,
    text: "Tu connectes tes comptes en deux clics. Les messages partent sous ton nom et les réponses arrivent dans ta boîte : ton prospect échange avec toi, pas avec un intermédiaire.",
    list: ['Tes conversations restent les tiennes, même si tu arrêtes.', 'Des volumes prudents pour protéger ton compte.'],
    cta: 'Lancer ma prospection',
  },
  {
    hold: 8.5, Motion: InclusMotion,
    title: <>Tous les outils inclus, <em>une seule facture.</em></>,
    text: "Base de contacts, vérification des emails, préchauffage de ta boîte, envoi, LinkedIn, IA : tout est déjà connecté et compris dans le prix. Si un outil change, on gère.",
    list: ['0 abonnement en plus, 0 compte à créer.', '0 réglage technique de ton côté.'],
    cta: 'Démarrer sans rien installer',
  },
];

const AppTabs = ({ t, dark }) => {
  const [tab, setTab] = useState(0);
  const [tabT0, setTabT0] = useState(0);
  const [clicked, setClicked] = useState(false);

  /* Défilement automatique d'un onglet au suivant, jusqu'au premier clic. */
  useEffect(() => {
    if (!clicked && !MOTION_STILL && t - tabT0 >= TAB_PERIODS[tab] * 1000) {
      setTab((tab + 1) % TABS.length);
      setTabT0(t);
    }
  }, [t]);

  const choose = (i) => { setTab(i); setTabT0(t); setClicked(true); };
  const TS = (t - tabT0) / 1000;
  const P = TAB_PERIODS[tab];
  const progress = MOTION_STILL ? 100 : Math.min(100, ((TS % P) / P) * 100);

  return (
    <>
      <div className="lp-tabs" role="group" aria-label="Les avantages du Pack">
        {TABS.map((label, i) => (
          <button type="button" key={label} className="lp-tab" aria-pressed={i === tab}
                  style={pressedStyle(i === tab, dark)} onClick={() => choose(i)}>
            <i>0{i + 1}</i>{label}
          </button>
        ))}
      </div>
      <div className="lp-track lp-tab-progress"><div className="lp-fill" style={{ width: `${progress}%` }} /></div>
      {PANELS.map((p, i) => (
        <div className="lp-split" key={i} style={i === tab ? undefined : { display: 'none' }}>
          <div>
            <h3 className="lp-panel-title">{p.title}</h3>
            <p className="lp-panel-text">{p.text}</p>
            <Checklist items={p.list} />
            <InlineCta>{p.cta}</InlineCta>
          </div>
          <p.Motion m={loop(i === tab ? TS : 0, TAB_PERIODS[i], p.hold)} S={t / 1000} dark={dark} />
        </div>
      ))}
    </>
  );
};

/* --- Pourquoi le Pack : sélecteur « Ton heure vaut » ---------------------- */

const eur = (x, d) => `${x.toLocaleString('fr-FR', { minimumFractionDigits: d, maximumFractionDigits: d })} €`;

const CoutReel = ({ dark }) => {
  const [rate, setRate] = useState(25);
  /* Faire seul : 1,40 € d'outils + 24 min de temps par contact ; 280 € d'outils + 80 h par mois. */
  const seul = 1.4 + 0.4 * rate;
  const mois = 280 + 80 * rate;
  const mx = Math.max(seul, 11);
  const w = (x) => `${(x / mx * 100).toFixed(1)}%`;
  const steps = [
    { n: '01', name: "Faire seul : ≈ 1,40 € d'outils + ≈ 24 min de ton temps", v: eur(seul, 2), w: w(seul) },
    { n: '02', name: 'SDR freelance, 1 jour par semaine', v: '8,40 à 11 €', w: w(11) },
    { n: '03', name: 'Le Pack : tout compris, 0 minute de ton temps', v: '1,95 €', w: w(1.95) },
  ];
  return (
    <div className="cc-block" style={{ marginTop: 18 }}>
      <div className="cc-block-eyebrow">Le vrai coût par personne contactée</div>
      <div className="cc-block-title">Outils et temps compris</div>
      <div className="lp-rate">
        <span>Ton heure vaut</span>
        {[25, 50, 80].map((r) => (
          <button type="button" key={r} className="lp-tab" aria-pressed={r === rate}
                  style={pressedStyle(r === rate, dark)} onClick={() => setRate(r)}>{r} €</button>
        ))}
      </div>
      <div className="cc-pipe">
        {steps.map((s) => (
          <div className="cc-pipe-step" key={s.n}>
            <span className="cc-pipe-num">{s.n}</span>
            <span className="cc-pipe-name">{s.name}</span>
            <span className="cc-pipe-count">{s.v}</span>
            <span className="cc-pipe-bar"><span style={{ width: s.w }} /></span>
          </div>
        ))}
      </div>
      <p className="lp-big-label" style={{ marginTop: 16 }}>
        Faire seul, c'est moins d'abonnements à payer, mais ≈ 80 h de travail par mois. À {rate} € de l'heure, ça te revient à <b>{eur(mois, 0)} par mois</b>, contre 390 € HT pour le Pack.
      </p>
    </div>
  );
};

/* --- La page --------------------------------------------------------------- */

const Hero = () => (
  <article className="audit-hero">
    <div className="container">
      <nav className="expertises-breadcrumb" aria-label="Fil d'Ariane">
        <a href="/">Accueil</a>
        <span className="expertises-breadcrumb-sep" aria-hidden="true">/</span>
        <a href="/tarifs">Tarifs</a>
        <span className="expertises-breadcrumb-sep" aria-hidden="true">/</span>
        <span aria-current="page">Le Pack</span>
      </nav>
      <span className="eyebrow"><span className="pulse" /> Nouveau · Le Pack, prospection clé en main</span>
      <h1>Ta prospection tourne. <em>Tu n'as plus qu'à répondre.</em></h1>
      <p className="lead">
        Chaque semaine, 50 personnes stratégiques à contacter, des messages écrits avec tes mots, envoyés depuis ton email et ton LinkedIn.{' '}
        <strong>Tes 10 premiers messages sont offerts, et tu paies seulement si tu valides.</strong>
      </p>
      <div className="lp-cta-row">
        <a href={APP_URL} className="btn btn-glow">Lancer ma prospection <ArrowUpRight /></a>
        <a href="#essai" className="btn btn-ghost">Comment ça démarre ?</a>
      </div>
      <div className="lp-hero-note">10 min pour démarrer · 10 premiers messages offerts · sans engagement</div>
      <div className="cc-hero-kpis">
        <div className="cc-hero-kpi"><div className="cc-hero-kpi-value">50</div><div className="cc-hero-kpi-label">personnes stratégiques à contacter chaque semaine, avec la raison de les appeler</div></div>
        <div className="cc-hero-kpi"><div className="cc-hero-kpi-value">7 outils</div><div className="cc-hero-kpi-label">inclus dans le prix, aucun abonnement en plus</div></div>
        <div className="cc-hero-kpi"><div className="cc-hero-kpi-value">10</div><div className="cc-hero-kpi-label">premiers messages offerts, écrits avec toi sur ton marché</div></div>
      </div>
    </div>
  </article>
);

const Toc = () => (
  <aside className="expertises-toc" aria-label="Sommaire de la page">
    <span className="expertises-toc-label">Sommaire</span>
    <ol>
      {TOC.map((e) => (
        <li key={e.href}>
          <a href={e.href}>
            <span className="expertises-toc-num">{e.n}</span>
            <span className="expertises-toc-title">{e.title}</span>
          </a>
        </li>
      ))}
    </ol>
  </aside>
);

const PageContent = () => {
  const t = useMotionClock();
  const S = t / 1000;
  const dark = isDarkTheme();

  /* Arrivée sur /moteur-prospection#prix (lien « Ciblage » du menu) : la
   * section n'existe qu'après le montage de React, on refait le défilement. */
  useEffect(() => {
    if (!window.location.hash) return undefined;
    const go = () => { const el = document.querySelector(window.location.hash); if (el) el.scrollIntoView({ block: 'start' }); };
    const t1 = setTimeout(go, 80);
    const t2 = setTimeout(go, 300);
    return () => { clearTimeout(t1); clearTimeout(t2); };
  }, []);

  return (
    <div className="cas-client-page lp-page lp-root">
      <SiteNav />
      <Hero />

      <section className="expertises-content">
        <div className="container expertises-layout">
          <Toc />
          <div className="expertises-main">

            {/* 01 · Ton espace */}
            <section className="expertises-cases" id="espace">
              <div className="lp-split">
                <div>
                  <Eyebrow>Ton espace</Eyebrow>
                  <h2 className="expertises-cases-title">Ce que tu vois <em>chaque semaine.</em></h2>
                  <p className="expertises-cases-lead">Les contacts livrés, les messages partis, les réponses reçues. Tout est au même endroit, et ton seul travail, c'est de répondre.</p>
                  <Checklist items={['Tu vois en 10 secondes si ta prospection tourne.', 'Pause ou arrêt en un clic, depuis le même espace.']} />
                </div>
                <EspaceMotion t={t} />
              </div>
            </section>

            {/* 02 · 10 premiers messages offerts */}
            <section className="expertises-cases tarifs-roi" id="essai">
              <div className="lp-split">
                <div>
                  <Eyebrow>10 premiers messages offerts</Eyebrow>
                  <h2 className="expertises-cases-title">Tes 10 premiers messages offerts. <em>Tu paies seulement si tu valides.</em></h2>
                  <p className="expertises-cases-lead">Tu ouvres l'app, tu décris ce que tu vends. On te montre ton marché et on écrit avec toi tes 10 premiers messages, offerts. Tu paies seulement si tu valides.</p>
                  <Checklist items={[
                    <><strong>Ton marché chiffré</strong> et ton ordre de priorité.</>,
                    <><strong>Tes 10 premiers messages</strong>, écrits avec toi.</>,
                    <>Ce que ça te coûte : <strong>10 minutes</strong>.</>,
                  ]} />
                  <div className="lp-cta-row" style={{ marginTop: 22 }}>
                    <a href={APP_URL} className="btn btn-glow">Lancer ma prospection <ArrowUpRight /></a>
                  </div>
                </div>
                <EssaiMotion S={S} dark={dark} />
              </div>
            </section>

            {/* 03 · Ce que fait l'app, en onglets */}
            <section className="expertises-cases" id="app">
              <Eyebrow>Ce que fait l'app</Eyebrow>
              <h2 className="expertises-cases-title">Tout ce qui te prend du temps. <em>On le fait à ta place.</em></h2>
              <AppTabs t={t} dark={dark} />
            </section>

            {/* Pourquoi le Pack, chiffré */}
            <section className="expertises-cases" id="comparatif">
              <Eyebrow>Pourquoi le Pack</Eyebrow>
              <h2 className="expertises-cases-title">Le prix des outils, sans le travail. <em>Ou tout fait, pour 1,95 € le contact.</em></h2>
              <div className="lp-kpis3">
                <div className="cc-hero-kpi"><div className="cc-hero-kpi-value">≈ 80 h</div><div className="cc-hero-kpi-label">de travail par mois si tu prospectes seul, en plus de ≈ 280 € d'outils</div></div>
                <div className="cc-hero-kpi"><div className="cc-hero-kpi-value">1,95 €</div><div className="cc-hero-kpi-label">par personne contactée avec le Pack : outils, ciblage, messages et envoi compris</div></div>
                <div className="cc-hero-kpi"><div className="cc-hero-kpi-value">≈ 20 h</div><div className="cc-hero-kpi-label">rendues chaque semaine, à passer avec tes prospects</div></div>
              </div>
              <div className="lp-charts">
                <div className="cc-block">
                  <div className="cc-block-eyebrow">Si tu fais seul</div>
                  <div className="cc-block-title">Les outils à payer chaque mois</div>
                  <div className="lp-tools-table">
                    {[
                      ['Base de contacts', 'Sales Navigator Core', '99,99 $'],
                      ["Recherche d'emails", 'Dropcontact Starter', '79 €'],
                      ['Vérification des emails', "ZeroBounce, à l'unité", '≈ 4 $'],
                      ['Préchauffage, envoi et LinkedIn', 'lemlist Multichannel Expert', '109 $'],
                      ['IA pour écrire', 'ChatGPT Plus', '20 $'],
                    ].map(([a, b, c]) => (
                      <div className="lp-tl" key={a}><span>{a}<small>{b}</small></span><b>{c}</b></div>
                    ))}
                    <div className="lp-tl lp-tl-total"><span>Total<small>pour 200 contacts par mois</small></span><b>≈ 280 €</b></div>
                    <div className="lp-tl lp-tl-total"><span>Par personne contactée<small>et tout le travail reste à faire</small></span><b>≈ 1,40 €</b></div>
                  </div>
                </div>
                <div className="cc-block">
                  <div className="cc-block-eyebrow">Ton temps chaque semaine</div>
                  <div className="cc-block-title">Pour contacter 50 personnes</div>
                  <div className="cc-funnel">
                    {[
                      ['Tout faire seul', '≈ 20 h', '100%', 'chercher, vérifier, trier, écrire, relancer'],
                      ['Avec Ciblage', '≈ 9 h', '45%', 'tu écris et tu relances'],
                      ['Avec le Pack', '0 h', '3%', ''],
                    ].map(([l, v, w, d]) => (
                      <div className="cc-funnel-row" key={l}>
                        <div className="cc-funnel-head"><span className="cc-funnel-label">{l}</span><span className="cc-funnel-val">{v}</span></div>
                        <div className="cc-funnel-track"><div className="cc-funnel-fill" style={{ width: w }}>{d && <span>{d}</span>}</div></div>
                      </div>
                    ))}
                  </div>
                  <div className="lp-src" style={{ marginTop: 16 }}>Hors temps passé à répondre, identique dans les trois cas.</div>
                </div>
              </div>
              <CoutReel dark={dark} />
              <p className="lp-src">Tarifs publics en facturation mensuelle, relevés en octobre 2026 (dollars convertis à environ 0,86 €, arrondis). Temps estimé par contact quand tu fais seul : 8 min de recherche, 5 min de vérification et de tri, 8 min d'écriture, 3 min d'envoi et de relance. Avec Ciblage : 8 min d'écriture et 3 min d'envoi. SDR : 420 à 550 € par jour sur Malt, sur la base de 4 jours par mois et 200 contacts. Pack : 390 € HT pour 200 personnes contactées par mois.</p>
            </section>

            {/* Prix */}
            <section className="expertises-cases" id="prix">
              <Eyebrow>Tarifs</Eyebrow>
              <h2 className="expertises-cases-title">Deux façons de démarrer. <em>Tu paies seulement si tu valides.</em></h2>
              <PackPricing />
              <div className="lp-boost">
                <div>
                  <Eyebrow style={{ margin: 0 }}>Le Boost</Eyebrow>
                  <h3>Besoin de plus de contacts ou d'automatisation dans ton CRM ?</h3>
                  <p>Le Boost lève la limite de contacts, automatise tes réponses et ton suivi CRM, avec une gestion chaque mois.</p>
                  <p className="lp-boost-price">À partir de 590 € HT / mois</p>
                </div>
                <a href="/tarifs" className="btn btn-ghost">Découvre le Boost <ArrowUpRight /></a>
              </div>
            </section>

            {/* Résultats réels de la campagne Boom Maker (tableau de bord de Julia, 13/10/2026) */}
            <section className="expertises-cases" id="resultats">
              <div className="lp-split">
                <div>
                  <Eyebrow>En direct</Eyebrow>
                  <h2 className="expertises-cases-title">On prospecte nos propres clients <em>avec le Pack.</em></h2>
                  <p className="expertises-cases-lead">Même moteur, mêmes règles, 50 personnes stratégiques par semaine. Voilà ce que ça donne sur LinkedIn : près d'une invitation sur deux acceptée, et 61 conversations ouvertes.</p>
                </div>
                <Dash title="Campagne Boom Maker · canal LinkedIn" live="Live">
                  <div className="cc-cards">
                    <div className="cc-card"><div className="cc-card-value">353</div><div className="cc-card-label">invitations envoyées</div></div>
                    <div className="cc-card"><div className="cc-card-value">174<em>49,3 %</em></div><div className="cc-card-label">invitations acceptées</div></div>
                    <div className="cc-card"><div className="cc-card-value">417</div><div className="cc-card-label">messages envoyés</div></div>
                    <div className="cc-card"><div className="cc-card-value">61<em>14,6 %</em></div><div className="cc-card-label">réponses reçues</div></div>
                  </div>
                  <p className="lp-src">Chiffres réels, extraits de notre tableau de bord de prospection.</p>
                </Dash>
              </div>
            </section>

            {/* FAQ */}
            <section className="expertises-faq" id="faq" aria-labelledby="faq-title">
              <Eyebrow>Questions fréquentes · Le Pack</Eyebrow>
              <h2 className="expertises-faq-title" id="faq-title">Tout ce que <em>tu te dis tout bas.</em></h2>
              <div className="expertises-faq-list">
                {FAQ.map((f) => (
                  <details className="expertises-faq-item" key={f.q}>
                    <summary><span>{f.q}</span><span className="expertises-faq-caret" aria-hidden="true">+</span></summary>
                    <p>{f.a}</p>
                    {f.cta && (
                      <div className="expertises-faq-ctas">
                        <a href={APP_URL} className="btn btn-glow">Lancer ma prospection <ArrowUpRight /></a>
                      </div>
                    )}
                  </details>
                ))}
              </div>
            </section>

            <div className="expertises-cta-final">
              <h2>Combien de clients t'attendent ? Réponse en 10 minutes.</h2>
              <p>Tu décris ce que tu vends, tu vois ton marché et tes 10 premiers messages. Tu paies seulement si tu valides.</p>
              <div className="cta-row">
                <a href={APP_URL} className="btn btn-glow">Lancer ma prospection <ArrowUpRight /></a>
                <a href="/contact" className="btn btn-ghost">Poser une question <ArrowUpRight /></a>
              </div>
            </div>

          </div>
        </div>
      </section>

      <FooterMin />
    </div>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(<PageContent />);