/* Page /simulateur-prospection — outil interactif de simulation du ROI de la
 * prospection. Le visiteur part de SA situation (à la main / déjà outillé) et de
 * SES chiffres (volume, taux de réponse, transfo, panier). On lui montre l'écart
 * généré par BoomMaker. Levier = le TAUX DE RÉPONSE (meilleur ciblage), pas le
 * volume. Hypothèses prudentes (plancher 5 %, boost ×1,5). Tout en annuel pour
 * que clients × panier = CA tombe juste à l'écran. CTA = Calendly. */

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

const CALENDLY = 'https://calendly.com/julia-boommaker/30min';
const nf = new Intl.NumberFormat('fr-FR');

/* Hypothèses BoomMaker, par point de départ.
 *  volX  : multiplicateur de volume (on n'arrose pas — bouge peu).
 *  repX  : boost du taux de réponse actuel (le vrai levier).
 *  floor : plancher de taux de réponse atteignable même en partant de 0 %. */
const FACTORS = {
  manuel: { volX: 1.5, repX: 1.5, floor: 0.05 },
  outil:  { volX: 1.0, repX: 1.5, floor: 0.04 },
};

/* === FAQ (SEO + featured snippets) === */
const FAQS = [
  {
    q: "Comment est calculé le résultat du simulateur ?",
    a: "À partir de tes propres chiffres : ton volume de contacts mensuel, ton taux de réponse actuel, la part de réponses qui deviennent clients, et la valeur d'un client. On applique l'apport BoomMaker (surtout sur le taux de réponse), puis on annualise. Tout est affiché en nombres entiers sur 12 mois pour que clients × panier = chiffre d'affaires tombe juste sous tes yeux.",
  },
  {
    q: "Les chiffres ne sont-ils pas survendus ?",
    a: "Non, les hypothèses sont volontairement prudentes. Le boost de taux de réponse est de ×1,5 (un taux de 5 % passe à 7,5 %), avec un plancher de 5 % seulement quand on part de zéro. Le volume, lui, ne bouge quasiment pas. On préfère un chiffre défendable face à un prospect plutôt qu'une projection marketing.",
  },
  {
    q: "Pourquoi le levier est le taux de réponse et pas le volume ?",
    a: "Parce qu'envoyer 10 fois plus de messages, n'importe quel outil sait le faire — et ça remplit surtout les spams. La vraie valeur, c'est de mieux cibler et de personnaliser chaque approche pour que les bons prospects répondent. Un meilleur taux de réponse à volume constant rapporte bien plus qu'un gros volume mal ciblé.",
  },
  {
    q: "Je n'ai aucune réponse aujourd'hui, le simulateur sert quand même ?",
    a: "Oui, c'est même le cas le plus parlant. Si personne ne te répond aujourd'hui (0 %), le simulateur ne reste pas bloqué à zéro : rien qu'avec un bon ciblage et des messages sur-mesure, on amène ton taux de réponse à un plancher réaliste. C'est exactement le problème que BoomMaker répare.",
  },
  {
    q: "Quels outils BoomMaker utilise pour obtenir ces résultats ?",
    a: "Un sourcing ciblé (Sales Navigator + bases enrichies), des séquences multicanal LinkedIn + email automatisées, une personnalisation des messages par IA entraînée à ta voix, et un pilotage dans Airtable. La délivrabilité est surveillée et toute ta data reste chez toi — pas de boîte noire d'agence.",
  },
  {
    q: "C'est une estimation ou un engagement chiffré ?",
    a: "C'est une estimation indicative pour te projeter. Les résultats réels dépendent de ton marché, de ton offre et de ton secteur. Pour un chiffrage précis et un objectif tenu, on en parle 20 minutes en visio : on regarde tes vrais chiffres et on cadre ensemble un plan réaliste.",
  },
];

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">Simulateur de prospection</span>
  </nav>
);

const Field = ({ label, suffix, min, max, step, value, onChange }) => (
  <div className="sim-field">
    <label className="sim-field-label">{label}</label>
    <input
      type="range"
      min={min} max={max} step={step} value={value}
      onChange={(e) => onChange(Number(e.target.value))}
      aria-label={label}
    />
    <span className="sim-field-value">{nf.format(value)}{suffix}</span>
  </div>
);

const Stat = ({ label, value, accent }) => (
  <div className="sim-stat">
    <span className="sim-stat-label">{label}</span>
    <span className={`sim-stat-value ${accent ? 'sim-stat-value-accent' : ''}`}>{value}</span>
  </div>
);

const Simulator = () => {
  const [mode, setMode] = useState('manuel');
  const [vol, setVol] = useState(1000);
  const [rep, setRep] = useState(5);
  const [clo, setClo] = useState(15);
  const [val, setVal] = useState(3000);

  const f = FACTORS[mode];
  const repFrac = rep / 100;
  const cloFrac = clo / 100;
  const volBoom = Math.round(vol * f.volX);
  const repBoom = Math.min(Math.max(repFrac * f.repX, f.floor), 0.6);

  /* Tout en ANNUEL et arrondi à l'entier → clients × panier = CA tombe juste. */
  const repYearNow = Math.round(vol * 12 * repFrac);
  const repYearBoom = Math.round(volBoom * 12 * repBoom);
  const cliNow = Math.round(vol * 12 * repFrac * cloFrac);
  const cliBoom = Math.round(volBoom * 12 * repBoom * cloFrac);
  const caNow = cliNow * val;
  const caBoom = cliBoom * val;
  const delta = caBoom - caNow;

  const repNowPct = Math.round(repFrac * 100);
  const repBoomPct = (repBoom * 100).toFixed(repBoom * 100 < 10 ? 1 : 0);

  let hyp;
  if (rep === 0) {
    hyp = `Aujourd'hui personne ne te répond (0 %). C'est justement ce qu'on répare : rien qu'avec le bon ciblage et des messages sur-mesure, on amène ton taux de réponse à ${repBoomPct} %.`;
  } else {
    hyp = `Le moteur, c'est le ciblage : ton taux de réponse passe de ${repNowPct} % à ${repBoomPct} % (hypothèse prudente).`;
  }
  hyp += f.volX > 1.05
    ? ` On monte aussi un peu le volume (${nf.format(volBoom)} contacts/mois), sans jamais arroser au hasard.`
    : ` Ton volume, lui, ne bouge quasiment pas : on fait mieux avec ce que tu envoies déjà.`;
  hyp += ` Ton taux de transfo et ton panier ne changent pas.`;

  return (
    <div className="sim-tool">
      {/* Étape 1 — situation actuelle */}
      <p className="sim-step">1 · Aujourd'hui, tu prospectes comment&nbsp;?</p>
      <div className="sim-modes" role="tablist">
        <button
          type="button" role="tab" aria-selected={mode === 'manuel'}
          className={`sim-mode ${mode === 'manuel' ? 'sim-mode-on' : ''}`}
          onClick={() => setMode('manuel')}
        >À la main</button>
        <button
          type="button" role="tab" aria-selected={mode === 'outil'}
          className={`sim-mode ${mode === 'outil' ? 'sim-mode-on' : ''}`}
          onClick={() => setMode('outil')}
        >Déjà avec un outil</button>
      </div>

      {/* Étape 2 — chiffres actuels */}
      <p className="sim-step">2 · Tes chiffres actuels</p>
      <div className="sim-fields">
        <Field label="Contacts démarchés / mois" suffix="" min={500} max={10000} step={100} value={vol} onChange={setVol} />
        <Field label="Ton taux de réponse actuel" suffix=" %" min={0} max={50} step={1} value={rep} onChange={setRep} />
        <Field label="Réponses qui deviennent clients" suffix=" %" min={0} max={30} step={1} value={clo} onChange={setClo} />
        <Field label="Valeur d'un nouveau client" suffix=" €" min={100} max={10000} step={100} value={val} onChange={setVal} />
      </div>

      {/* Étape 3 — résultat */}
      <p className="sim-step">3 · Le résultat <span className="sim-step-hint">(sur 12 mois)</span></p>
      <div className="sim-results">
        <div className="sim-card">
          <p className="sim-card-head">Aujourd'hui</p>
          <Stat label="Réponses / an" value={nf.format(repYearNow)} />
          <Stat label="Clients / an" value={nf.format(cliNow)} />
          <Stat label="CA généré / an" value={`${nf.format(caNow)} €`} />
        </div>
        <div className="sim-card sim-card-boom">
          <p className="sim-card-head sim-card-head-boom">Avec BoomMaker</p>
          <Stat label="Réponses / an" value={nf.format(repYearBoom)} accent />
          <Stat label="Clients / an" value={nf.format(cliBoom)} accent />
          <Stat label="CA généré / an" value={`${nf.format(caBoom)} €`} accent />
        </div>
      </div>

      <p className="sim-hyp">{hyp}</p>

      {/* Delta + CTA */}
      <div className="sim-delta">
        <div>
          <p className="sim-delta-label">Ce que BoomMaker te ferait gagner</p>
          <p className="sim-delta-value">+ {nf.format(delta)} € / an</p>
        </div>
        <a href={CALENDLY} target="_blank" rel="noopener noreferrer" className="btn btn-glow">
          En parler 20 min <ArrowUpRight />
        </a>
      </div>
    </div>
  );
};

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

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

      {/* HERO */}
      <article className="audit-hero">
        <div className="container">
          <PageBreadcrumb />
          <span className="eyebrow"><span className="pulse" /> Simulateur · prospection B2B</span>
          <h1>
            Combien la prospection automatisée <em>pourrait te rapporter</em>&nbsp;?
          </h1>
          <p className="lead">
            Pars de tes vrais chiffres. En 30 secondes, le simulateur estime le chiffre d'affaires que BoomMaker te générerait en plus — sans gonfler les hypothèses. <strong>Le levier, c'est un meilleur taux de réponse, pas plus de volume.</strong>
          </p>
        </div>
      </article>

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

            {/* === Le simulateur === */}
            <section className="expertises-cases" id="simulateur">
              <Simulator />
              <p className="sim-disclaimer">
                Estimation indicative basée sur les hypothèses que tu renseignes. Les résultats réels dépendent de ton marché, ton offre et ton secteur. Hypothèses prudentes : boost du taux de réponse ×1,5, plancher 5 %, volume quasi inchangé.
              </p>
            </section>

            {/* === Pourquoi ces chiffres === */}
            <section className="expertises-cases" id="methode">
              <div className="expertise-eyebrow eyebrow"><span className="pulse" />Pourquoi ces chiffres</div>
              <h2 className="expertises-cases-title">
                D'où vient l'écart, <em>concrètement.</em>
              </h2>
              <p className="expertises-cases-lead">
                Aucun chiffre magique. L'apport BoomMaker repose sur trois leviers très concrets — et c'est surtout le taux de réponse qui travaille, pas le volume d'envois.
              </p>
              <ol className="roi-methode">
                <li className="roi-methode-step">
                  <div className="roi-methode-num">/ 01</div>
                  <div className="roi-methode-content">
                    <h3>Un ciblage chirurgical</h3>
                    <p>On va chercher précisément tes prospects idéaux (Sales Navigator + bases enrichies) au lieu d'arroser large. Mieux ciblé, ça veut dire bien plus de réponses — pas juste plus d'envois qui finissent en spam.</p>
                  </div>
                </li>
                <li className="roi-methode-step">
                  <div className="roi-methode-num">/ 02</div>
                  <div className="roi-methode-content">
                    <h3>Des messages sur-mesure, pas des templates</h3>
                    <p>Une IA entraînée à ta voix rédige chaque approche en s'appuyant sur le profil réel du prospect. C'est ce qui fait répondre des gens qui t'ignoraient, là où un outil lambda et ses modèles génériques plafonnent.</p>
                  </div>
                </li>
                <li className="roi-methode-step">
                  <div className="roi-methode-num">/ 03</div>
                  <div className="roi-methode-content">
                    <h3>Tu gardes le contrôle</h3>
                    <p>Délivrabilité surveillée, relances qui ne tombent jamais à l'eau, séquences multicanal LinkedIn + email pilotées dans Airtable. Et toute ta data reste chez toi : pas de boîte noire d'agence.</p>
                  </div>
                </li>
              </ol>
            </section>

            {/* === FAQ === */}
            <section className="expertises-faq" id="faq" aria-labelledby="faq-title">
              <div className="expertise-eyebrow eyebrow"><span className="pulse" />Questions fréquentes · simulateur</div>
              <h2 className="expertises-faq-title" id="faq-title">
                Ce qu'on nous demande <em>sur le calcul.</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 le <em>vrai chiffre</em> pour ton cas&nbsp;?</h2>
            <p>Le simulateur te donne un ordre de grandeur. En 20 minutes de visio, on regarde tes vrais chiffres (volume, taux de réponse, panier, cycle de vente) et on cadre ensemble un plan de prospection réaliste — avec un objectif tenu, pas une promesse en l'air.</p>
            <div className="partners-cta">
              <a href={CALENDLY} target="_blank" rel="noopener noreferrer" className="btn btn-glow">Réserver 20 min <ArrowUpRight /></a>
              <a href="/automatisation-prospection-b2b" className="btn btn-ghost">Voir comment on automatise la prospection <ArrowUpRight /></a>
            </div>
          </div>
        </div>
      </section>

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

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