/* Page /automatisation-tpe-budget-limite — guide pillar à forte intention pour
 * la cible fondateurs TPE/PME 2-30 pers. sensibles au prix.
 * Cible la requête "automatisation à faible coût" + variantes "low budget".
 * Format guide (différent des cas d'usage techniques) : 3 paliers budget,
 * erreurs à éviter, calcul ROI concret, FAQ tarifs. */

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

/* === 3 paliers de budget, 3 stacks === */
const BUDGET_TIERS = [
  {
    label: 'Palier 1 · Démarrage',
    price: '< 100 € / mois',
    tagline: "Pour automatiser ta 1ère brique sans risque.",
    color: 'cyan',
    tools: [
      { name: 'Make', detail: 'Plan Core : 10 000 ops/mois pour 9 €' },
      { name: 'Airtable', detail: 'Plan gratuit jusqu\'à 1 200 records par base' },
      { name: 'Notion', detail: 'Plan Plus : 10 €/mois (templates et docs IA)' },
      { name: 'Gmail / Google Workspace', detail: 'Déjà payé pour la plupart' },
      { name: 'Brevo / Mailjet', detail: 'Plan gratuit jusqu\'à 300 emails/jour' },
    ],
    examples: [
      'Lead du formulaire → notification Slack + ligne dans Airtable',
      'Calendly RDV → ligne CRM avec source et statut',
      'Facture payée Stripe → email "merci" + entrée comptable Notion',
    ],
    perfectFor: 'Tu veux tester l\'automatisation sans engagement. Un seul workflow opérationnel, propre, documenté. Tu vois si ça te rend service avant d\'investir plus.',
  },
  {
    label: 'Palier 2 · Standard',
    price: '100 - 300 € / mois',
    tagline: "Le bon ratio puissance / prix pour 80% des TPE/PME.",
    color: 'violet',
    featured: true,
    tools: [
      { name: 'Make', detail: 'Plan Pro : 40 ops/seconde pour 16 € — gros volume' },
      { name: 'Airtable', detail: 'Plan Team : 24 €/user/mois — interfaces et automatisations natives' },
      { name: 'Claude API', detail: 'Anthropic : pay-per-use, compte sur 30-50 €/mois sur des prompts moyens' },
      { name: 'Sales Navigator', detail: '79 €/mois — sourcing prospects par filtres précis' },
      { name: 'Emelia', detail: '67 €/mois — cold email + warmup intégré, alternative française à Lemlist' },
      { name: 'HubSpot / Pipedrive', detail: 'Free ou Starter à 15 €/user — CRM connecté' },
    ],
    examples: [
      'Pipeline prospection B2B complet : Sales Nav → enrichissement → IA scoring → Emelia → CRM',
      'Génération de contenu LinkedIn auto : Perplexity → Claude → Buffer scheduled',
      'Onboarding client end-to-end : signature → CRM → factu → drive → Slack',
      'Reporting hebdo consolidé dans un dashboard Softr',
    ],
    perfectFor: 'Tu as un produit qui se vend et tu veux scaler sans embaucher. Tu acceptes d\'investir 150-250 € de stack pour gagner 10-15h/semaine sur ton équipe.',
  },
  {
    label: 'Palier 3 · Avancé',
    price: '300 - 700 € / mois',
    tagline: "Pour les boîtes qui automatisent plusieurs process en parallèle.",
    color: 'gradient',
    tools: [
      { name: 'Make Teams', detail: '29 €/user/mois — collaboration multi-utilisateurs sur scénarios' },
      { name: 'Apollo / Cognism', detail: '100-200 €/mois — enrichissement data complet (email pro + tel + signaux)' },
      { name: 'HubSpot Sales Hub', detail: '100 €/seat/mois — automations natives CRM avancées' },
      { name: 'Stripe + Pennylane', detail: '50-150 €/mois — facturation + comptabilité connectées' },
      { name: 'Softr', detail: '49 €/mois — dashboards clients + portails internes' },
      { name: 'OpenAI GPT-5 + Claude Opus', detail: 'Multi-modèles selon le cas d\'usage, 100-200 €/mois sur volumes moyens' },
    ],
    examples: [
      '3 à 6 pipelines parallèles : prospection + onboarding + facturation + reporting',
      'Agents IA conversationnels sur ton site (qualification + RDV auto)',
      'Multi-team workflows avec délégation d\'accès et audit logs',
      'Intégrations sur-mesure (API custom, webhook bidirectionnels, ETL data)',
    ],
    perfectFor: 'Tu as déjà automatisé 2-3 process et tu veux passer à l\'étape industrielle. Plusieurs équipes utilisent les workflows. Tu vises 50-100k+ €/an d\'économies opérationnelles.',
  },
];

/* === 5 erreurs qui coûtent cher === */
const MISTAKES = [
  {
    title: 'Empiler 8 outils gratuits au lieu d\'en payer 2',
    body: "Un Zapier gratuit + un Airtable gratuit + un Notion gratuit + un Gmail + un Slack + un Trello + un Forms… au bout de 6 mois tu as une stack ingérable, des connecteurs qui cassent, et tu perds 5h par semaine à débugger. Mieux : 2 outils payés correctement (Make Pro + Airtable Team) qui font le boulot de 6 outils gratuits.",
  },
  {
    title: 'Automatiser un process bancal',
    body: "Si ton process manuel est foireux, l'automatiser le rend juste plus rapide à foirer. Avant chaque automatisation, écris le process à la main sur 1 page. Si c'est confus à l'écrit, c'est confus en automatique. Corrige d'abord, automatise ensuite.",
  },
  {
    title: 'Payer 3 outils qui font la même chose',
    body: "Tu as Zapier + Make + n8n parce que chaque équipe a choisi le sien. Ou tu as Hubspot CRM + Pipedrive + Notion en parallèle. C'est le piège classique : pas de propriétaire stack = doublons partout. Mets en place une règle claire : 1 outil maître par fonction.",
  },
  {
    title: 'Sous-investir sur l\'IA pour économiser 30 €/mois',
    body: "Choisir GPT-3.5 ou Mistral 7B pour économiser sur les tokens, alors que tes prompts critiques ont besoin de Claude Sonnet ou GPT-5. Résultat : qualité erratique, leads perdus, RDV ratés. Calcul simple : un mauvais scoring IA = 1 lead chaud perdu = 1 RDV manqué = 1000-5000 € de CA en moins. 30 € économisés peuvent te coûter 50× plus.",
  },
  {
    title: 'Ne pas mesurer le ROI réel',
    body: "Tu automatises, tu \"sens\" que ça t'aide, mais tu ne sais pas combien tu gagnes ni combien tu paies réellement. Au bout de 6 mois, ta stack a explosé à 800 €/mois et tu n'arrives plus à justifier. Toujours définir 1-2 KPIs par automatisation (heures gagnées, € économisés, leads supplémentaires) et les vérifier mensuellement.",
  },
];

/* === Cas client adapté === */
const CASE_STUDY = {
  sector: 'Enseigne nationale de restauration · Recrutement franchisés',
  budgetStart: '110 € / mois (palier 2 démarrage)',
  budgetNow: '380 € / mois (palier 3 après scale)',
  duration: '8 mois entre démarrage et scale-up',
  roi: '×4.2 sur le coût de stack',
  body: "Le client a démarré avec UN seul scénario Make (~110 €/mois tools) : sourcing franchise via Sales Navigator → enrichissement basique → email Emelia. En 8 mois, on a ajouté 3 scénarios supplémentaires (briefing IA, dashboard Softr, scoring sentiment) et basculé en stack palier 3. Le coût a augmenté de ×3.5 (110 → 380 €/mois) mais le pipeline gère désormais 5× plus de candidats franchisés qualifiés. ROI net sur la stack : ×4.2 sur la même période.",
};

/* === FAQ budget === */
const FAQS = [
  {
    q: "Quel est le coût total d'une automatisation, tout compris ?",
    a: "Trois lignes : le setup (one-shot, à partir de 490 € en format Sprint chez nous), les outils tiers (Make, Sales Nav, IA, CRM — entre 100 et 700 €/mois selon le palier), et l'optimisation continue (optionnelle, format Boost à 590 €/mois). Le palier 1 (démarrage) tient à 600 € setup + 80 €/mois soit moins de 1 600 € sur l'année.",
  },
  {
    q: "Combien de temps avant que ça soit rentable ?",
    a: "Pour qu'on accepte de déployer, l'amortissement doit être inférieur à 90 jours. Concrètement, si tu paies 200 €/mois de stack et qu'on te fait gagner 10h/semaine valorisées à 50 €/h, tu rentables en 2-3 semaines. Sur l'année, c'est typiquement 50-300 fois le coût investi.",
  },
  {
    q: "Pourquoi pas un seul outil gratuit qui fait tout ?",
    a: "Parce que les outils \"gratuits qui font tout\" n'existent pas pour l'automatisation business. Les freemiums (Zapier gratuit, n8n self-hosted, Notion automations) ont des limites strictes (volumes, fonctionnalités, support). Au-delà d'1-2 workflows simples, tu paies tôt ou tard. Mieux vaut payer 50-150 €/mois propres dès le départ que 0 € puis bricoler 6 mois.",
  },
  {
    q: "Vous prenez une commission sur les outils que vous recommandez ?",
    a: "Non. Quelques liens d'affiliation sur la page Partenaires sont marqués clairement, mais on ne touche AUCUN pourcentage sur les abonnements clients. On n'a aucun intérêt à te faire prendre un outil plus cher qu'utile. C'est même l'inverse : moins ta stack est lourde, plus on est efficaces à la déployer.",
  },
  {
    q: "Que se passe-t-il si je ne peux pas suivre le palier 2 ?",
    a: "On commence palier 1, point. Une seule automatisation, à 80 €/mois de stack max. Quand elle est rentable et qu'elle marche, tu décides si tu veux passer au palier suivant. Pas de pression, pas de package imposé. Le bon palier dépend de ton stade, pas de ce qu'on préfère vendre.",
  },
  {
    q: "Combien coûte vraiment Make en réalité, hors plan affiché ?",
    a: "Make compte en \"opérations\" (chaque action d'un scénario = 1 op). Le plan Core à 9 €/mois donne 10 000 ops/mois — suffisant pour 1-2 scénarios simples qui tournent une fois par jour. Si tu fais du temps réel (webhooks à chaque lead reçu), tu passes vite à 40 000-100 000 ops/mois (= plan Pro à 16 € ou Teams à 29 €). On calcule ton volume estimé pendant l'audit pour ne pas avoir de surprise.",
  },
  {
    q: "Et les outils français RGPD-compatibles ?",
    a: "Emelia (cold email FR), Mistral (IA française open-source), Brevo (ex-Sendinblue, email marketing FR), Pennylane (compta FR), Qonto (banque pro FR), Sellsy (CRM FR), Octolis (CDP FR), Notion (US mais conforme), Airtable (US mais conforme). Si tu veux 100% souverain FR, c'est possible avec Mistral + Brevo + Sellsy + n8n self-hosted, dis-le nous à l'audit.",
  },
  {
    q: "Vous travaillez avec des budgets en dessous de 80 €/mois ?",
    a: "Oui mais à condition d'avoir un cas précis (1 workflow simple, peu de volume). Si tu veux 5 automatisations différentes avec 500 leads/mois, ce n'est pas réaliste en dessous de 200 €/mois de stack. On te dit non plutôt que de te vendre un truc qui va casser dans 3 mois.",
  },
];

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">Automatisation à petit budget</span>
  </nav>
);

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

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

      {/* HERO */}
      <article className="audit-hero">
        <div className="container">
          <PageBreadcrumb />
          <span className="eyebrow"><span className="pulse" /> Guide budget · TPE / PME 2026</span>
          <h1>
            Automatiser sa TPE/PME à <em>petit budget</em> : le guide complet 2026.
          </h1>
          <p className="lead">
            3 paliers de stack selon ton budget (&lt; 100 €/mois, 100 à 300 €/mois, 300 à 700 €/mois). Les 5 erreurs qui coûtent cher. Le ROI calculé chiffres en main. <strong>ROI sous 90 jours garanti, sinon on ne déploie pas.</strong>
          </p>
        </div>
      </article>

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

            {/* === L'objection === */}
            <section className="expertises-cases">
              <div className="expertise-eyebrow eyebrow"><span className="pulse" />L'objection qu'on entend tout le temps</div>
              <h2 className="expertises-cases-title">
                "L'automatisation, ça doit <em>coûter une blinde.</em>"
              </h2>
              <p className="expertises-cases-lead">
                Faux dans 80% des cas. Quand un fondateur TPE/PME nous écrit "j'aimerais automatiser mais j'ai pas le budget", c'est presque toujours qu'il imagine des projets à 5 chiffres avec un cabinet de conseil. En réalité, la première brique pertinente démarre à moins de 100 €/mois de stack outils, plus un setup à 490 €. C'est ce qu'on documente ici : combien ça coûte vraiment, étape par étape.
              </p>
            </section>

            {/* === 3 paliers de budget === */}
            <section className="expertises-cases" id="paliers">
              <div className="expertise-eyebrow eyebrow"><span className="pulse" />Les 3 paliers de budget</div>
              <h2 className="expertises-cases-title">
                3 stacks. <em>3 niveaux de budget.</em>
              </h2>
              <p className="expertises-cases-lead">
                Le bon palier dépend de ton stade, pas de notre marge. La règle qu'on utilise : commencer un palier en dessous de ce que tu peux te permettre, monter quand le ROI est prouvé. La plupart de nos clients restent palier 2 pendant 6 à 12 mois avant de monter palier 3.
              </p>
              <div className="budget-tiers-grid">
                {BUDGET_TIERS.map((tier) => (
                  <article className={`budget-tier ${tier.featured ? 'budget-tier-featured' : ''} budget-tier-${tier.color}`} key={tier.label}>
                    {tier.featured && <div className="budget-tier-badge">Choix recommandé</div>}
                    <div className="budget-tier-label">{tier.label}</div>
                    <div className="budget-tier-price">{tier.price}</div>
                    <p className="budget-tier-tagline">{tier.tagline}</p>

                    <div className="budget-tier-block">
                      <div className="budget-tier-block-label">Stack outils</div>
                      <ul className="budget-tier-tools">
                        {tier.tools.map((t) => (
                          <li key={t.name}>
                            <strong>{t.name}</strong>
                            <span>{t.detail}</span>
                          </li>
                        ))}
                      </ul>
                    </div>

                    <div className="budget-tier-block">
                      <div className="budget-tier-block-label">Exemples concrets</div>
                      <ul className="budget-tier-examples">
                        {tier.examples.map((ex) => (
                          <li key={ex}><Check /> <span>{ex}</span></li>
                        ))}
                      </ul>
                    </div>

                    <div className="budget-tier-perfect">
                      <div className="budget-tier-block-label">Parfait pour toi si</div>
                      <p>{tier.perfectFor}</p>
                    </div>
                  </article>
                ))}
              </div>
            </section>

            {/* === Les 5 erreurs === */}
            <section className="expertises-cases" id="erreurs">
              <div className="expertise-eyebrow eyebrow"><span className="pulse" />Les 5 erreurs qui coûtent cher</div>
              <h2 className="expertises-cases-title">
                Les pièges qu'on a vus <em>chez nos clients.</em>
              </h2>
              <p className="expertises-cases-lead">
                Avant de t'aider à automatiser, on t'aide souvent à arrêter de payer pour des trucs qui ne marchent pas. Voici les 5 erreurs récurrentes qu'on corrige systématiquement lors de l'audit.
              </p>
              <ol className="budget-mistakes">
                {MISTAKES.map((m, i) => (
                  <li className="budget-mistake" key={m.title}>
                    <div className="budget-mistake-num">/ 0{i + 1}</div>
                    <div className="budget-mistake-content">
                      <h3>{m.title}</h3>
                      <p>{m.body}</p>
                    </div>
                  </li>
                ))}
              </ol>
            </section>

            {/* === Calcul ROI === */}
            <section className="expertises-cases tarifs-roi" id="roi">
              <div className="expertise-eyebrow eyebrow"><span className="pulse" />Calcul ROI concret</div>
              <h2 className="expertises-cases-title">
                Combien ça <em>te rapporte vraiment.</em>
              </h2>
              <p className="expertises-cases-lead">
                Exemple type, palier 2 (150 €/mois de stack) pour une TPE de 4 personnes :
              </p>

              <div className="budget-roi-grid">
                <div className="budget-roi-card">
                  <div className="budget-roi-card-label">Coût total / an</div>
                  <div className="budget-roi-card-value">2 290 €</div>
                  <div className="budget-roi-card-detail">490 € setup + 150 €/mois × 12 mois</div>
                </div>
                <div className="budget-roi-card">
                  <div className="budget-roi-card-label">Heures gagnées / an</div>
                  <div className="budget-roi-card-value">520 h</div>
                  <div className="budget-roi-card-detail">10h/semaine × 52 semaines</div>
                </div>
                <div className="budget-roi-card">
                  <div className="budget-roi-card-label">Valeur économique / an</div>
                  <div className="budget-roi-card-value">26 000 €</div>
                  <div className="budget-roi-card-detail">520h × 50 €/h coût horaire moyen TPE</div>
                </div>
                <div className="budget-roi-card budget-roi-card-highlight">
                  <div className="budget-roi-card-label">ROI net</div>
                  <div className="budget-roi-card-value">×11,4</div>
                  <div className="budget-roi-card-detail">Amorti en 32 jours, gain net 23 710 €/an</div>
                </div>
              </div>

              <p className="expertises-cases-lead" style={{ marginTop: '24px' }}>
                Ce calcul est conservateur : il ne compte que les heures gagnées, pas les RDV supplémentaires pris ni les factures encaissées plus vite. Sur les pipelines de prospection (palier 2), on compte aussi 8 à 15 RDV qualifiés supplémentaires par mois, qui se traduisent en CA additionnel selon ton taux de closing.
              </p>
            </section>

            {/* === Cas client === */}
            <section className="expertises-cases" id="cas">
              <div className="expertise-eyebrow eyebrow"><span className="pulse" />Cas client réel</div>
              <h2 className="expertises-cases-title">
                Un client qui a <em>commencé palier 1.</em>
              </h2>
              <p className="expertises-cases-lead">
                Comment un seul scénario à 110 €/mois est devenu une stack à 380 €/mois en 8 mois, avec un ROI ×4.2 sur la même période.
              </p>
              <article className="budget-case">
                <div className="budget-case-header">
                  <div className="expertises-case-tag">{CASE_STUDY.sector}</div>
                </div>
                <div className="budget-case-stats">
                  <div className="budget-case-stat">
                    <span className="budget-case-stat-label">Démarrage</span>
                    <span className="budget-case-stat-value">{CASE_STUDY.budgetStart}</span>
                  </div>
                  <span className="budget-case-stat-arrow" aria-hidden="true">→</span>
                  <div className="budget-case-stat">
                    <span className="budget-case-stat-label">Aujourd'hui</span>
                    <span className="budget-case-stat-value">{CASE_STUDY.budgetNow}</span>
                  </div>
                  <span className="budget-case-stat-arrow" aria-hidden="true">→</span>
                  <div className="budget-case-stat budget-case-stat-highlight">
                    <span className="budget-case-stat-label">ROI</span>
                    <span className="budget-case-stat-value">{CASE_STUDY.roi}</span>
                  </div>
                </div>
                <p className="budget-case-body">{CASE_STUDY.body}</p>
              </article>
            </section>

            {/* === FAQ === */}
            <section className="expertises-faq" id="faq" aria-labelledby="faq-title">
              <div className="expertise-eyebrow eyebrow"><span className="pulse" />Questions fréquentes · Budget</div>
              <h2 className="expertises-faq-title" id="faq-title">
                Ce qu'on nous demande <em>sur le coût 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 chiffre <em>ton cas précis</em>&nbsp;?</h2>
            <p>30 minutes, gratuit, sans engagement. On regarde ton stack actuel, ton volume, ce qui te bouffe le plus de temps. À la fin de l'appel, tu as : le palier qui te correspond, le coût mensuel total, et l'amortissement estimé en jours.</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 formats Boom Maker <ArrowUpRight /></a>
            </div>
          </div>
        </div>
      </section>

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

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