/* Page /cas-client-recrutement-franchise — étude de cas client anonymisée.
 * Chiffres RÉELS extraits du reporting client (snapshot juillet 2026).
 * Client masqué (secteur + nom), visuels dashboard reconstruits aux couleurs BoomMaker.
 * Réutilise le design system partagé (audit-hero, expertises-cases, partners-cta-final). */

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

/* === 3 chiffres forts (bandeau héro) === */
const HERO_KPIS = [
  { value: '41%', label: 'de réponse sur les invitations LinkedIn acceptées (14,4% sur tout l\'envoi)' },
  { value: '126', label: 'conversations qualifiées générées avec des prospects' },
  { value: '117', label: 'candidats injectés automatiquement dans le CRM, avec briefing IA' },
];

/* === Les 4 briques de la machine === */
const BRICKS = [
  {
    tag: 'Brique 01',
    title: 'Sourcing + enrichissement',
    body: "On identifie les bons profils cibles, puis chaque contact est enrichi automatiquement avec ses données légales officielles (société, dirigeant, ancienneté, localisation). 774 fiches enrichies sans une seule saisie manuelle.",
  },
  {
    tag: 'Brique 02',
    title: 'Rédaction personnalisée par IA',
    body: "L'IA lit chaque fiche et rédige un message sur-mesure, avec une vraie accroche contextuelle (pas juste le prénom). 1 225 messages uniques rédigés, répartis entre LinkedIn et email selon le meilleur canal pour chaque contact.",
  },
  {
    tag: 'Brique 03',
    title: 'Envoi multicanal orchestré',
    body: "Séquences LinkedIn et email envoyées et relancées automatiquement, dans les limites de sécurité qui protègent les comptes. Le prospect reçoit le bon message, au bon moment, sur le bon canal.",
  },
  {
    tag: 'Brique 04',
    title: 'Remontée CRM avec briefing IA',
    body: "Dès qu'un prospect répond, il atterrit dans le CRM du client avec un briefing pré-rédigé (qui il est, sa situation, ce qu'il a dit) et un tri automatique du sentiment. Le commercial ouvre la fiche, il a déjà tout le contexte.",
  },
];

/* === Amont (mini-stats du dashboard) === */
const AMONT = [
  { value: '1 394', label: 'prospects sourcés et structurés' },
  { value: '774', label: 'enrichis via données légales' },
  { value: '1 225', label: 'messages rédigés par l\'IA' },
];

/* === Funnel LinkedIn (barres proportionnelles au sommet du funnel) === */
const LK_FUNNEL = [
  { label: 'Invitations envoyées', value: '625', pct: '100%', note: 'point de départ' },
  { label: 'Invitations acceptées', value: '220', pct: '35%', note: '35% d\'acceptation' },
  { label: 'Réponses obtenues', value: '90', pct: '14.4%', note: '41% des personnes connectées' },
];

/* === Cartes email === */
const EMAIL_CARDS = [
  { value: '889', unit: '', label: 'emails envoyés' },
  { value: '429', unit: '48%', label: 'ouvertures' },
  { value: '45', unit: '', label: 'clics sur les liens' },
  { value: '36', unit: '', label: 'réponses reçues' },
];

/* === Pipeline CRM (étapes, candidats actifs) === */
const CRM_PIPE = [
  { n: '00', name: 'Pré-qualification', count: 41, pct: '100%' },
  { n: '01', name: 'Accueil du candidat', count: 6, pct: '15%' },
  { n: '02', name: 'Accord de confidentialité signé', count: 2, pct: '5%' },
  { n: '03', name: 'Rendez-vous en visio', count: 2, pct: '5%' },
];

/* === Sentiment (répartition des 117 candidats) === */
const SENTIMENT = [
  { key: 1, name: 'Intéressés', count: 22, pct: 18.8 },
  { key: 2, name: 'Avec questions', count: 16, pct: 13.7 },
  { key: 3, name: 'Neutres', count: 29, pct: 24.8 },
  { key: 4, name: 'Pas intéressés', count: 50, pct: 42.7 },
];

/* === Parcours de recrutement franchise (cycle long, étapes à venir) === */
const JOURNEY = [
  { name: 'Pré-qualification', count: '41', done: true },
  { name: 'Accueil du candidat', count: '6', done: true },
  { name: 'Confidentialité signée', count: '2', done: true },
  { name: 'Rendez-vous en visio', count: '2', done: true },
  { name: 'Immersion sur le terrain', count: 'À venir', done: false },
  { name: 'Constitution du dossier', count: 'À venir', done: false },
  { name: 'Validation par l\'enseigne', count: 'À venir', done: false },
  { name: 'Signature', count: 'À venir', done: false },
];

/* === Avant / Après (chiffres réels côté "après", jamais inventés côté "avant") === */
const BEFORE_AFTER = [
  { metric: 'Taux de réponse LinkedIn', before: '1 à 3%', beforeSmall: 'cold classique', after: '14,4%', afterSmall: '41% des connectés' },
  { metric: 'Messages personnalisés', before: 'à la main', beforeSmall: 'un par un', after: '1 225', afterSmall: "rédigés par l'IA" },
  { metric: 'Suivi des candidats', before: '0', beforeSmall: 'éparpillé, non tracé', after: '117', afterSmall: 'dans le CRM, avec briefing' },
  { metric: 'Saisie manuelle', before: '100%', beforeSmall: 'chronophage', after: '0%', afterSmall: 'la chaîne tourne seule' },
];

/* === Architecture technique (stack orchestrée) === */
const ARCH_STAGES = [
  { title: 'Sourcing', tools: "Sales Navigator, ciblage précis de l'ICP" },
  { title: 'Enrichissement', tools: 'Données légales officielles (SIRENE)' },
  { title: 'Rédaction IA', tools: 'Claude + Perplexity, message sur-mesure' },
  { title: 'Envoi multicanal', tools: 'Emelia, séquences LinkedIn + email' },
  { title: 'Orchestration', tools: 'Make, scénarios connectés de bout en bout' },
  { title: 'CRM + briefing', tools: 'Remontée auto, briefing et tri par IA' },
];
const ARCH_STACK = ['Sales Navigator', 'Make', 'Emelia', 'Claude', 'Perplexity', 'Airtable', 'CRM de recrutement'];

/* === KPI de résultats (grille finale) === */
const RESULT_KPIS = [
  { value: '126', label: 'conversations qualifiées générées sur la période' },
  { value: '117', label: 'candidats créés dans le CRM, chacun avec un briefing IA' },
  { value: '38', label: 'candidats chauds (intéressés ou avec questions concrètes)' },
  { value: '41%', label: 'de réponse sur les invitations LinkedIn acceptées (14,4% sur tout l\'envoi)' },
  { value: '48%', label: 'de taux d\'ouverture sur les emails de la campagne' },
  { value: '0', label: 'saisie manuelle : la chaîne tourne de bout en bout, seule' },
];

/* === Bénéfices (ce que ça change) === */
const BENEFITS = [
  {
    title: 'Un pipeline qui tourne sans personne aux commandes',
    body: "Sourcing, rédaction, envoi, relances, remontée CRM : tout est automatisé. L'équipe ne touche que les prospects qui ont répondu.",
  },
  {
    title: 'Le commercial gagne du temps sur chaque réponse',
    body: "Plus besoin de fouiller pour comprendre qui est le prospect. Le briefing IA est déjà dans la fiche, avec l'angle à jouer.",
  },
  {
    title: 'Un tri automatique des prospects chauds',
    body: "Chaque réponse est classée par sentiment. Le commercial voit d'un coup d'oeil les 38 candidats à rappeler en priorité.",
  },
  {
    title: 'Un reporting client transparent, mis à jour tout seul',
    body: "Le client suit ses chiffres en lecture seule, rafraîchis chaque jour. Zéro export à faire, zéro tableau à tenir à la main.",
  },
];

/* === FAQ === */
const FAQS = [
  {
    q: "Les chiffres de ce cas sont-ils réels ?",
    a: "Oui, à 100%. Tous les chiffres viennent du dashboard de reporting du client, extraits en juillet 2026. On n'a rien arrondi à la hausse. Seuls le nom et le secteur du client ont été masqués pour respecter la confidentialité.",
  },
  {
    q: "Pourquoi le client est-il anonyme ?",
    a: "Par respect de la confidentialité commerciale. On partage la méthode et les résultats, pas l'identité. Si tu veux une vraie référence qui parle de son expérience, on peut te mettre en relation en visio, après un premier échange.",
  },
  {
    q: "Un taux de réponse de 40% sur LinkedIn, c'est possible chez moi ?",
    a: "Ce 41% est calculé sur les personnes qui ont accepté l'invitation (14,4% sur l'ensemble des invitations envoyées). Ça dépend surtout de la précision de ta cible et de la qualité des messages : ici, le levier n'est pas le volume mais la pertinence, chaque message étant rédigé sur-mesure à partir des données enrichies. Plus ta cible est précise, plus ce taux monte.",
  },
  {
    q: "Combien de temps pour mettre ça en place ?",
    a: "La machine complète (sourcing, IA, envoi, CRM) se déploie en 2 à 4 semaines selon la complexité de ta cible et de ton CRM. Les premiers messages partent dès la deuxième semaine, les premières réponses suivent dans la foulée.",
  },
  {
    q: "Est-ce que ça marche dans mon secteur ?",
    a: "La mécanique est la même quel que soit le secteur : cibler, enrichir, personnaliser, envoyer, faire remonter dans le CRM. Ce cas concerne un réseau qui recrute des partenaires, mais on l'a aussi déployé pour vendre du SaaS ou prospecter des annonceurs. On chiffre ton cas précis lors de l'audit gratuit.",
  },
];

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="/plan-de-ciblage">Plan de ciblage</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="/plan-de-ciblage">Plan de ciblage</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 : recrutement de partenaires</span>
  </nav>
);

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

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

      {/* HERO */}
      <article className="audit-hero">
        <div className="container">
          <PageBreadcrumb />
          <span className="eyebrow"><span className="pulse" /> Cas client réel · campagne toujours en cours</span>
          <h1>
            126 conversations et 117 candidats générés, <em>sans lever le petit doigt.</em>
          </h1>
          <p className="lead">
            Un réseau de franchise national voulait recruter de nouveaux partenaires sans y passer ses journées. On a construit une machine de prospection qui source, rédige, envoie et fait remonter chaque réponse dans le CRM, toute seule. <strong>Voici les vrais chiffres, client anonymisé.</strong> Campagne lancée en mai 2026, données arrêtées au 19 juillet, et les compteurs continuent de monter.
          </p>
          <div className="cc-hero-kpis">
            {HERO_KPIS.map((k) => (
              <div className="cc-hero-kpi reveal" key={k.value}>
                <div className="cc-hero-kpi-value">{k.value}</div>
                <div className="cc-hero-kpi-label">{k.label}</div>
              </div>
            ))}
          </div>
        </div>
      </article>

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

            {/* === Le dashboard recréé (chiffres réels) === */}
            <section className="expertises-cases" id="chiffres">
              <div className="expertise-eyebrow eyebrow"><span className="pulse" />Les vrais chiffres</div>
              <h2 className="expertises-cases-title">
                Le reporting du client, <em>chiffres réels.</em>
              </h2>
              <p className="expertises-cases-lead">
                Voici les données extraites du dashboard de suivi, reconstruites ici sans aucun élément identifiant. Ce sont les chiffres bruts de la campagne, non retouchés, arrêtés au 19 juillet 2026. La campagne est toujours active : ces compteurs continuent de monter.
              </p>

              <div className="cc-dash">
                <div className="cc-dash-bar">
                  <div className="cc-dash-dots"><span /><span /><span /></div>
                  <span className="cc-dash-title">Reporting BoomMaker · accès client, lecture seule</span>
                  <span className="cc-dash-live">Live</span>
                </div>
                <div className="cc-dash-body">
                  <div className="cc-grid">

                    {/* Amont */}
                    <div className="cc-block cc-grid-full">
                      <div className="cc-block-eyebrow">Amont · sourcing et rédaction</div>
                      <div className="cc-block-title">Ce que la machine a préparé, toute seule</div>
                      <div className="cc-mini-grid">
                        {AMONT.map((m) => (
                          <div className="cc-mini" key={m.label}>
                            <div className="cc-mini-value">{m.value}</div>
                            <div className="cc-mini-label">{m.label}</div>
                          </div>
                        ))}
                      </div>
                    </div>

                    {/* Funnel LinkedIn */}
                    <div className="cc-block">
                      <div className="cc-block-eyebrow">Canal LinkedIn</div>
                      <div className="cc-block-title">Du premier contact à la réponse</div>
                      <div className="cc-funnel">
                        {LK_FUNNEL.map((r) => (
                          <div className="cc-funnel-row" key={r.label}>
                            <div className="cc-funnel-head">
                              <span className="cc-funnel-label">{r.label}</span>
                              <span className="cc-funnel-val">{r.value}</span>
                            </div>
                            <div className="cc-funnel-track">
                              <div className="cc-funnel-fill" style={{ width: r.pct }}>
                                <span>{r.note}</span>
                              </div>
                            </div>
                          </div>
                        ))}
                      </div>
                    </div>

                    {/* Cartes email */}
                    <div className="cc-block">
                      <div className="cc-block-eyebrow">Canal Email</div>
                      <div className="cc-block-title">La campagne email en parallèle</div>
                      <div className="cc-cards">
                        {EMAIL_CARDS.map((c) => (
                          <div className="cc-card" key={c.label}>
                            <div className="cc-card-value">{c.value}{c.unit && <em>{c.unit}</em>}</div>
                            <div className="cc-card-label">{c.label}</div>
                          </div>
                        ))}
                      </div>
                    </div>

                    {/* Pipeline CRM */}
                    <div className="cc-block">
                      <div className="cc-block-eyebrow">CRM · pipeline de recrutement</div>
                      <div className="cc-block-title">Les candidats qui avancent</div>
                      <div className="cc-pipe">
                        {CRM_PIPE.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.count}</span>
                            <span className="cc-pipe-bar"><span style={{ width: s.pct }} /></span>
                          </div>
                        ))}
                      </div>
                    </div>

                    {/* Sentiment */}
                    <div className="cc-block">
                      <div className="cc-block-eyebrow">CRM · tri automatique par IA</div>
                      <div className="cc-block-title">117 candidats, classés par sentiment</div>
                      <div className="cc-sent-bar">
                        {SENTIMENT.map((s) => (
                          <div className={`cc-seg cc-seg-${s.key}`} style={{ width: s.pct + '%' }} key={s.key}>
                            <span>{s.count}</span>
                          </div>
                        ))}
                      </div>
                      <div className="cc-sent-legend">
                        {SENTIMENT.map((s) => (
                          <div key={s.key}>
                            <i className={`cc-seg-${s.key}`} />
                            {s.name} : {s.count}
                          </div>
                        ))}
                      </div>
                    </div>

                  </div>
                  <p className="cc-dash-note">
                    Snapshot au 19 juillet 2026, campagne toujours en cours (lancée en mai 2026), sur une campagne LinkedIn et une campagne email menées en parallèle. Client, secteur et marque masqués. Visuels reconstruits à partir des données brutes du reporting.
                  </p>
                </div>
              </div>
            </section>

            {/* === Le problème === */}
            <section className="expertises-cases">
              <div className="expertise-eyebrow eyebrow"><span className="pulse" />Le problème</div>
              <h2 className="expertises-cases-title">
                Recruter des partenaires, <em>un par un, à la main.</em>
              </h2>
              <p className="expertises-cases-lead">
                Le client cherchait à développer son réseau. Le recrutement se faisait au fil de l'eau : chercher des profils sur LinkedIn, les contacter à la main, oublier des relances, perdre le fil des échanges, sans vue d'ensemble sur ce qui avançait vraiment. Chronophage, difficile à suivre, impossible à passer à l'échelle. L'objectif : un flux régulier de candidats qualifiés, sans monopoliser une personne à temps plein.
              </p>
            </section>

            {/* === La solution === */}
            <section className="expertises-cases" id="machine">
              <div className="expertise-eyebrow eyebrow"><span className="pulse" />La solution</div>
              <h2 className="expertises-cases-title">
                4 briques. <em>Une seule machine.</em> Aucune intervention manuelle.
              </h2>
              <p className="expertises-cases-lead">
                Une machine de prospection B2B automatisée, multicanal (LinkedIn et cold email). Du sourcing au CRM, chaque étape s'enchaîne toute seule. L'équipe du client n'intervient qu'à la toute fin, sur les prospects qui ont répondu, avec le contexte déjà préparé par l'IA.
              </p>
              <div className="expertises-cases-grid">
                {BRICKS.map((b) => (
                  <article className="expertises-case" key={b.tag}>
                    <div className="expertises-case-tag">{b.tag}</div>
                    <h3>{b.title}</h3>
                    <p>{b.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">
                La stack, <em>de bout en bout.</em>
              </h2>
              <p className="expertises-cases-lead">
                Aucune techno maison exotique : on orchestre des outils éprouvés pour que le sourcing, l'enrichissement de données, la rédaction par IA, l'envoi multicanal (LinkedIn et cold email) et la remontée CRM s'enchaînent sans intervention manuelle.
              </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 BoomMaker, <em>après BoomMaker.</em>
              </h2>
              <p className="expertises-cases-lead">
                Le même objectif, recruter des franchisés, mais deux mondes. Avant : tout à la main, lent, sans suivi. Après : une machine de prospection automatisée qui tourne toute seule.
              </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>

            {/* === Le pipeline en cours (conversion) === */}
            <section className="expertises-cases" id="pipeline">
              <div className="expertise-eyebrow eyebrow"><span className="pulse" />La conversion, expliquée</div>
              <h2 className="expertises-cases-title">
                Un pipeline <em>vivant,</em> qui avance chaque semaine.
              </h2>
              <p className="expertises-cases-lead">
                Recruter un franchisé, ce n'est pas un achat en ligne. C'est un cycle long, souvent plusieurs mois, avec des étapes de confiance à franchir une à une : premier échange, accord de confidentialité, rencontre en visio, journée d'immersion sur le terrain, constitution du dossier, validation par l'enseigne, puis signature.
              </p>
              <p className="expertises-cases-lead">
                La campagne ne tourne que depuis mai 2026. En quelques semaines, elle a déjà rempli le haut du tunnel : 117 candidats entrés dans le CRM, 41 en pré-qualification, et les premiers qui avancent (accueil, confidentialité signée, visio). 38 sont déjà repérés comme chauds et priorisés pour l'équipe.
              </p>
              <div className="cc-journey">
                {JOURNEY.map((s, i) => (
                  <div className={`cc-journey-step ${s.done ? '' : 'future'}`} key={s.name}>
                    <div className="cc-journey-badge">Étape {String(i + 1).padStart(2, '0')}</div>
                    <div className="cc-journey-count">{s.count}</div>
                    <div className="cc-journey-name">{s.name}</div>
                  </div>
                ))}
              </div>
              <p className="expertises-cases-lead" style={{ marginTop: '22px' }}>
                C'est tout l'intérêt de la machine : elle remplit le pipeline en continu et fait avancer chaque candidat avec son contexte complet. Les immersions, les dossiers et les signatures se jouent sur les mois qui viennent. Le tunnel est plein, il ne demande qu'à se dérouler.
              </p>
            </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 a donné, <em>en clair.</em>
              </h2>
              <div className="cc-kpis-grid">
                {RESULT_KPIS.map((k) => (
                  <div className="cc-kpi" key={k.label}>
                    <div className="cc-kpi-value">{k.value}</div>
                    <div className="cc-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 au quotidien</div>
              <h2 className="expertises-cases-title">
                Au-delà des chiffres, <em>le confort.</em>
              </h2>
              <div className="cc-benefits">
                {BENEFITS.map((b) => (
                  <div className="cc-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>la même machine</em> pour ta prospection&nbsp;?</h2>
            <p>30 minutes, gratuit, sans engagement. On regarde ta cible, ton CRM, ton volume actuel. Tu repars avec un chiffrage clair : combien de conversations par mois tu peux viser, à quel coût, en combien de semaines.</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 />);