/* Page /ciblage-prospection : la landing de l'offre Ciblage (149 € HT / mois).
 * Proposition validée par Julia le 20/10/2026 (« ok, vas-y avec tes avis ») : jusque-là, le Ciblage
 * n'était qu'une ancre dans la page du Pack, qui parlait de messages écrits et d'envoi.
 *
 * Promesse : ce que le fichier livre vraiment (automation/livraison/livraison.py, 17 colonnes) :
 * qui, son entreprise et son adresse, comment le joindre, pourquoi lui, l'angle d'attaque, la phrase
 * d'accroche. Jamais « la raison de les appeler maintenant » : la qualification lit la page d'accueil
 * du site du prospect, pas sa page carrières. Jamais d'heure précise de livraison (« le matin »).
 * Pas de promesse de passage au Pack sans rien refaire : l'app ne sait pas encore changer l'offre
 * d'un compte (Pack = signataire, preuves, mots, épreuve, connexions en plus).
 *
 * Même charpente et mêmes composants que /moteur-prospection : une seule horloge (useMotionClock),
 * chaque animation boucle sur sa propre période, tout est figé sur l'image finale en mouvement
 * réduit et pour le pré-rendu. Toute donnée inventée porte le badge « Exemple fictif ». */

const { useState, useEffect } = React;
const {
  ArrowUpRight, Check, FooterMin, SiteNav, appUrl,
  useMotionClock, motion, MOTION_STILL, isDarkTheme, CiblagePlan, ComparatifOffres, VideoDemo, DEMOS,
} = window.BMShared;

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

const EXEMPLE_CSV = '/assets/exemple-ciblage.csv';

/* Période de chaque onglet de « Ce que tu en fais », en secondes. */
const TAB_PERIODS = [10, 10, 10];
const TABS = ['Tu appelles', 'Tu passes les voir', "Tu l'importes"];

const TOC = [
  { href: '#demo', n: '/ Démo', title: 'La démo en vidéo' },
  { href: '#marche', n: '/ 01', title: 'Ton marché, compté' },
  { href: '#contact', n: '/ 02', title: 'Chaque contact' },
  { href: '#usages', n: '/ 03', title: 'Ce que tu en fais' },
  { href: '#choisir', n: '/ 04', title: 'Le Ciblage ou le Pack' },
  { href: '#prix', n: '/ Prix', title: '149 € HT par mois' },
  { href: '#faq', n: '/ FAQ', title: 'Questions fréquentes' },
];

/* Même liste que le FAQPage de ciblage-prospection.html : Google demande que
 * le balisage corresponde au texte affiché. Modifier les deux ensemble. */
const FAQ = [
  { q: "Qu'est-ce que je reçois exactement ?", a: "Chaque semaine, le matin du jour que tu as choisi, un email avec tes 50 contacts en fichier joint. Le même fichier reste dans ton espace. Une ligne par décideur, 17 colonnes : qui il est, son entreprise et son adresse, comment le joindre, pourquoi lui, l'angle d'attaque et ta phrase d'accroche.", csv: true },
  { q: "Qu'est-ce qui est gratuit ?", a: "Ton marché, compté. Tu décris ce que tu vends, on calcule tes cercles de cibles et on compte les entreprises de chacun dans ta zone. Tu paies seulement si tu valides ton marché.", cta: true },
  { q: 'D\'où viennent les contacts ?', a: "De bases d'entreprises françaises et de profils professionnels publics, filtrés sur tes cercles (activité, taille, zone), puis triés un par un par l'IA à partir de ce que tu vends." },
  { q: 'Ils ont tous un email ?', a: "Chacun a au moins un moyen d'être joint : un email nominatif ou son LinkedIn. Le téléphone et l'adresse complète sont là quand ils existent publiquement." },
  { q: 'Et si mon marché est petit ?', a: "On te le dit dès le comptage, avant que tu paies : si ton marché tient moins de six mois, on te propose d'élargir tes cercles ou de ralentir le rythme." },
  { q: 'Je peux recevoir deux fois la même personne ?', a: "Non. Personne ne revient d'une semaine à l'autre, et tu peux donner une liste de clients, partenaires ou concurrents à ne jamais te livrer." },
  { q: 'Quelle différence avec le Pack ?', a: "Avec le Ciblage, tu reçois les contacts 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 : toi, tu réponds." },
  { q: 'Comment j\'arrête ?', a: 'Depuis ton espace, en un clic. Sans engagement : le mois en cours reste dû.' },
];

/* --- Petits blocs (mêmes que /moteur-prospection) ------------------------- */

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

const Cta = ({ glow = true, children = 'Compter mon marché' }) => (
  <a href={appUrl('Ciblage')} className={'btn ' + (glow ? 'btn-glow' : 'btn-ghost')}>{children} <ArrowUpRight /></a>
);

const Exemple = () => <a href={EXEMPLE_CSV} download className="btn btn-ghost">Voir un exemple de fichier</a>;

const pressedStyle = (on, dark) => (on
  ? { borderColor: 'var(--violet)', background: 'rgba(var(--violet-rgb),0.10)', color: dark ? 'var(--ink)' : 'var(--violet-deep)' }
  : undefined);

/* Avance de 0 à 1 entre a et b, adoucie. */
const ease01 = (m, a, b) => ease((m - a) / (b - a));

/* La même phrase d'accroche sert à la fiche, à l'appel et à l'import. */
const ACCROCHE = "Claire, chez Atelier Nova, c'est encore toi qui formes chaque nouveau commercial ?";

/* --- Hero · la livraison du jour choisi (11 s) ------------------------------ */

const JOURS = [['26', 'lun.'], ['27', 'mar.'], ['28', 'mer.'], ['29', 'jeu.'], ['30', 'ven.']];
const LIVRES = [
  { i: 'CM', n: 'Claire Moreau', r: 'Dirigeante · Atelier Nova', c: 'Cercle 1' },
  { i: 'TL', n: 'Thomas Leroy', r: 'Directeur commercial · Velto', c: 'Cercle 1' },
  { i: 'SB', n: 'Sarah Benali', r: 'Gérante · Studio Cèdre', c: 'Cercle 2' },
];

const LivraisonMotion = ({ S }) => {
  const m = loop(S, 11, 8);
  const E = 10.4;
  return (
    <Dash title="ta boîte mail · ton jour de livraison" live="Le matin">
      <div className="lp-motion lp-stack">
        <div className="lp-head" style={{ marginBottom: 0 }}><span className="lp-label">Mardi 27 octobre</span><Fict /></div>
        <div className="lc-week">
          {JOURS.map(([n, j]) => (
            <div className={'lc-day' + (j === 'mar.' ? ' is' : '')} key={j}>
              {j === 'mar.' && <span className="lc-day-tag">ton jour</span>}
              <b>{n}</b>{j}
            </div>
          ))}
        </div>
        <div className="lc-mail" style={fade(m, 1.0, E, 14)}>
          <div className="lc-mail-top"><span><b>Julia, Boom Maker</b> · à toi</span><span>ce matin</span></div>
          <div className="lc-mail-subj">Tes 50 contacts de la semaine</div>
          <div className="lc-mail-txt">Ils sont prêts. Le fichier est joint, et il reste dans ton espace.</div>
          <div className="lc-mail-row"><span className="lc-file">contacts-27-10.csv · 50 lignes</span><span className="lc-mini-btn">Télécharger mes contacts</span></div>
        </div>
        {LIVRES.map((p, k) => (
          <div className="lp-row lc-row" key={p.n} style={fade(m, 2.8 + 0.45 * k, E, 10)}>
            <Person initials={p.i} name={p.n} role={p.r} />
            <span className="lp-chip">{p.c}</span>
          </div>
        ))}
        <div className="lc-more" style={fade(m, 4.4, E, 0)}>+ 47 autres, rangés par priorité</div>
      </div>
    </Dash>
  );
};

/* --- 01 · Les cercles de cibles (12 s) ------------------------------------- */

/* Points des trois cercles, tirés une fois (graine fixe : le pré-rendu et le navigateur dessinent
 * les mêmes). [rayon min, rayon max, nombre, couleur, instant d'apparition]. */
const CERCLES = [
  { r: 46, color: 'var(--violet)', band: [8, 40], n: 14, at: 3.1, nom: 'Éditeurs de logiciels', det: '10 à 49 salariés · 60 % des livraisons', total: 380 },
  { r: 82, color: 'var(--cyan)', band: [52, 76], n: 24, at: 3.7, nom: 'Cabinets de conseil', det: '10 à 49 salariés · 30 %', total: 1140 },
  { r: 118, color: 'var(--mute)', band: [88, 112], n: 36, at: 4.3, nom: 'Négoce B2B', det: '20 à 99 salariés · 10 %', total: 2860 },
];
const POINTS = (() => {
  let seed = 7;
  const rnd = () => { seed = (seed * 16807) % 2147483647; return (seed - 1) / 2147483646; };
  const out = [];
  CERCLES.forEach((c, k) => {
    for (let i = 0; i < c.n; i++) {
      const r = c.band[0] + rnd() * (c.band[1] - c.band[0]);
      const a = rnd() * Math.PI * 2;
      out.push({ k, x: (130 + r * Math.cos(a)).toFixed(1), y: (130 + r * Math.sin(a)).toFixed(1), at: c.at + rnd() * 0.9 });
    }
  });
  return out;
})();

const CerclesMotion = ({ S }) => {
  const m = loop(S, 12, 9);
  const E = 11.4;
  const live = m < E;
  const statut = m < 1.6 ? 'Ton site' : m < 2.6 ? 'Lecture de ton site' : m < 5.2 ? 'Calcul de tes cercles' : 'Ton marché est prêt';
  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">Tes cercles de cibles</span><Fict /></div>
        <div className="lp-field"><small>Ton site</small><span>{live ? type(m, 0.3, 1.5, 'atelier-formation.fr') : ''}</span></div>
        <div className="lc-status"><i />{live ? statut : 'Ton site'}</div>
        <div className="lc-rings">
          <svg viewBox="0 0 260 260" role="img" aria-label="Trois cercles de cibles, du plus précis au plus large">
            <circle cx="130" cy="130" r="118" className="lc-ring-bg" />
            {CERCLES.slice().reverse().map((c) => {
              const k = CERCLES.indexOf(c);
              return (
                <circle key={c.r} cx="130" cy="130" r={c.r} fill="none" stroke={c.color} strokeWidth={k === 0 ? 2 : 1.5}
                        pathLength="100" strokeDasharray="100" transform="rotate(-90 130 130)" className="lc-ring"
                        strokeDashoffset={live ? 100 * (1 - ease01(m, 2.6 + 0.6 * k, 3.4 + 0.6 * k)) : 100} />
              );
            })}
            {POINTS.map((p, i) => (
              <circle key={i} cx={p.x} cy={p.y} r="2.6" fill={CERCLES[p.k].color} className="lc-dot"
                      style={{ opacity: live && m >= p.at ? 1 : 0 }} />
            ))}
          </svg>
          <ol className="lc-legend">
            {CERCLES.map((c, k) => (
              <li key={c.nom} style={{ opacity: live && m >= c.at - 0.2 ? 1 : 0.35 }}>
                <span className="lc-sw" style={{ background: c.color }} />
                <div><b>Cercle {k + 1}</b> {c.nom}<small>{c.det}</small></div>
                <span className="lc-n">{live ? count(m, c.at, c.at + 1.3, c.total) : '0'}</span>
              </li>
            ))}
          </ol>
        </div>
        <div className="lc-total" style={fade(m, 5.4, E, 6)}>
          <b>4 380</b> entreprises en Auvergne-Rhône-Alpes : de quoi livrer 50 décideurs par semaine pendant environ 20 mois.
        </div>
      </div>
    </Dash>
  );
};

/* --- 02 · Une ligne du fichier se remplit (14 s) ---------------------------- */

/* [instant, colonnes atteintes] : 3 (qui) + 7 (entreprise) + 3 (joindre) + 4 (pourquoi) = 17. */
const GROUPES = [[1.0, 3], [2.0, 10], [3.0, 13], [4.0, 15], [5.0, 16], [6.0, 17]];

const FicheMotion = ({ S }) => {
  const m = loop(S, 14, 12);
  const E = 13.4;
  const blink = Math.floor(S * 2.5) % 2 === 0 ? 1 : 0;
  let cols = 2;
  GROUPES.forEach(([a, n]) => { if (m >= a && m < E) cols = n; });
  const g = (k) => ({ ...fade(m, GROUPES[k][0], E, 8), ...(m >= GROUPES[k][0] && m < GROUPES[k][0] + 1.2 ? { borderColor: 'var(--violet)' } : {}) });
  return (
    <Dash title="contacts-27-10.csv · ligne 1 sur 50">
      <div className="lp-motion lp-stack" style={{ gap: 11 }}>
        <div className="lp-head" style={{ marginBottom: 0 }}>
          <Person initials="CM" name="Claire Moreau" role={m >= 1.0 && m < E ? 'Dirigeante · Atelier Nova' : 'Atelier Nova'} />
          <div className="lc-cols"><b>{cols}</b><small>colonnes</small></div>
        </div>
        <div className="lc-grp" style={g(0)}><span className="lp-label">Qui</span><div className="lc-vals"><span>Dirigeante</span><span>Prénom, nom, poste</span></div></div>
        <div className="lc-grp" style={g(1)}><span className="lp-label">Son entreprise</span><div className="lc-vals"><span>Éditeur de logiciels</span><span>24 salariés</span><span>12 rue Garibaldi, 69006 Lyon</span><span>Son site</span></div></div>
        <div className="lc-grp" style={g(2)}><span className="lp-label">La joindre</span><div className="lc-vals"><span className="lc-ok">✓ Email nominatif</span><span className="lc-ok">✓ LinkedIn</span><span>04 65 71 •• ••</span></div></div>
        <div className="lc-grp" style={g(3)}><span className="lp-label">Pourquoi elle · cercle 1</span><p>Éditeur de 24 personnes qui vend aux DSI : l'équipe commerciale est petite et c'est elle qui la pilote.</p></div>
        <div className="lc-grp" style={g(4)}><span className="lp-label">Angle d'attaque</span><p>Les trois premiers mois d'un commercial recruté dans une petite équipe.</p></div>
        <div className="lc-grp" style={g(5)}>
          <span className="lp-label">Ta phrase d'accroche</span>
          <p className="lc-quote">{m < E ? type(m, 6.3, 9.0, ACCROCHE) : ''}<span className="lp-cursor" style={{ opacity: m < 6.3 || m >= E ? 0 : (m < 9.0 ? 1 : blink) }} /></p>
        </div>
      </div>
    </Dash>
  );
};

/* --- 03 · Ce que tu en fais : une animation par onglet ---------------------- */

const AppelMotion = ({ m }) => {
  const E = 9.5;
  const s = m < E ? Math.min(42, Math.floor(Math.max(0, m - 0.6) * 5.2)) : 0;
  return (
    <Dash title="appel · Claire Moreau · Atelier Nova" live={`00:${String(s).padStart(2, '0')}`}>
      <div className="lp-motion lp-stack">
        <div className="lp-head" style={{ marginBottom: 0 }}><span className="lc-calling"><i />Appel en cours</span><Fict /></div>
        <div className="lc-cue lc-cue-main" style={fade(m, 0.4, E, 8)}>
          <span className="lp-label">Ta première phrase</span>
          <p>{m < E ? type(m, 0.8, 3.0, ACCROCHE) : ''}</p>
        </div>
        <div className="lc-cue" style={fade(m, 3.6, E, 8)}><span className="lp-label">Si elle demande pourquoi elle</span><p>Une équipe commerciale de quelques personnes, pilotée par la dirigeante.</p></div>
        <div className="lc-cue" style={fade(m, 4.8, E, 8)}><span className="lp-label">Ton angle</span><p>Les trois premiers mois d'un commercial recruté.</p></div>
        <div className="lp-ok" style={fade(m, 6.6, E, 6)}><b>✓ Rendez-vous jeudi 10 h</b><span>Tu as appelé, sans rien chercher avant</span></div>
      </div>
    </Dash>
  );
};

const ARRETS = [[62, 58], [78, 74], [94, 52], [158, 138], [176, 152], [190, 128], [248, 42], [266, 58], [282, 34]];
const QUARTIERS = [['69006 · Lyon 6e', 1.2], ['69003 · Lyon 3e', 2.05], ['69100 · Villeurbanne', 2.9]];

const TourneeMotion = ({ m }) => {
  const E = 9.5;
  const live = m < E;
  return (
    <Dash title="ta tournée · jeudi">
      <div className="lp-motion lp-stack">
        <div className="lp-head" style={{ marginBottom: 0 }}><span className="lp-label">9 visites, 3 quartiers</span><Fict /></div>
        <svg className="lc-map" viewBox="0 0 320 190" role="img" aria-label="Plan d'une tournée en trois quartiers">
          <path className="lc-street lc-street-big" d="M0 120 C80 110 150 132 320 96" />
          <path className="lc-street" d="M60 0 L90 190 M170 0 L150 190 M250 0 L270 190 M0 50 L320 64 M0 160 L320 170 M20 20 L120 90 M200 120 L300 30" />
          <polyline className="lc-route" pathLength="100" strokeDasharray="100" points={ARRETS.map((a) => a.join(',')).join(' ')}
                    strokeDashoffset={live ? 100 * (1 - ease01(m, 3.3, 6.0)) : 100} />
          {ARRETS.map(([x, y], i) => (
            <g key={i} className="lc-pin" style={{ opacity: live && m >= 0.5 + i * 0.28 ? 1 : 0 }}>
              <circle cx={x} cy={y} r="9" className="lc-pin-ring" />
              <circle cx={x} cy={y} r="4" className="lc-pin-dot" />
            </g>
          ))}
          <text className="lc-cp" x="44" y="100">69006</text>
          <text className="lc-cp" x="140" y="182">69003</text>
          <text className="lc-cp" x="250" y="88">69100</text>
        </svg>
        <div>
          {QUARTIERS.map(([q, a]) => (
            <div className="lp-tl" key={q} style={{ opacity: live && m >= a ? 1 : 0.3, transition: 'opacity .35s ease' }}><span>{q}</span><b>3 visites</b></div>
          ))}
        </div>
      </div>
    </Dash>
  );
};

const COLONNES_IMPORT = ['Prénom', 'Email', 'LinkedIn', "Phrase d'accroche", 'Entreprise'];

const ImportMotion = ({ m }) => {
  const E = 9.5;
  const tok = (k, variable, valeur) => (m >= 4.6 + k * 0.6 && m < E
    ? <span className="lc-val">{valeur}</span>
    : <span className="lc-var">{variable}</span>);
  return (
    <Dash title="ton outil d'envoi · nouvelle séquence">
      <div className="lp-motion lp-stack">
        <div className="lp-head" style={{ marginBottom: 0 }}><span className="lp-label">Colonnes importées</span><Fict /></div>
        <div className="lc-heads">
          {COLONNES_IMPORT.map((c, i) => <span key={c} className="lp-chip" style={fade(m, 0.3 + i * 0.25, E, 6)}>{c}</span>)}
        </div>
        <div className="lc-tool" style={fade(m, 1.9, E, 10)}>
          <div className="lc-mail-top"><span>Message 1 · email</span><span>{m >= 4.6 && m < E ? 'aperçu pour Claire Moreau' : 'modèle'}</span></div>
          <p className="lc-tool-to">À : {tok(0, '{{Prénom}} {{Nom}}', 'Claire Moreau')}</p>
          <p className="lc-tool-msg">
            {tok(1, "{{Phrase d'accroche}}", ACCROCHE)}<br />
            <span className="lc-tool-suite">La suite de ton message, écrite une fois pour toute la séquence.</span>
          </p>
        </div>
        <div className="lp-ok" style={fade(m, 6.4, E, 6)}><b>✓ 50 contacts importés</b><span>Les mêmes colonnes chaque semaine</span></div>
      </div>
    </Dash>
  );
};

/* Texte de chaque onglet ; `hold` = instant de l'image finale (mouvement réduit). */
const PANELS = [
  {
    hold: 8.5, Motion: AppelMotion,
    title: <>Tu décroches. <em>Ta première phrase est prête.</em></>,
    text: "Chaque contact arrive avec la raison de l'avoir choisi et une phrase d'accroche écrite pour lui. Tu sais pourquoi tu appelles avant que ça sonne.",
    list: ["L'angle d'attaque pour enchaîner après la première phrase.", "Le téléphone quand il existe, sinon l'email ou le LinkedIn."],
  },
  {
    hold: 8, Motion: TourneeMotion,
    title: <>Ta tournée de la semaine, <em>quartier par quartier.</em></>,
    text: 'Adresse, code postal et ville sur chaque ligne : tu tries par quartier et tu regroupes tes visites. Idéal si tu vends en face à face.',
    list: ["L'adresse complète quand elle est publique, sinon le code postal et la ville.", "L'effectif et l'activité pour choisir où passer en premier."],
  },
  {
    hold: 8.5, Motion: ImportMotion,
    title: <>Dans ton outil d'envoi, <em>en un import.</em></>,
    text: "Un fichier CSV propre, lisible dans Excel et prêt à importer dans ton outil d'envoi ou ton CRM. La phrase d'accroche devient une variable de ton message.",
    list: ['Les mêmes colonnes chaque semaine : ton import ne change jamais.', "Aucun doublon d'une semaine à l'autre."],
  },
];

const UsageTabs = ({ 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 usages du fichier">
        {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} />
          </div>
          <p.Motion m={loop(i === tab ? TS : 0, TAB_PERIODS[i], p.hold)} />
        </div>
      ))}
    </>
  );
};

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

const Hero = ({ S }) => (
  <article className="audit-hero lc-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 Ciblage</span>
      </nav>
      <div className="lp-split">
        <div>
          <span className="eyebrow"><span className="pulse" /> Nouveau · Le Ciblage, ta liste de prospects chaque semaine</span>
          <h1>Qui appeler cette semaine. <em>Et quoi lui dire.</em></h1>
          <p className="lead">
            Chaque semaine, à ton jour, 50 décideurs de ton marché, triés et dédoublonnés, avec la raison de les choisir, l'angle pour les aborder et ta première phrase. Tu contactes toi-même, sans chercher.{' '}
            <strong>Ton marché est compté gratuitement : tu paies seulement si tu le valides.</strong>
          </p>
          <div className="lp-cta-row">
            <Cta />
            <a href="#demo" className="btn btn-ghost">Voir la démo · {DEMOS.Ciblage.duree}</a>
          </div>
          <div className="lp-hero-note">Ton marché en 10 minutes · 149 € HT / mois · sans engagement</div>
        </div>
        <LivraisonMotion S={S} />
      </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">décideurs par semaine, livrés le jour que tu choisis</div></div>
        <div className="cc-hero-kpi"><div className="cc-hero-kpi-value">17</div><div className="cc-hero-kpi-label">colonnes sur chaque ligne, de l'adresse à la phrase d'accroche</div></div>
        <div className="cc-hero-kpi"><div className="cc-hero-kpi-value">0,75 €</div><div className="cc-hero-kpi-label">HT environ par décideur livré, recherche et tri compris</div></div>
      </div>
    </div>
  </article>
);

/* Bouton fixé en bas, sur téléphone seulement (même règle que /moteur-prospection) : il apparaît une
 * fois les boutons du hero sortis de l'écran, et reste caché tant que le bandeau cookies est ouvert. */
const StickyCta = () => {
  const [voir, setVoir] = useState(false);
  useEffect(() => {
    const cible = document.querySelector('.audit-hero .lp-cta-row');
    if (!cible || !window.IntersectionObserver) return undefined;
    const io = new IntersectionObserver(([e]) => setVoir(!e.isIntersecting && e.boundingClientRect.top < 0));
    io.observe(cible);
    return () => io.disconnect();
  }, []);
  return (
    <div className={'lp-sticky' + (voir ? ' on' : '')} aria-hidden={!voir}>
      <a href={appUrl('Ciblage')} className="btn btn-glow" tabIndex={voir ? 0 : -1}>Compter mon marché <ArrowUpRight /></a>
    </div>
  );
};

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 /ciblage-prospection#prix : la section n'existe qu'après le montage de React. */
  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 lc-page">
      <SiteNav />
      <Hero S={S} />

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

            {/* La démo en vidéo (YouTube, 20/10/2026) */}
            <section className="expertises-cases" id="demo">
              <Eyebrow>La démo</Eyebrow>
              <h2 className="expertises-cases-title">Le Ciblage en {DEMOS.Ciblage.duree}. <em>De ton site à ta liste.</em></h2>
              <p className="expertises-cases-lead">Tu colles ton site, tu vois ton marché compté, et chaque semaine tes 50 décideurs arrivent avec la raison de les choisir et ta phrase d'accroche.</p>
              <VideoDemo offre="Ciblage" />
              <p className="lp-src">Tu préfères lire ? <a href={EXEMPLE_CSV} download>Télécharge un exemple de fichier</a>, 10 lignes fictives au format livré.</p>
            </section>

            {/* 01 · Ton marché, compté avant de payer */}
            <section className="expertises-cases tarifs-roi" id="marche">
              <div className="lp-split">
                <div>
                  <Eyebrow>Ton marché, compté</Eyebrow>
                  <h2 className="expertises-cases-title">Tu colles ton site. <em>On compte ton marché.</em></h2>
                  <p className="expertises-cases-lead">On lit ton site, tu décris ton meilleur client, et en deux minutes environ l'app dessine tes cercles de cibles et compte les entreprises de chacun dans ta zone. Tu sais combien de semaines de prospection t'attendent, avant de payer quoi que ce soit.</p>
                  <Checklist items={[
                    'Le cercle le plus précis passe en premier : 60 % de chaque livraison.',
                    "Si ton marché tient moins de six mois, on te le dit tout de suite et on te propose d'élargir.",
                    <>Ce que ça te coûte : <strong>10 minutes</strong>.</>,
                  ]} />
                  <div className="lp-cta-row" style={{ marginTop: 22 }}><Cta /></div>
                </div>
                <CerclesMotion S={S} />
              </div>
            </section>

            {/* 02 · Ce que contient chaque contact */}
            <section className="expertises-cases" id="contact">
              <div className="lp-split">
                <div>
                  <Eyebrow>Chaque contact</Eyebrow>
                  <h2 className="expertises-cases-title">Pas une ligne de plus dans un tableur. <em>Une personne, et quoi lui dire.</em></h2>
                  <p className="expertises-cases-lead">Un fichier de 5 000 noms ne fait répondre personne. Chaque décideur arrive avec ce qu'il faut pour le contacter dès aujourd'hui : qui il est, où le trouver, pourquoi lui, et par où commencer.</p>
                  <Checklist items={[
                    'Au moins un moyen de le joindre : email nominatif ou LinkedIn, le téléphone quand il existe.',
                    "Une phrase d'accroche écrite avec ta façon de parler.",
                    'Jamais tes clients, jamais tes concurrents, jamais deux fois la même personne.',
                  ]} />
                  <div className="lp-cta-row" style={{ marginTop: 22 }}><Exemple /></div>
                </div>
                <FicheMotion S={S} />
              </div>
            </section>

            {/* 03 · Ce que tu en fais, en onglets */}
            <section className="expertises-cases" id="usages">
              <Eyebrow>Ce que tu en fais</Eyebrow>
              <h2 className="expertises-cases-title">Un fichier, trois façons de prospecter. <em>Toujours la tienne.</em></h2>
              <UsageTabs t={t} dark={dark} />
            </section>

            {/* 04 · Ciblage ou Pack */}
            <section className="expertises-cases" id="choisir">
              <Eyebrow>Le Ciblage ou le Pack</Eyebrow>
              <h2 className="expertises-cases-title">Tu gardes la main, <em>ou on s'occupe de tout.</em></h2>
              <p className="expertises-cases-lead">Les deux offres partent du même marché compté et des mêmes 50 décideurs par semaine. La différence, c'est qui écrit et qui envoie.</p>
              <ComparatifOffres ici="Ciblage" />
              <p className="lp-src">Temps et coûts par contact repris de la page du Pack : 149 € HT pour 200 décideurs par mois, 390 € HT pour 200 personnes contactées. <a href="/moteur-prospection">Découvrir le Pack</a></p>
            </section>

            {/* Prix */}
            <section className="expertises-cases" id="prix">
              <div className="lp-split lc-prix">
                <div>
                  <Eyebrow>Tarif</Eyebrow>
                  <h2 className="expertises-cases-title">149 € HT par mois. <em>Environ 0,75 € par décideur.</em></h2>
                  <p className="expertises-cases-lead">Sans engagement, et rien n'est débité avant que tu aies vu et validé ton marché. Tous tes fichiers restent dans ton espace, semaine par semaine.</p>
                  <p className="lp-src">Envie qu'on écrive et qu'on envoie aussi ? <a href="/moteur-prospection">Le Pack, 390 € HT par mois</a>.</p>
                </div>
                <div className="pricing-grid lc-pricing"><CiblagePlan seule /></div>
              </div>
            </section>

            {/* FAQ */}
            <section className="expertises-faq" id="faq" aria-labelledby="faq-title">
              <Eyebrow>Questions fréquentes · Le Ciblage</Eyebrow>
              <h2 className="expertises-faq-title" id="faq-title">Tout ce que <em>tu te demandes avant.</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 || f.csv) && (
                      <div className="expertises-faq-ctas">{f.cta ? <Cta /> : <Exemple />}</div>
                    )}
                  </details>
                ))}
              </div>
            </section>

            <div className="expertises-cta-final">
              <h2>Combien de décideurs t'attendent ? Réponse en 10 minutes.</h2>
              <p>Tu décris ce que tu vends, tu vois ton marché compté, cercle par cercle. Tu paies seulement si tu le valides.</p>
              <div className="cta-row">
                <Cta />
                <a href="/contact" className="btn btn-ghost">Poser une question <ArrowUpRight /></a>
              </div>
            </div>

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

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

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