/* Page /roi-automatisation-pme — guide pillar ROI/rentabilité pour fondateurs.
 * Cible la requête principale "ROI automatisation PME" + variantes
 * "retour investissement IA PME", "combien rapporte automatisation",
 * "rentabilité automatisation". Forte intention décisionnelle.
 * Format guide (différenciation /automatisation-tpe-budget-limite qui se
 * concentre sur les COÛTS — ici on se concentre sur les GAINS). */

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

/* === 4 types de gains === */
const GAIN_TYPES = [
  {
    tag: 'Gain 01',
    title: 'Heures gagnées',
    body: "Le gain le plus tangible et le plus rapide à mesurer. Si tu automatises une tâche qui te prenait 10h/semaine, tu récupères 520h/an. Valorisées à un coût horaire moyen TPE de 50€/h, ça représente 26 000€/an de capacité libérée — réinvestie dans ton vrai métier (vente, stratégie, produit).",
    metric: '8 à 15 h/semaine',
    metricLabel: 'récupérées par personne',
  },
  {
    tag: 'Gain 02',
    title: 'CA additionnel',
    body: "L'automatisation de la prospection génère de nouveaux RDV qualifiés qui se transforment en CA. Nos pipelines en prod génèrent 10 à 20 RDV qualifiés supplémentaires par mois. Avec un taux de closing moyen de 20% et un panier moyen B2B de 5 000€, ça représente 10 000 à 20 000€/mois de CA nouveau.",
    metric: '+10 à 20 RDV',
    metricLabel: 'qualifiés mensuels',
  },
  {
    tag: 'Gain 03',
    title: 'Économies opérationnelles',
    body: "L'automatisation réduit les coûts cachés : freelances qu'on ne paie plus, abonnements doublonnés qu'on stoppe, erreurs humaines qui coûtent en SAV ou en remboursements. Un client moyen économise 800 à 2 500€/mois rien que sur ces postes après audit complet.",
    metric: '800 - 2 500 €',
    metricLabel: 'économies mensuelles',
  },
  {
    tag: 'Gain 04',
    title: 'Scalabilité sans recruter',
    body: "Le gain le plus stratégique sur 12 mois. Avec un pipeline automatisé, tu peux doubler ton volume de leads ou de factures sans embaucher. Économie sur un commercial junior : 35-45 000€/an de charges. Et tu évites le risque RH (recrutement, formation, départ).",
    metric: '×2 à ×3',
    metricLabel: 'capacité sans embauche',
  },
];

/* === 3 personas avec calcul ROI === */
const ROI_PERSONAS = [
  {
    persona: 'TPE solo / 2 personnes',
    sector: 'Consultant ou agence en démarrage',
    stack: '90 €/mois (palier 1)',
    setup: '490 € one-shot',
    invested: '1 570 € / an',
    gain_hours: 8,
    gain_ca: 0,
    gain_opex: 100,
    annual_gain: '11 000 €',
    roi: '×7',
    payback: '52 jours',
    body: "Tu es seul ou en duo, tu fais 50-150k€ de CA. L'automatisation se concentre sur 1 brique critique : prospection ou onboarding client. Tu rentables vite parce que chaque heure récupérée libère du temps commercial direct.",
  },
  {
    persona: 'PME 10 personnes',
    sector: 'SaaS B2B ou cabinet conseil',
    stack: '220 €/mois (palier 2)',
    setup: '490 € one-shot',
    invested: '3 130 € / an',
    gain_hours: 12,
    gain_ca: 8000,
    gain_opex: 600,
    annual_gain: '127 000 €',
    roi: '×40',
    payback: '9 jours',
    body: "Tu fais 500k€-2M€ de CA avec 8-12 personnes. L'automatisation couvre prospection + onboarding + reporting. Le ROI explose grâce au volume : 12h × 10 employés × 50€/h sur l'année + 8 RDV/mois supplémentaires × 5k panier moyen.",
    featured: true,
  },
  {
    persona: 'PME 30 personnes',
    sector: 'E-commerce ou éditeur logiciel',
    stack: '550 €/mois (palier 3)',
    setup: '6 000 € (format Studio)',
    invested: '12 600 € / an',
    gain_hours: 18,
    gain_ca: 25000,
    gain_opex: 2200,
    annual_gain: '420 000 €',
    roi: '×33',
    payback: '11 jours',
    body: "Tu fais 5M€+ de CA, 25-50 personnes. Tu automatises 4-6 process en parallèle. Les gains se cumulent : prospection B2B + facturation + onboarding + service client + reporting. À ce stade tu remplaces l'équivalent d'1 à 2 ETP sans embaucher.",
  },
];

/* === Méthode 4 étapes pour calculer SON ROI === */
const METHODE_STEPS = [
  {
    n: '01',
    title: 'Liste les tâches répétitives qui te bouffent du temps',
    body: "Pendant 1 semaine, note chaque tâche manuelle que toi ou ton équipe faites plus de 2 fois (copier-coller entre outils, relances, saisies, exports/imports, reporting hebdo). Compte les minutes. C'est le pool brut à automatiser.",
  },
  {
    n: '02',
    title: 'Identifie les tâches qui peuvent rater (et coûter)',
    body: "Quelles tâches, si elles sont oubliées ou mal faites, te coûtent en CA perdu, en remboursement client, en pénalité ? Une relance facture oubliée = facturé 30 jours plus tard. Un lead chaud non rappelé = RDV perdu. Mets un montant € par incident annuel.",
  },
  {
    n: '03',
    title: 'Estime ton coût horaire réel (pas le brut)',
    body: "Ne prends pas juste le salaire brut. Multiplie par 1.45 (charges + congés + ordi/bureau) puis ajoute le coût d'opportunité (ce que cette personne ferait à plus haute valeur si elle ne faisait pas du répétitif). Coût horaire réel TPE : 40-60€/h. PME : 50-80€/h. Cadres : 80-150€/h.",
  },
  {
    n: '04',
    title: 'Multiplie et compare',
    body: "Heures gagnées × coût horaire réel + CA additionnel estimé + économies opex = gain annuel. Compare au coût total (setup + stack outils × 12 mois). Si le ratio est < 3 ne fais pas. Si > 5 fonce. Entre 3 et 5 = audit gratuit pour affiner.",
  },
];

/* === 3 pièges du calcul ROI === */
const ROI_PITFALLS = [
  {
    title: 'Compter le coût brut mais oublier le gain de capacité',
    body: "Tu paies 200€/mois pour une stack et tu ne mesures QUE les heures gagnées. Tu oublies de compter les RDV supplémentaires pris, les factures encaissées 15 jours plus tôt, les leads chauds qui n'auraient jamais été rappelés. Sous-estimation typique : ×3 à ×5 du gain réel.",
  },
  {
    title: 'Sur-estimer le coût horaire d\'un employé qui gère du répétitif',
    body: "Si tu valorises ta secrétaire à 100€/h parce que tu paies un comptable à ce prix, ton ROI sera artificiellement gonflé. Sois honnête : le coût horaire RÉEL inclut ce que la personne ferait à plus haute valeur si elle ne faisait pas du répétitif. Pour une personne admin TPE : 40-50€/h max.",
  },
  {
    title: 'Comparer à un scénario fantasme au lieu du réel actuel',
    body: "L'erreur classique : \"si j'embauchais un commercial à 45k€/an, ça me coûterait 60k€ chargé, donc l'automatisation à 5k€/an me fait économiser 55k€\". Faux. Tu n'aurais probablement pas embauché ce commercial. Compare TOUJOURS au scénario réel actuel (tu fais sans, tu rates des opportunités) — pas à un scénario hypothétique meilleur.",
  },
];

/* === FAQ ROI === */
const FAQS = [
  {
    q: "Quel est le ROI moyen d'une automatisation TPE/PME en 2026 ?",
    a: "D'après l'étude IDC 2025 sur 200 PME européennes, le ROI moyen est de 159% sur 12 mois, soit ×2.6 sur l'investissement. Nos chiffres internes sur 30+ projets livrés sont cohérents : ROI médian ×8 à ×15 sur 12 mois quand on cible bien le bon process à automatiser. L'écart vient du fait qu'on refuse les projets dont l'amortissement dépasse 90 jours.",
  },
  {
    q: "Combien de temps pour rentabiliser une automatisation ?",
    a: "Pour qu'on accepte de déployer, l'amortissement doit être inférieur à 90 jours. En pratique, sur nos clients : médiane d'amortissement = 18 à 45 jours selon le palier et le périmètre. Le pipeline de prospection B2B est typiquement le plus rapide à rentabiliser (premières factures additionnelles en 4-6 semaines).",
  },
  {
    q: "Pourquoi 90 jours comme garantie et pas 12 mois ?",
    a: "Parce qu'à 12 mois, on perd la rigueur du chiffrage initial. Sur 90 jours, on peut prouver chiffres en main que ça marche. Si on ne rentabilise pas en 90 jours, soit le périmètre était mal défini (notre faute), soit le marché ne répond pas (on rembourse). 90 jours, c'est aussi le délai psychologique acceptable pour un fondateur TPE : si rien ne change en 3 mois, on a perdu confiance.",
  },
  {
    q: "Mon process est complexe — comment savoir si l'automatisation rapportera ?",
    a: "C'est exactement le travail de l'audit gratuit. 30 minutes pendant lesquelles on cartographie ton process actuel, on identifie les automatisations possibles, et on chiffre ensemble le gain attendu (heures + CA + économies). À la fin de l'appel, tu repars avec un ROI estimé. Si on n'arrive pas à atteindre 90 jours d'amortissement, on te dit non et on ne facture rien.",
  },
  {
    q: "Comment vous mesurez le ROI en réel après déploiement ?",
    a: "On installe systématiquement 3 KPIs trackés dans Airtable ou un dashboard Softr : (1) heures réellement économisées par semaine, (2) volume nouveau généré (RDV, factures, leads), (3) coût mensuel total. Tu y as accès en lecture en temps réel. À J+30, J+60, J+90, on fait un point chiffré. Si on n'est pas dans la trajectoire promise, on ajuste.",
  },
  {
    q: "Le ROI tient-il dans la durée ou est-ce que ça décroît ?",
    a: "Il augmente. Plus le système tourne, plus tu apprends à l'optimiser, plus tu identifies de tâches connexes à automatiser. Nos clients en année 2 ont typiquement un ROI 2× supérieur à l'année 1 parce qu'ils ont automatisé 4-6 process au lieu de 1-2.",
  },
  {
    q: "Et si le marché change et que mon pipeline ne marche plus ?",
    a: "Risque réel. La parade : on conçoit les workflows pour être modulaires et pas couplés à un état spécifique du marché. Si demain Sales Navigator ferme ou Make change ses prix, on switch sur n8n + un autre sourcing en 1-2 jours. Pas de lock-in technologique. Tu gardes la propriété de tes data et de tes process.",
  },
  {
    q: "Le ROI de l'IA est-il vraiment au rendez-vous ou c'est du marketing ?",
    a: "Dépend de l'usage. L'IA est rentable quand elle remplace une tâche cognitive répétitive bien définie : qualifier un lead, rédiger un brief, classer un email entrant. Elle ne l'est pas pour du décisionnel complexe (stratégie, négo, créativité). On utilise l'IA uniquement sur les cas où elle bat l'humain en ratio coût/qualité — et on documente.",
  },
];

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">ROI automatisation PME</span>
  </nav>
);

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

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

      {/* HERO */}
      <article className="audit-hero">
        <div className="container">
          <PageBreadcrumb />
          <span className="eyebrow"><span className="pulse" /> ROI · automatisation PME 2026</span>
          <h1>
            Combien ça rapporte vraiment <em>d'automatiser sa PME</em>&nbsp;?
          </h1>
          <p className="lead">
            Les 4 types de gains, 3 calculs ROI chiffrés pour 3 stades de PME (solo, 10 pers., 30 pers.), la méthode pour calculer TON ROI personnel, et pourquoi on garantit l'amortissement sous 90 jours. <strong>Sinon on ne déploie pas et on ne facture rien.</strong>
          </p>
        </div>
      </article>

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

            {/* === La question === */}
            <section className="expertises-cases">
              <div className="expertise-eyebrow eyebrow"><span className="pulse" />La question qu'on entend tout le temps</div>
              <h2 className="expertises-cases-title">
                "OK mais ça <em>rapporte combien</em> en vrai&nbsp;?"
              </h2>
              <p className="expertises-cases-lead">
                C'est LA question décisionnelle. Avant de signer, chaque fondateur veut un chiffre. Pas un "ça dépend", pas un "c'est variable". Cette page documente nos vrais chiffres, sur nos vrais clients, avec la méthode pour que tu calcules le tien. L'étude IDC 2025 sur 200 PME donne un ROI moyen de 159% sur 12 mois. Nos chiffres internes sont en moyenne 2 à 3 fois supérieurs, parce qu'on refuse les projets dont l'amortissement dépasse 90 jours.
              </p>
            </section>

            {/* === 4 types de gains === */}
            <section className="expertises-cases" id="gains">
              <div className="expertise-eyebrow eyebrow"><span className="pulse" />Les 4 types de gains</div>
              <h2 className="expertises-cases-title">
                Quatre sources de gain. <em>Souvent oubliées</em> dans le calcul.
              </h2>
              <p className="expertises-cases-lead">
                Quand on calcule un ROI, la plupart des gens ne comptent que les heures gagnées. C'est la sous-estimation classique : tu rates 60-80% du gain réel. Voici les 4 dimensions à considérer pour un calcul honnête.
              </p>
              <div className="roi-gains-grid">
                {GAIN_TYPES.map((g) => (
                  <article className="roi-gain" key={g.tag}>
                    <div className="roi-gain-tag">{g.tag}</div>
                    <h3 className="roi-gain-title">{g.title}</h3>
                    <p className="roi-gain-body">{g.body}</p>
                    <div className="roi-gain-metric">
                      <span className="roi-gain-metric-value">{g.metric}</span>
                      <span className="roi-gain-metric-label">{g.metricLabel}</span>
                    </div>
                  </article>
                ))}
              </div>
            </section>

            {/* === 3 personas avec calcul ROI === */}
            <section className="expertises-cases" id="exemples">
              <div className="expertise-eyebrow eyebrow"><span className="pulse" />3 personas, 3 calculs ROI</div>
              <h2 className="expertises-cases-title">
                Chiffres réels selon <em>ton stade.</em>
              </h2>
              <p className="expertises-cases-lead">
                Trois exemples chiffrés, basés sur nos clients en production. Les chiffres sont conservateurs (médianes, pas pics). Tu peux te projeter sur celui qui te ressemble le plus.
              </p>
              <div className="roi-personas-grid">
                {ROI_PERSONAS.map((p) => (
                  <article className={`roi-persona ${p.featured ? 'roi-persona-featured' : ''}`} key={p.persona}>
                    {p.featured && <div className="roi-persona-badge">Le plus représentatif</div>}
                    <div className="roi-persona-label">{p.persona}</div>
                    <div className="roi-persona-sector">{p.sector}</div>

                    <div className="roi-persona-block">
                      <div className="roi-persona-block-label">Investissement annuel</div>
                      <div className="roi-persona-invested">{p.invested}</div>
                      <div className="roi-persona-detail">{p.setup} + {p.stack} × 12 mois</div>
                    </div>

                    <div className="roi-persona-block">
                      <div className="roi-persona-block-label">Composition du gain</div>
                      <ul className="roi-persona-gains">
                        <li><span>Heures gagnées</span><strong>{p.gain_hours} h/sem</strong></li>
                        {p.gain_ca > 0 && <li><span>CA additionnel</span><strong>{p.gain_ca.toLocaleString('fr-FR')} €/mois</strong></li>}
                        <li><span>Économies opex</span><strong>{p.gain_opex} €/mois</strong></li>
                      </ul>
                    </div>

                    <div className="roi-persona-result">
                      <div className="roi-persona-result-row">
                        <span>Gain annuel net</span>
                        <strong>{p.annual_gain}</strong>
                      </div>
                      <div className="roi-persona-result-row roi-persona-result-highlight">
                        <span>ROI sur 12 mois</span>
                        <strong>{p.roi}</strong>
                      </div>
                      <div className="roi-persona-result-row">
                        <span>Amorti en</span>
                        <strong>{p.payback}</strong>
                      </div>
                    </div>

                    <p className="roi-persona-body">{p.body}</p>
                  </article>
                ))}
              </div>
            </section>

            {/* === Méthode 4 étapes === */}
            <section className="expertises-cases" id="methode">
              <div className="expertise-eyebrow eyebrow"><span className="pulse" />La méthode</div>
              <h2 className="expertises-cases-title">
                4 étapes pour calculer <em>ton ROI personnel.</em>
              </h2>
              <p className="expertises-cases-lead">
                À faire en 1 heure max. Pas besoin d'Excel sophistiqué : feuille de papier ou Notion. Le but est d'avoir un chiffre honnête, pas un chiffre marketing.
              </p>
              <ol className="roi-methode">
                {METHODE_STEPS.map((s) => (
                  <li className="roi-methode-step" key={s.n}>
                    <div className="roi-methode-num">/ {s.n}</div>
                    <div className="roi-methode-content">
                      <h3>{s.title}</h3>
                      <p>{s.body}</p>
                    </div>
                  </li>
                ))}
              </ol>
            </section>

            {/* === Garantie 90j === */}
            <section className="expertises-cases tarifs-roi" id="garantie">
              <div className="expertise-eyebrow eyebrow"><span className="pulse" />Notre garantie unique</div>
              <h2 className="expertises-cases-title">
                Pourquoi 90 jours. <em>Pas 12 mois.</em>
              </h2>
              <p className="expertises-cases-lead">
                La plupart des agences raisonnent à 12 mois parce que ça arrondit les chiffres. Nous, on raisonne à 90 jours pour une raison simple : c'est l'horizon où on peut prouver chiffres en main que ça marche. Au-delà, on perd le contrôle du chiffrage initial et tout devient flou.
              </p>
              <ul className="tarifs-roi-list">
                <li><Check /> <span><strong>Avant le déploiement</strong> : on calcule ensemble (audit gratuit 30 min) combien tu dois récupérer en heures, € ou RDV pour amortir en 90 jours. Si on n'y arrive pas, on ne déploie pas.</span></li>
                <li><Check /> <span><strong>Pendant 90 jours</strong> : on track 3 KPIs en temps réel dans un dashboard auquel tu as accès en lecture (heures gagnées, volume nouveau, coûts).</span></li>
                <li><Check /> <span><strong>À J+90</strong> : bilan chiffré. Si le ROI promis est atteint, le pipeline reste tel quel. Si non, on rembourse OU on continue gratuitement jusqu'à l'atteindre. Au choix.</span></li>
              </ul>
            </section>

            {/* === Pièges du calcul ROI === */}
            <section className="expertises-cases" id="pieges">
              <div className="expertise-eyebrow eyebrow"><span className="pulse" />Pièges classiques</div>
              <h2 className="expertises-cases-title">
                3 erreurs qui faussent <em>tout le calcul.</em>
              </h2>
              <p className="expertises-cases-lead">
                On voit ces erreurs revenir dans 70% des projections ROI faites en interne par nos prospects. Elles surévaluent OU sous-évaluent le gain dans des proportions énormes.
              </p>
              <ol className="roi-pitfalls">
                {ROI_PITFALLS.map((p, i) => (
                  <li className="roi-pitfall" key={p.title}>
                    <div className="roi-pitfall-num">/ 0{i + 1}</div>
                    <div className="roi-pitfall-content">
                      <h3>{p.title}</h3>
                      <p>{p.body}</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 · ROI</div>
              <h2 className="expertises-faq-title" id="faq-title">
                Ce qu'on nous demande <em>sur le ROI réel.</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 calcule <em>ton ROI précis</em>&nbsp;?</h2>
            <p>30 minutes, gratuit, sans engagement. On regarde tes tâches répétitives, ton volume, ton coût horaire réel. À la fin de l'appel, tu repars avec : un chiffre clair (×X de ROI estimé sur 12 mois), un délai d'amortissement précis (en jours), et le périmètre exact à automatiser pour y arriver.</p>
            <div className="partners-cta">
              <a href="/audit-gratuit" className="btn btn-glow">Réserver l'audit gratuit <ArrowUpRight /></a>
              <a href="/automatisation-tpe-budget-limite" className="btn btn-ghost">Voir les 3 paliers budget <ArrowUpRight /></a>
            </div>
          </div>
        </div>
      </section>

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

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