/* Page /automatisation-prospection-b2b — landing SEO cas d'usage.
 * Cible la requête principale "automatisation prospection b2b" et ses variantes.
 * Réutilise le design system : audit-hero, expertises-cases/case/faq,
 * partners-cta-final. Cas clients synchros avec /expertises#cas. */

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

/* === 5 étapes du pipeline === */
const STEPS = [
  {
    tag: 'Étape 01',
    title: 'Sourcing automatisé',
    body: "Tu décris ton ICP en 1 page (taille d'entreprise, secteur, fonction, signaux d'achat). On configure Sales Navigator + scraper LinkedIn pour ramener 100 à 500 prospects qualifiés par semaine, dédoublonnés contre ta base CRM existante.",
  },
  {
    tag: 'Étape 02',
    title: 'Enrichissement multi-sources',
    body: "Chaque prospect est enrichi automatiquement : email pro vérifié (Hunter, Anymail), téléphone (Cognism, Apollo), contexte entreprise (effectif, levée de fonds, croissance), 3 derniers posts LinkedIn. Tu n'achètes que les data dont tu as besoin.",
  },
  {
    tag: 'Étape 03',
    title: 'Scoring IA (0 à 100)',
    body: "Claude ou GPT lit chaque profil enrichi et le note selon ton profil idéal de client. Les leads chauds (> 70) sont priorisés. Les profils hors cible sont écartés automatiquement. Tu ne perds plus de temps à trier 200 prospects à la main.",
  },
  {
    tag: 'Étape 04',
    title: 'Séquences multicanal',
    body: "Email + LinkedIn + relances orchestrés par Emelia, Lemlist ou Heyreach selon ton stack. Les messages sont personnalisés à partir des données enrichies (pas juste \"{prénom}\", mais une vraie accroche contextuelle générée par IA). 5 à 7 touches sur 3 semaines.",
  },
  {
    tag: 'Étape 05',
    title: 'Push CRM avec briefing IA',
    body: "Dès qu'un prospect répond positivement, il bascule dans ton CRM (HubSpot, Pipedrive, Sellsy) avec un briefing pré-rédigé : qui il est, son entreprise, ce qu'il a répondu, suggestion d'angle commercial. Ton commercial appelle, il a tout le contexte.",
  },
];

/* === Stack outils orchestrés === */
const STACK = [
  {
    label: 'Sourcing',
    items: ['Sales Navigator', 'Phantombuster', 'Evaboot', 'Skrapp'],
  },
  {
    label: 'Enrichissement',
    items: ['Apollo', 'Cognism', 'Hunter', 'Dropcontact', 'Lusha'],
  },
  {
    label: 'IA & scoring',
    items: ['Claude', 'GPT-4', 'Mistral', 'Perplexity'],
  },
  {
    label: 'Envoi multicanal',
    items: ['Emelia', 'Lemlist', 'Heyreach', 'La Growth Machine'],
  },
  {
    label: 'CRM cible',
    items: ['HubSpot', 'Pipedrive', 'Sellsy', 'Salesforce', 'Attio'],
  },
  {
    label: 'Orchestration',
    items: ['Make', 'n8n', 'Airtable', 'Notion'],
  },
];

/* === Cas clients (synchro avec /expertises#cas et /tarifs#cas) === */
const CASES = [
  {
    sector: 'Enseigne nationale de restauration',
    title: 'Recrutement de franchisés',
    body: "4 scénarios Make connectés à Emelia + Airtable + Perplexity + Claude + CRM franchise. Briefing IA automatique sur chaque réponse prospect pour que le commercial ait le contexte avant même de rappeler.",
    bullets: [
      'Funnel 10 étapes visible dans un dashboard Softr',
      'Dédoublonnage propre LinkedIn (par URL profil) + Email',
      'Sentiment des prospects + KPIs hebdo en lecture seule',
    ],
    tag: 'Make + Emelia + Cerca',
  },
  {
    sector: 'SaaS B2B (formation pro)',
    title: 'Cold outbound multi-personas',
    body: "Plateforme IA pour la formation pro. Cible segmentée en 3 personas (fondateurs TPE, marketing/growth, ops/admissions), chacun avec son angle de message : douleur perso, douleur funnel, douleur ops.",
    bullets: [
      'Sourcing data sur codes industrie spécifiques (NAF)',
      'Classification automatique par regex sur titres et entreprises',
      'Séquence dédiée par persona dans Emelia',
    ],
    tag: 'Claude + Emelia + Regex',
  },
  {
    sector: 'Média B2C grande audience',
    title: 'Monétisation annonceurs',
    body: "Média grand public (centaines de milliers de lectrices/mois), prospection d'annonceurs B2B. Script Python qui prend les CSV Sales Nav bruts, classifie en 4 ICP sectoriels, dédoublonne, exclut les clients existants.",
    bullets: [
      "4 ICP sectoriels avec leur propre séquence email",
      "Pluriels + word boundaries + override marketing dans la regex",
      "Sortie JSON Airtable + CSV Emelia, prêtes à importer",
    ],
    tag: 'Python + Airtable + Emelia',
  },
];

/* === KPIs moyens === */
const KPIS = [
  { value: '×10', label: "Volume d'emails envoyés par semaine vs prospection manuelle" },
  { value: '55%', label: "Taux d'ouverture moyen sur nos séquences enrichies" },
  { value: '7%', label: "Taux de réponse moyen (positif + négatif) sur nos campagnes" },
  { value: '15+', label: "RDV qualifiés mensuels après stabilisation du pipeline" },
  { value: '12h', label: "Récupérées chaque semaine sur le commercial / fondateur" },
];

/* === FAQ === */
const FAQS = [
  {
    q: "Combien de temps avant de voir les premiers RDV ?",
    a: "Le pipeline est opérationnel en 2 à 4 semaines selon la complexité de ton ICP. Les premiers messages partent dès la semaine 2. Les premières réponses positives arrivent généralement entre J+7 et J+14 du premier envoi. Compte 6 à 8 semaines pour atteindre un rythme stable de 10-15 RDV qualifiés par mois.",
  },
  {
    q: "Comment vous évitez que mon domaine soit blacklisté ?",
    a: "On configure des domaines secondaires (boommaker.cold au lieu de boommaker.io), un warmup progressif sur 2 à 3 semaines, des limites strictes (50 à 80 emails par jour par boîte au début), et un monitoring continu de la délivrabilité (SPF, DKIM, DMARC, MX). Ton domaine principal n'est jamais utilisé pour le cold.",
  },
  {
    q: "C'est RGPD-compatible ?",
    a: "Oui. On respecte le consentement présumé B2B (article 21 RGPD), avec mention claire de la source de prospection dans le footer email, lien de désinscription en 1 clic, et purge automatique des prospects qui demandent à ne plus être contactés. Toutes les data sont stockées sur tes outils, pas chez nous.",
  },
  {
    q: "Et si mon ICP est très niche ?",
    a: "C'est même un avantage. Plus l'ICP est précis, plus le scoring IA est efficace, plus les messages sont personnalisés, plus le taux de réponse est élevé. Nos meilleurs résultats sont sur des verticales pointues (ex: directeurs financiers de cabinets comptables 5-15 salariés en région).",
  },
  {
    q: "Quels CRM vous intégrez ?",
    a: "HubSpot, Pipedrive, Sellsy, Salesforce, Attio, monday Sales CRM, Airtable, Notion. Si ton CRM a une API ou un webhook (ce qui est le cas de 95% du marché), on s'y connecte. On évite seulement les CRM en SaaS fermé qui n'exposent rien.",
  },
  {
    q: "Vous travaillez avec quels outils de séquences ?",
    a: "Emelia (français, excellent rapport qualité/prix), Lemlist (richesse fonctionnelle), Heyreach (LinkedIn pur), La Growth Machine (multicanal). On choisit ensemble selon ton volume cible, ton budget, et ton stack existant. Pas de revendeur, pas d'affiliation cachée.",
  },
  {
    q: "Est-ce que mes commerciaux gardent du travail ?",
    a: "Oui et c'est tout l'intérêt. Le pipeline élimine 80% du travail mécanique (sourcing, enrichissement, copier-coller, premières relances), pour libérer du temps sur les 20% à haute valeur (l'appel, la démo, la négo, le closing). Tes commerciaux passent de prospecteurs à closers.",
  },
  {
    q: "Combien ça coûte ?",
    a: "Le setup démarre à 490€ (format Sprint, une automatisation prête en 2 semaines) jusqu'à plusieurs milliers d'euros pour un pipeline multi-personas complet (format Studio). Le coût des outils tiers (Sales Nav, Emelia, Apollo) est entre 200€ et 800€ par mois selon le volume. Détails sur la page tarifs.",
  },
  {
    q: "Et si ça ne marche pas pour moi ?",
    a: "Avant de déployer, on calcule ensemble combien le pipeline va te faire gagner (en RDV pris ou en heures économisées). Si l'amortissement dépasse 90 jours, on ne déploie pas et on ne facture rien. Si après déploiement le ROI 90 jours n'est pas tenu, on rembourse ou on continue gratuitement jusqu'à y arriver.",
  },
];

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">Prospection B2B automatisée</span>
  </nav>
);

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

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

      {/* HERO */}
      <article className="audit-hero">
        <div className="container">
          <PageBreadcrumb />
          <span className="eyebrow"><span className="pulse" /> Prospection B2B · automatisation clé en main</span>
          <h1>
            Automatisation prospection B2B : <em>pipeline 24/7</em> sans recruter de commerciaux.
          </h1>
          <p className="lead">
            Sales Navigator, scoring IA, séquences multicanal Email + LinkedIn, push CRM. Le tout connecté, automatisé, qui tourne 24h/24. Tes commerciaux reçoivent uniquement les leads chauds avec un briefing pré-rédigé. <strong>ROI sous 90 jours, sinon on ne déploie pas.</strong>
          </p>
        </div>
      </article>

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

            {/* === Problème === */}
            <section className="expertises-cases">
              <div className="expertise-eyebrow eyebrow"><span className="pulse" />Le problème qu'on résout</div>
              <h2 className="expertises-cases-title">
                Tes commerciaux passent <em>60% de leur temps</em> à sourcer, pas à vendre.
              </h2>
              <p className="expertises-cases-lead">
                Copier-coller Sales Nav vers CRM. Chercher des emails à la main. Rédiger 30 messages personnalisés par jour. Oublier les relances. Mettre à jour les statuts. Résultat : 3 RDV par semaine au mieux, et l'impression de courir après sa queue. Et si ton commercial démissionne, tout ton pipeline part avec lui.
              </p>
            </section>

            {/* === Les 5 étapes du pipeline === */}
            <section className="expertises-cases" id="comment">
              <div className="expertise-eyebrow eyebrow"><span className="pulse" />Comment ça marche</div>
              <h2 className="expertises-cases-title">
                5 étapes. <em>Un seul pipeline.</em> Zéro intervention manuelle.
              </h2>
              <p className="expertises-cases-lead">
                Du sourcing à la prise de RDV, chaque étape est orchestrée par Make ou n8n. Tes commerciaux n'interviennent qu'à la fin, sur les leads chauds, avec tout le contexte déjà préparé par l'IA.
              </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>

            {/* === Stack === */}
            <section className="expertises-cases" id="stack">
              <div className="expertise-eyebrow eyebrow"><span className="pulse" />Stack qu'on intègre</div>
              <h2 className="expertises-cases-title">
                On orchestre <em>tes outils</em>, on n'en ajoute pas.
              </h2>
              <p className="expertises-cases-lead">
                Si tu as déjà HubSpot, Sales Nav et Lemlist, on connecte. Si tu pars de zéro, on choisit ensemble la combinaison la plus simple pour ton volume. Pas de revendeur, pas d'affiliation cachée, pas de stack que tu paies en double.
              </p>
              <div className="prospection-stack-grid">
                {STACK.map((s) => (
                  <div className="prospection-stack-group" key={s.label}>
                    <div className="prospection-stack-label">{s.label}</div>
                    <ul>
                      {s.items.map((it) => <li key={it}>{it}</li>)}
                    </ul>
                  </div>
                ))}
              </div>
            </section>

            {/* === Cas clients === */}
            <section className="expertises-cases" id="cas">
              <div className="expertise-eyebrow eyebrow"><span className="pulse" />Cas livrés et en production</div>
              <h2 className="expertises-cases-title">
                3 pipelines en prod. <em>Vraies données.</em>
              </h2>
              <p className="expertises-cases-lead">
                Trois clients, trois ICP très différents, trois stacks différents. Même méthodo, mêmes résultats. On peut te montrer les blueprints Make, les dashboards Softr, les briefings IA générés, tout est documenté.
              </p>
              <div className="expertises-cases-grid">
                {CASES.map((c) => (
                  <article className="expertises-case" key={c.title}>
                    <div className="expertises-case-tag">{c.tag}</div>
                    <span className="expertises-case-sector">{c.sector}</span>
                    <h3>{c.title}</h3>
                    <p>{c.body}</p>
                    <ul>
                      {c.bullets.map((b) => (
                        <li key={b}><Check /> {b}</li>
                      ))}
                    </ul>
                  </article>
                ))}
              </div>
            </section>

            {/* === KPIs === */}
            <section className="expertises-cases" id="resultats">
              <div className="expertise-eyebrow eyebrow"><span className="pulse" />Résultats moyens</div>
              <h2 className="expertises-cases-title">
                Les <em>chiffres</em> qu'on défend.
              </h2>
              <div className="prospection-kpis-grid">
                {KPIS.map((k) => (
                  <div className="prospection-kpi" key={k.label}>
                    <div className="prospection-kpi-value">{k.value}</div>
                    <div className="prospection-kpi-label">{k.label}</div>
                  </div>
                ))}
              </div>
              <p className="expertises-cases-lead" style={{ marginTop: '24px' }}>
                Moyennes sur les pipelines en production fin 2025 et 2026. Variabilité forte selon la qualité de l'ICP, la maturité du marché, et la rigueur du commercial sur les leads chauds. On chiffre TON cas précis lors de l'audit gratuit.
              </p>
            </section>

            {/* === FAQ === */}
            <section className="expertises-faq" id="faq" aria-labelledby="faq-title">
              <div className="expertise-eyebrow eyebrow"><span className="pulse" />Questions fréquentes · Prospection B2B</div>
              <h2 className="expertises-faq-title" id="faq-title">
                Ce qu'on nous demande <em>tout le temps.</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 qu'on chiffre <em>ton cas</em>&nbsp;?</h2>
            <p>30 minutes, gratuit, sans engagement. On regarde ton ICP, ton stack, ton volume actuel. À la fin de l'appel, tu repars avec un chiffrage clair : combien de RDV par mois tu peux espérer, à 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="/tarifs" className="btn btn-ghost">Voir les tarifs <ArrowUpRight /></a>
            </div>
          </div>
        </div>
      </section>

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

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