/* Page /cas-client-scoring-ia — cas client anonymisé : moteur de scoring IA.
 * Chiffres RÉELS (coûts d'exploitation). Client masqué (secteur + nom), aucun
 * détail technique proprio (formule/pondérations). Réutilise le design system. */

const { useState } = React;
const { Logo, ArrowUpRight, Check, ThemeToggle, FooterMin, useReveal } = window.BMShared;

/* === 3 chiffres forts (bandeau héro) === */
const HERO_KPIS = [
  { value: '1 centime', label: "le coût pour analyser et noter un prospect, de bout en bout" },
  { value: '/100', label: "un score clair par site, trié automatiquement en 3 niveaux" },
  { value: '~23 €/mois', label: "pour qualifier environ 200 prospects par mois" },
];

/* === Les 4 étapes du moteur === */
const STEPS = [
  {
    tag: 'Étape 01',
    title: 'Collecte automatique',
    body: "Le moteur visite le site de l'entreprise et repère au passage sa technologie, son suivi d'audience et la présence éventuelle d'un chat. Rien à saisir à la main.",
  },
  {
    tag: 'Étape 02',
    title: 'Lecture par l\'IA',
    body: "Une IA lit le site comme le ferait ton meilleur commercial : elle repère les signaux concrets (audience, intention de conversion, valeur potentielle, potentiel inexploité) et les décrit en clair, preuves à l'appui.",
  },
  {
    tag: 'Étape 03',
    title: 'Note par l\'algorithme',
    body: "Un algorithme transforme ces signaux en un score sur 100, toujours de la même façon. L'IA lit, l'algo note : deux fois le même site, deux fois le même score. Résultat trié en Or, Argent, Bronze ou hors-cible.",
  },
  {
    tag: 'Étape 04',
    title: 'CRM prêt à travailler',
    body: "Chaque entreprise arrive dans un CRM avec son score, l'explication du score, l'angle d'accroche recommandé et le décideur identifié. Le commercial n'a plus qu'à traiter les meilleurs, en premier.",
  },
];

/* === Signaux de l'exemple (jauge) — libellés génériques, anonymisés === */
const SIGNALS = [
  { name: 'Audience et visibilité', val: 'élevée', pct: '85%' },
  { name: 'Intention de conversion', val: 'forte', pct: '80%' },
  { name: 'Valeur potentielle', val: 'élevée', pct: '75%' },
  { name: 'Potentiel inexploité', val: 'moyen', pct: '55%' },
];

/* === Coûts réels === */
const COSTS = [
  { value: '~1 c€', label: "pour analyser et noter n'importe quel prospect (crawl gratuit + lecture IA)" },
  { value: '~0,70 €', label: "pour enrichir un prospect chaud (email + portable), uniquement sur les meilleurs (Or)" },
  { value: '~23 €', label: "par mois pour qualifier environ 200 prospects, tout compris" },
];

/* === KPI de résultats === */
const RESULT_KPIS = [
  { value: '~1 c€', label: 'le coût pour analyser et noter un prospect' },
  { value: '/100', label: 'un score clair et explicable pour chaque site' },
  { value: '4 niveaux', label: 'Or, Argent, Bronze, hors-cible écarté automatiquement' },
  { value: 'instantané', label: 'un score en quelques secondes, pas en quelques jours' },
  { value: '~23 €/mois', label: 'pour qualifier environ 200 prospects par mois' },
  { value: '0', label: "outil de trafic payant : l'IA estime à partir d'indices publics" },
];

/* === Avant / Après (chiffre réel côté "après" : le coût) === */
const BEFORE_AFTER = [
  { metric: 'Ciblage', before: 'par secteur', beforeSmall: 'au hasard', after: 'par signaux', afterSmall: 'score /100 par site' },
  { metric: 'Coût par prospect qualifié', before: 'au prix fort', beforeSmall: 'listes, outils de scoring', after: '~1 c€', afterSmall: 'crawl gratuit + IA' },
  { metric: 'Priorisation', before: '2 000', beforeSmall: 'contacts en vrac', after: 'Top 30', afterSmall: "à appeler, avec l'angle" },
  { metric: 'Cohérence de la note', before: 'au feeling', beforeSmall: "d'un jour à l'autre", after: 'identique', afterSmall: 'algo déterministe' },
];

/* === Architecture technique (moteur hybride) === */
const ARCH_STAGES = [
  { title: 'Collecte', tools: 'Crawl automatisé (navigateur headless)' },
  { title: 'Lecture', tools: 'IA (Claude Haiku), signaux structurés' },
  { title: 'Scoring', tools: 'Algorithme déterministe, score /100 + tier' },
  { title: 'Écriture', tools: 'CRM Airtable : fiche, explication, angle' },
  { title: 'Orchestration', tools: 'Déclenchement hebdomadaire automatique' },
  { title: 'Playground', tools: 'Tester une URL et voir son score en direct' },
];
const ARCH_STACK = ['Crawl headless', 'Claude Haiku', 'Algo de scoring', 'Airtable', 'Serverless', 'Playground web'];

/* === Bénéfices === */
const BENEFITS = [
  {
    title: 'Une prospection concentrée sur les bons prospects',
    body: "Fini le volume au hasard. Le moteur écarte tout de suite le hors-cible et met les meilleurs en haut de la pile.",
  },
  {
    title: 'Un score qui explique pourquoi',
    body: "Le commercial ne reçoit pas juste une note : il reçoit les signaux qui la justifient et l'angle à jouer. Il sait quoi dire avant d'appeler.",
  },
  {
    title: 'Un coût quasi nul qui passe à l\'échelle',
    body: "Un centime par prospect analysé. Que tu en notes 200 ou 2 000, la mécanique tient sans exploser le budget.",
  },
  {
    title: 'Un CRM prêt à l\'emploi',
    body: "Chaque entreprise arrive triée, expliquée, avec son décideur et son angle. Le commercial ouvre la fiche, tout est déjà là.",
  },
];

/* === FAQ === */
const FAQS = [
  {
    q: "Les chiffres de coût sont-ils réels ?",
    a: "Oui. Ils viennent des coûts réels des outils utilisés : le passage sur un site est gratuit (auto-hébergé), la lecture par l'IA coûte environ 1 centime par prospect, et seuls les meilleurs prospects sont enrichis (coordonnées) pour environ 0,70 € pièce. À l'échelle, ça donne autour de 23 € par mois pour 200 prospects qualifiés.",
  },
  {
    q: "Comment l'IA note sans se contredire ?",
    a: "Justement, l'IA ne note pas. Elle lit le site et décrit les signaux en clair (avec les preuves). C'est un algorithme déterministe qui transforme ces signaux en score. Résultat : deux fois le même site donnent deux fois le même score. L'IA lit comme ton meilleur commercial, l'algo note toujours pareil.",
  },
  {
    q: "Ça marche dans mon secteur ?",
    a: "Le moteur ne cible pas par secteur. Il lit des signaux présents sur n'importe quel site : de l'audience, une intention de conversion, une valeur par client, un potentiel gâché. On le calibre sur ta définition du bon client, quel que soit ton marché.",
  },
  {
    q: "En quoi c'est mieux qu'une liste de prospects achetée ?",
    a: "Une liste te donne des noms, pas une priorité. Le moteur te dit qui vaut le coup, pourquoi, et quoi dire. Tu passes de « 2 000 contacts à traiter » à « voici les 30 à appeler cette semaine, et l'angle pour chacun ».",
  },
  {
    q: "Combien de temps pour le mettre en place ?",
    a: "Quelques semaines pour un moteur calibré sur ta cible : on définit ce qu'est un bon client pour toi, on règle le barème sur des exemples, et on branche la sortie sur ton CRM. Ensuite il tourne tout seul, chaque semaine.",
  },
];

const PageNav = () => {
  const [open, setOpen] = useState(false);
  return (
    <>
      <nav className="nav" id="nav">
        <a href="/" className="nav-logo" aria-label="Boom Maker"><Logo /></a>
        <div className="nav-links">
          <div className="nav-dropdown">
            <button type="button" className="nav-dropdown-trigger" aria-haspopup="true">
              Expertises <span className="nav-dropdown-caret">▾</span>
            </button>
            <div className="nav-dropdown-menu" role="menu">
              <a href="/expertises">3 piliers</a>
              <a href="/cas-usage">Cas d'usage</a>
              <a href="/partners">Partenaires</a>
            </div>
          </div>
          <a href="/tarifs">Tarifs</a>
          <a href="/news">News</a>
          <div className="nav-dropdown">
            <button type="button" className="nav-dropdown-trigger" aria-haspopup="true">
              À propos <span className="nav-dropdown-caret">▾</span>
            </button>
            <div className="nav-dropdown-menu" role="menu">
              <a href="/a-propos">BoomMaker</a>
              <a href="/#faq">FAQ</a>
            </div>
          </div>
          <a href="/contact">Contact</a>
        </div>
        <ThemeToggle />
        <a href="/audit-gratuit" className="btn btn-glow nav-cta-desktop">Audit gratuit <ArrowUpRight /></a>
        <button className="nav-burger" aria-label="Menu" aria-expanded={open}
                onClick={() => setOpen((o) => !o)}>
          <span /><span /><span />
        </button>
      </nav>
      <div className={`nav-mobile ${open ? 'open' : ''}`} onClick={() => setOpen(false)}>
        <span className="nav-mobile-group">/ Expertises</span>
        <a href="/expertises">3 piliers</a>
        <a href="/cas-usage">Cas d'usage</a>
        <a href="/partners">Partenaires</a>
        <a href="/tarifs">Tarifs</a>
        <a href="/news">News</a>
        <span className="nav-mobile-group">/ À propos</span>
        <a href="/a-propos">BoomMaker</a>
        <a href="/#faq">FAQ</a>
        <a href="/contact">Contact</a>
        <a href="/audit-gratuit" className="btn btn-glow">Audit gratuit <ArrowUpRight /></a>
      </div>
    </>
  );
};

const PageBreadcrumb = () => (
  <nav className="expertises-breadcrumb" aria-label="Fil d'Ariane">
    <a href="/">Accueil</a>
    <span className="expertises-breadcrumb-sep" aria-hidden="true">/</span>
    <a href="/cas-usage">Cas d'usage</a>
    <span className="expertises-breadcrumb-sep" aria-hidden="true">/</span>
    <span aria-current="page">Cas client : moteur de ciblage IA</span>
  </nav>
);

const ScoreGauge = ({ score }) => {
  const r = 54;
  const C = 2 * Math.PI * r;
  const off = C * (1 - score / 100);
  return (
    <svg viewBox="0 0 140 140" className="sc-gauge-svg" aria-hidden="true">
      <defs>
        <linearGradient id="scGauge" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stopColor="var(--violet)" />
          <stop offset="1" stopColor="var(--cyan)" />
        </linearGradient>
      </defs>
      <circle cx="70" cy="70" r={r} fill="none" stroke="var(--line-strong)" strokeWidth="12" />
      <circle
        cx="70" cy="70" r={r} fill="none" stroke="url(#scGauge)" strokeWidth="12"
        strokeLinecap="round" strokeDasharray={C} strokeDashoffset={off}
        transform="rotate(-90 70 70)"
      />
      <text x="70" y="72" textAnchor="middle" className="sc-gauge-num">{score}</text>
      <text x="70" y="94" textAnchor="middle" className="sc-gauge-sub">/ 100</text>
    </svg>
  );
};

const PageContent = () => {
  useReveal();

  return (
    <div className="scoring-page tarifs-page">
      <PageNav />

      {/* HERO */}
      <article className="audit-hero">
        <div className="container">
          <PageBreadcrumb />
          <span className="eyebrow"><span className="pulse" /> Cas client réel · moteur de ciblage IA</span>
          <h1>
            Une IA qui note chaque prospect <em>avant même de le contacter.</em>
          </h1>
          <p className="lead">
            Un éditeur de logiciel B2B ne pouvait pas cibler par secteur : son client idéal se reconnaît à des signaux, pas à une industrie. On a construit un moteur qui lit n'importe quel site et le note sur son potentiel client, pour concentrer la prospection sur les bonnes entreprises. <strong>Chiffres réels, client anonymisé.</strong>
          </p>
          <div className="sc-hero-kpis">
            {HERO_KPIS.map((k) => (
              <div className="sc-hero-kpi reveal" key={k.value}>
                <div className="sc-hero-kpi-value">{k.value}</div>
                <div className="sc-hero-kpi-label">{k.label}</div>
              </div>
            ))}
          </div>
        </div>
      </article>

      <section className="expertises-content tarifs-content">
        <div className="container">
          <div className="expertises-main">

            {/* === Le moteur en action === */}
            <section className="expertises-cases" id="demo">
              <div className="expertise-eyebrow eyebrow"><span className="pulse" />Le moteur en action</div>
              <h2 className="expertises-cases-title">
                Une URL entre, <em>un score sort.</em>
              </h2>
              <p className="expertises-cases-lead">
                On donne une adresse de site, le moteur renvoie un score, un niveau, les signaux qui le justifient et l'angle à jouer. Voici un exemple de sortie, données anonymisées.
              </p>

              <div className="sc-dash">
                <div className="sc-dash-bar">
                  <div className="sc-dash-dots"><span /><span /><span /></div>
                  <span className="sc-dash-title">Moteur de scoring · exemple de sortie</span>
                  <span className="sc-dash-live">Live</span>
                </div>
                <div className="sc-result">
                  <div className="sc-result-gauge">
                    <ScoreGauge score={82} />
                    <span className="sc-tier sc-tier-or">Or</span>
                  </div>
                  <div className="sc-result-detail">
                    <div className="sc-signals">
                      {SIGNALS.map((s) => (
                        <div key={s.name}>
                          <div className="sc-signal-head">
                            <span className="sc-signal-name">{s.name}</span>
                            <span className="sc-signal-val">{s.val}</span>
                          </div>
                          <div className="sc-signal-track">
                            <div className="sc-signal-fill" style={{ width: s.pct }} />
                          </div>
                        </div>
                      ))}
                    </div>
                    <div className="sc-angle">
                      <span className="sc-angle-label">Angle recommandé</span>
                      <p>
                        Le site attire du monde et propose déjà un devis en ligne, mais les demandes ne sont pas triées. Accroche sur le temps perdu à répondre à des demandes qui ne valent rien.
                      </p>
                    </div>
                  </div>
                </div>
                <p className="sc-dash-note">
                  Exemple de sortie du moteur, données anonymisées. Le score, le niveau et les signaux sont recalculés à chaque analyse. Aucun détail interne de la formule n'est affiché.
                </p>
              </div>
            </section>

            {/* === Le défi === */}
            <section className="expertises-cases">
              <div className="expertise-eyebrow eyebrow"><span className="pulse" />Le problème</div>
              <h2 className="expertises-cases-title">
                Impossible de cibler <em>par secteur.</em>
              </h2>
              <p className="expertises-cases-lead">
                Le produit s'adresse à tous les secteurs : son client idéal ne se définit pas par une industrie, mais par des signaux (de l'audience, une intention de conversion, une vraie valeur par client, un potentiel gâché). Prospecter au hasard, c'est brûler du temps et du budget sur des entreprises qui ne convertiront jamais. Il fallait un moyen de repérer les bons prospects avant de lever le petit doigt.
              </p>
            </section>

            {/* === Le moteur (4 étapes) === */}
            <section className="expertises-cases" id="machine">
              <div className="expertise-eyebrow eyebrow"><span className="pulse" />La solution</div>
              <h2 className="expertises-cases-title">
                4 étapes. <em>L'IA lit, l'algo note.</em>
              </h2>
              <p className="expertises-cases-lead">
                Un moteur hybride : la partie subtile (comprendre un site) est confiée à l'IA, la partie qui doit être stable (donner une note) est confiée à un algorithme. Le meilleur des deux, sans la variabilité de l'un ni la rigidité de l'autre.
              </p>
              <div className="expertises-cases-grid">
                {STEPS.map((s) => (
                  <article className="expertises-case" key={s.tag}>
                    <div className="expertises-case-tag">{s.tag}</div>
                    <h3>{s.title}</h3>
                    <p>{s.body}</p>
                  </article>
                ))}
              </div>
            </section>

            {/* === Architecture technique === */}
            <section className="expertises-cases" id="architecture">
              <div className="expertise-eyebrow eyebrow"><span className="pulse" />Architecture technique</div>
              <h2 className="expertises-cases-title">
                Un moteur hybride, <em>IA + algorithme.</em>
              </h2>
              <p className="expertises-cases-lead">
                La partie subtile (comprendre un site) est confiée à l'IA. La partie qui doit rester stable (donner une note) est confiée à un algorithme déterministe. Le tout tourne en arrière-plan, se déclenche tout seul, et écrit directement dans le CRM.
              </p>
              <div className="arch-flow">
                {ARCH_STAGES.map((s, i) => (
                  <React.Fragment key={s.title}>
                    <div className="arch-stage">
                      <div className="arch-stage-num">{String(i + 1).padStart(2, '0')}</div>
                      <h4>{s.title}</h4>
                      <p>{s.tools}</p>
                    </div>
                    {i < ARCH_STAGES.length - 1 && <div className="arch-arrow" aria-hidden="true">→</div>}
                  </React.Fragment>
                ))}
              </div>
              <div className="arch-stack">
                {ARCH_STACK.map((t) => <span className="arch-chip" key={t}>{t}</span>)}
              </div>
            </section>

            {/* === Avant / Après === */}
            <section className="expertises-cases" id="avant-apres">
              <div className="expertise-eyebrow eyebrow"><span className="pulse" />Les résultats</div>
              <h2 className="expertises-cases-title">
                Avant le moteur, <em>après le moteur.</em>
              </h2>
              <p className="expertises-cases-lead">
                On passe d'une prospection au hasard, chère et fastidieuse, à un ciblage par signaux, quasi gratuit et priorisé. Le commercial ne traite plus une liste : il traite les bons prospects, en premier.
              </p>
              <div className="ba-rows">
                {BEFORE_AFTER.map((r) => (
                  <div className="ba-row" key={r.metric}>
                    <div className="ba-metric">{r.metric}</div>
                    <div className="ba-cell ba-before">
                      <span className="ba-tag">Avant</span>
                      <b>{r.before}</b>
                      <span className="ba-small">{r.beforeSmall}</span>
                    </div>
                    <div className="ba-sep" aria-hidden="true">→</div>
                    <div className="ba-cell ba-after">
                      <span className="ba-tag">Après</span>
                      <b>{r.after}</b>
                      <span className="ba-small">{r.afterSmall}</span>
                    </div>
                  </div>
                ))}
              </div>
            </section>

            {/* === Les coûts === */}
            <section className="expertises-cases" id="cout">
              <div className="expertise-eyebrow eyebrow"><span className="pulse" />Le coût, en vrai</div>
              <h2 className="expertises-cases-title">
                Un prospect qualifié pour <em>un centime.</em>
              </h2>
              <p className="expertises-cases-lead">
                Le moteur tourne sur tout le monde pour presque rien. On ne dépense un peu que là où ça compte : enrichir les coordonnées des meilleurs prospects. Le reste est quasi gratuit.
              </p>
              <div className="sc-costs">
                {COSTS.map((c) => (
                  <div className="sc-cost" key={c.value}>
                    <div className="sc-cost-value">{c.value}</div>
                    <div className="sc-cost-label">{c.label}</div>
                  </div>
                ))}
              </div>
            </section>

            {/* === Résultats KPI === */}
            <section className="expertises-cases" id="resultats">
              <div className="expertise-eyebrow eyebrow"><span className="pulse" />Le bilan</div>
              <h2 className="expertises-cases-title">
                Ce que ça donne, <em>en clair.</em>
              </h2>
              <div className="sc-kpis-grid">
                {RESULT_KPIS.map((k) => (
                  <div className="sc-kpi" key={k.label}>
                    <div className="sc-kpi-value">{k.value}</div>
                    <div className="sc-kpi-label">{k.label}</div>
                  </div>
                ))}
              </div>
            </section>

            {/* === Ce que ça change === */}
            <section className="expertises-cases" id="benefices">
              <div className="expertise-eyebrow eyebrow"><span className="pulse" />Ce que ça change</div>
              <h2 className="expertises-cases-title">
                Moins de volume, <em>plus de justesse.</em>
              </h2>
              <div className="sc-benefits">
                {BENEFITS.map((b) => (
                  <div className="sc-benefit" key={b.title}>
                    <Check />
                    <div>
                      <h3>{b.title}</h3>
                      <p>{b.body}</p>
                    </div>
                  </div>
                ))}
              </div>
            </section>

            {/* === FAQ === */}
            <section className="expertises-faq" id="faq" aria-labelledby="faq-title">
              <div className="expertise-eyebrow eyebrow"><span className="pulse" />Questions fréquentes</div>
              <h2 className="expertises-faq-title" id="faq-title">
                Ce que tu te demandes <em>sûrement.</em>
              </h2>
              <div className="expertises-faq-list">
                {FAQS.map((item, i) => (
                  <details className="expertises-faq-item" key={i}>
                    <summary>
                      <span>{item.q}</span>
                      <span className="expertises-faq-caret" aria-hidden="true">+</span>
                    </summary>
                    <p>{item.a}</p>
                  </details>
                ))}
              </div>
            </section>

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

      {/* === CTA final === */}
      <section className="partners-content partners-content-minimal">
        <div className="container">
          <div className="partners-cta-final">
            <h2>Tu veux <em>noter tes prospects</em> avant de les appeler&nbsp;?</h2>
            <p>30 minutes, gratuit, sans engagement. On regarde ta cible, ce qui fait un bon client chez toi, et comment un moteur de scoring pourrait concentrer ta prospection sur les bonnes entreprises.</p>
            <div className="partners-cta">
              <a href="/audit-gratuit" className="btn btn-glow">Réserver l'audit gratuit <ArrowUpRight /></a>
              <a href="/cas-usage" className="btn btn-ghost">Voir les autres cas <ArrowUpRight /></a>
            </div>
          </div>
        </div>
      </section>

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

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