/* Page /cout-automatisation-entreprise — cas d'usage généré automatiquement (pipeline GSC).
 * Gabarit standard BoomMaker : hero + sections + FAQ + CTA. CSS partagés only. */

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

const C = {
  "slug": "cout-automatisation-entreprise",
  "breadcrumb": "Coût automatisation",
  "eyebrow": "Stratégie · Budget 2026",
  "h1": "Combien coûte vraiment",
  "h1Em": "l'automatisation d'une entreprise ?",
  "lead": "Licences, temps de setup, maintenance : voilà ce que tu vas dépenser. Et ce que tu peux raisonnablement espérer récupérer.",
  "blocks": [
    {
      "type": "text",
      "eyebrow": "Le vrai sujet",
      "h2": "Pourquoi la question du coût",
      "h2Em": "est mal posée",
      "intro": "",
      "paragraphs": [
        "Quand on cherche 'combien coûte l'automatisation', on s'attend à un tarif. La réalité : ça dépend de ce que tu automatises, avec quels outils, et si tu le fais toi-même ou avec un prestataire.",
        "Ce qui est sûr, c'est que le no-code a radicalement changé l'équation. Il y a cinq ans, automatiser un process métier demandait un développeur et un budget de plusieurs dizaines de milliers d'euros. Aujourd'hui, les outils comme Make, n8n ou Zapier permettent de connecter tes apps et d'automatiser des tâches répétitives pour quelques dizaines d'euros par mois.",
        "Le vrai coût, c'est la somme de trois choses : les licences logicielles, le temps ou les honoraires pour construire les automatisations, et la maintenance dans la durée. On va détailler chacun."
      ],
      "stats": [],
      "cards": [],
      "steps": [],
      "items": [],
      "columns": [],
      "rows": [],
      "cases": [],
      "label": "",
      "text": ""
    },
    {
      "type": "stats",
      "eyebrow": "Les chiffres concrets",
      "h2": "Ce que ça coûte, ce que ça rapporte",
      "h2Em": "",
      "intro": "Des fourchettes réalistes pour une TPE ou PME qui démarre avec le no-code.",
      "paragraphs": [],
      "stats": [
        {
          "value": "30 à 150 €/mois",
          "label": "Licences outils no-code (Make, n8n, Zapier) selon le volume de tâches automatisées"
        },
        {
          "value": "500 à 3 000 €",
          "label": "Budget setup pour un premier projet avec un prestataire spécialisé, selon la complexité"
        },
        {
          "value": "8 à 20 h/semaine",
          "label": "Temps humain récupéré dans les équipes une fois les automatisations en place"
        },
        {
          "value": "2 à 6 mois",
          "label": "Délai habituel pour rentabiliser un premier projet d'automatisation en TPE/PME"
        }
      ],
      "cards": [],
      "steps": [],
      "items": [],
      "columns": [],
      "rows": [],
      "cases": [],
      "label": "",
      "text": ""
    },
    {
      "type": "cards",
      "eyebrow": "Les trois postes de coût",
      "h2": "Ce que tu vas vraiment payer",
      "h2Em": "",
      "intro": "Pas de surprise : voilà où va l'argent.",
      "paragraphs": [],
      "stats": [],
      "cards": [
        {
          "tag": "Poste 01",
          "title": "Les licences logicielles",
          "body": "Make démarre à 9 €/mois pour un usage léger. Zapier est plus cher (à partir de 20 €/mois) mais plus simple à prendre en main. n8n peut être auto-hébergé gratuitement si tu as un minimum de technique. Pour une PME avec plusieurs automatisations actives, compte 50 à 150 €/mois de licences."
        },
        {
          "tag": "Poste 02",
          "title": "Le setup et la conception",
          "body": "C'est souvent le poste le plus important au départ. Si tu fais appel à un studio comme Boom Maker, un projet simple (une automatisation bien cadrée) démarre autour de 500 €. Un projet plus complet avec plusieurs flux interconnectés peut aller jusqu'à 2 000 à 3 000 €. Si tu le fais toi-même, compte du temps d'apprentissage : quelques jours à quelques semaines selon ton niveau."
        },
        {
          "tag": "Poste 03",
          "title": "La maintenance et l'évolution",
          "body": "Une automatisation n'est pas un objet figé. Quand un outil tiers change son API, quand ton process évolue, il faut adapter. En pratique, une heure de maintenance par mois suffit pour des automatisations simples. Pour des flux complexes ou critiques, un contrat de maintenance mensuel avec un prestataire tourne entre 100 et 400 €/mois."
        }
      ],
      "steps": [],
      "items": [],
      "columns": [],
      "rows": [],
      "cases": [],
      "label": "",
      "text": ""
    },
    {
      "type": "steps",
      "eyebrow": "Comment bien démarrer",
      "h2": "La méthode pour ne pas gaspiller ton budget",
      "h2Em": "",
      "intro": "",
      "paragraphs": [],
      "stats": [],
      "cards": [],
      "steps": [
        {
          "title": "Identifie une tâche répétitive précise",
          "body": "Pas 'automatiser la compta' mais 'envoyer automatiquement la relance de facture J+7'. Plus c'est précis, plus c'est rapide à construire et plus le ROI est visible."
        },
        {
          "title": "Estime le temps humain actuellement dépensé",
          "body": "Combien d'heures par semaine cette tâche prend-elle dans ton équipe ? Multiplie par le coût horaire. C'est ton plafond de budget raisonnable pour l'automatiser."
        },
        {
          "title": "Choisis l'outil adapté à ton volume",
          "body": "Pour démarrer, Make est le meilleur rapport puissance/prix. Zapier convient si tu veux aller vite sans apprendre. n8n si tu veux garder la main sur tes données et maîtriser les coûts à long terme."
        },
        {
          "title": "Lance un pilote sur 30 jours",
          "body": "Construis une seule automatisation, mesure le temps gagné, ajuste. Ne cherche pas à tout automatiser d'un coup. Un pilote réussi convainc les équipes et justifie d'aller plus loin."
        }
      ],
      "items": [],
      "columns": [],
      "rows": [],
      "cases": [],
      "label": "",
      "text": ""
    },
    {
      "type": "callout",
      "eyebrow": "",
      "h2": "",
      "h2Em": "",
      "intro": "",
      "paragraphs": [],
      "stats": [],
      "cards": [],
      "steps": [],
      "items": [],
      "columns": [],
      "rows": [],
      "cases": [],
      "label": "À retenir",
      "text": "L'automatisation no-code n'est pas gratuite, mais elle est accessible. Le vrai risque n'est pas de trop dépenser : c'est de mal cibler et d'automatiser une tâche qui ne coûte presque rien à faire à la main."
    }
  ],
  "faq": [
    {
      "q": "Peut-on automatiser avec un budget inférieur à 100 €/mois ?",
      "a": "Oui, tout à fait. Make propose un plan à 9 €/mois qui couvre largement les besoins d'une TPE qui démarre. Si tu construis toi-même tes automatisations, tu peux rester sous les 30 €/mois de licences pour commencer. Le budget grimpe surtout si tu fais appel à un prestataire pour le setup, ce qui reste souvent le choix le plus rapide."
    },
    {
      "q": "Faut-il savoir coder pour automatiser avec ces outils ?",
      "a": "Non. Make, Zapier et la plupart des outils no-code fonctionnent avec une interface visuelle. Tu connectes des apps, tu définis des conditions, tu testes. Certaines situations avancées demandent un peu de logique ou de JSON, mais rien qui nécessite d'être développeur. Un fondateur curieux peut apprendre les bases en quelques jours."
    },
    {
      "q": "Quelle différence entre faire soi-même et passer par un prestataire ?",
      "a": "Faire soi-même coûte moins cher en argent, mais plus en temps. Un prestataire spécialisé va plus vite, évite les erreurs classiques et livre quelque chose de robuste dès le départ. Pour une automatisation critique (facturation, CRM, onboarding client), passer par un expert est souvent plus rentable que de tâtonner plusieurs semaines."
    },
    {
      "q": "Les coûts augmentent-ils avec le temps ?",
      "a": "Les licences sont généralement liées au volume de tâches exécutées. Si ton activité grandit et que tes automatisations tournent plus souvent, tu peux monter d'un plan. C'est prévisible et progressif. La maintenance, elle, reste stable une fois les flux bien construits."
    },
    {
      "q": "Quels types de tâches sont les plus rentables à automatiser en premier ?",
      "a": "Les tâches à haute fréquence et faible valeur ajoutée : relances de devis ou factures, saisie de données entre deux outils, envoi de rapports récurrents, notifications internes, qualification de leads entrants. Ce sont celles qui libèrent le plus de temps rapidement."
    },
    {
      "q": "Est-ce qu'une automatisation peut tomber en panne ?",
      "a": "Oui, ça arrive. Un outil tiers change son API, une condition n'est plus valide, un quota est dépassé. C'est pour ça que la maintenance compte. Les bons outils envoient des alertes en cas d'erreur. Avec un suivi régulier, une panne se détecte et se corrige en moins d'une heure dans la plupart des cas."
    }
  ],
  "ctaTitle": "Tu veux savoir ce que ça coûterait",
  "ctaEm": "pour ton cas précis ?",
  "ctaText": "En 30 minutes, on analyse une tâche répétitive de ton quotidien et on te donne une estimation honnête : temps de setup, licences, et ce que tu peux espérer récupérer. Aucun engagement.",
  "ctaSecondary": null
};

const AFF = {"make":"https://www.make.com/en/register?pc=boommaker","airtable":"https://airtable.com/invite/r/b7FpxImb","claude":"https://claude.ai/referral/JkRs2Ml5fA","emelia":"https://emelia.io/fr?_by=julia87"};
const affLink = (name) => AFF[String(name || '').toLowerCase().trim()] || null;

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>
    </>
  );
};

/* Rend un bloc de contenu selon son type. Wrapper commun = .expertises-cases
 * (eyebrow + titre), puis corps spécifique. */
const Block = ({ b }) => {
  const head = (
    <>
      {b.eyebrow ? (
        <div className="expertise-eyebrow eyebrow"><span className="pulse" />{b.eyebrow}</div>
      ) : null}
      {b.h2 ? (
        <h2 className="expertises-cases-title">{b.h2}{b.h2Em ? <> <em>{b.h2Em}</em></> : null}</h2>
      ) : null}
      {b.intro ? <p className="uc-intro">{b.intro}</p> : null}
    </>
  );

  let body = null;
  if (b.type === 'stats') {
    body = (
      <div className="uc-stats">
        {b.stats.map((s, i) => (
          <div className="uc-stat" key={i}>
            <div className="uc-stat-value">{s.value}</div>
            <span className="uc-stat-label">{s.label}</span>
          </div>
        ))}
      </div>
    );
  } else if (b.type === 'cards') {
    body = (
      <div className="uc-cards">
        {b.cards.map((card, i) => (
          <article className="uc-card" key={i}>
            {card.tag ? <div className="uc-card-tag">{card.tag}</div> : null}
            <h3 className="uc-card-title">{card.title}</h3>
            <p className="uc-card-body">{card.body}</p>
          </article>
        ))}
      </div>
    );
  } else if (b.type === 'steps') {
    body = (
      <ol className="uc-steps">
        {b.steps.map((s, i) => (
          <li className="uc-step" key={i}>
            <div className="uc-step-num">/ {String(i + 1).padStart(2, '0')}</div>
            <div className="uc-step-content">
              <h3>{s.title}</h3>
              <p>{s.body}</p>
            </div>
          </li>
        ))}
      </ol>
    );
  } else if (b.type === 'comparison') {
    body = (
      <div className="uc-table-wrap">
        <table className="uc-table">
          <thead>
            <tr>{b.columns.map((col, i) => <th key={i}>{col}</th>)}</tr>
          </thead>
          <tbody>
            {b.rows.map((row, ri) => (
              <tr key={ri}>
                {row.map((cell, ci) => {
                  if (ci !== 0) return <td key={ci}>{cell}</td>;
                  const href = affLink(cell);
                  return (
                    <th scope="row" key={ci}>
                      {href
                        ? <a href={href} target="_blank" rel="sponsored noopener">{cell}</a>
                        : cell}
                    </th>
                  );
                })}
              </tr>
            ))}
          </tbody>
        </table>
        {b.rows.some((r) => affLink(r[0])) ? (
          <p className="uc-aff-note">Certains liens sont affiliés : si tu passes par eux, Boom Maker peut toucher une commission, sans surcoût pour toi.</p>
        ) : null}
      </div>
    );
  } else if (b.type === 'cases') {
    body = (
      <div className="uc-cases">
        {b.cases.map((cs, i) => (
          <article className="uc-case" key={i}>
            <div className="uc-case-profile">{cs.profile}</div>
            {cs.context ? <p className="uc-case-context">{cs.context}</p> : null}
            {cs.result ? <p className="uc-case-result">{cs.result}</p> : null}
          </article>
        ))}
      </div>
    );
  } else if (b.type === 'checklist') {
    body = (
      <ul className="uc-checklist">
        {b.items.map((it, i) => (
          <li key={i}>
            <Check />
            <span>{it.strong ? <strong>{it.strong} </strong> : null}{it.text}</span>
          </li>
        ))}
      </ul>
    );
  } else if (b.type === 'callout') {
    body = (
      <div className="uc-callout">
        {b.label ? <span className="uc-callout-label">{b.label}</span> : null}
        <p>{b.text}</p>
      </div>
    );
  } else {
    body = b.paragraphs.map((p, i) => (
      <p className="expertises-cases-lead" key={i}>{p}</p>
    ));
  }

  return <section className="expertises-cases">{head}{body}</section>;
};

const PageContent = () => {
  useReveal();
  return (
    <div className="usecase-page tarifs-page">
      <PageNav />

      <article className="audit-hero">
        <div className="container">
          <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">{C.breadcrumb}</span>
          </nav>
          <span className="eyebrow"><span className="pulse" /> {C.eyebrow}</span>
          <h1>{C.h1}{C.h1Em ? <> <em>{C.h1Em}</em></> : null}</h1>
          <p className="lead">{C.lead}</p>
        </div>
      </article>

      <section className="expertises-content tarifs-content">
        <div className="container">
          <div className="expertises-main">
            {C.blocks.map((b, bi) => <Block b={b} key={bi} />)}

            {C.faq.length ? (
              <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 qu'on nous demande <em>le plus souvent.</em></h2>
                <div className="expertises-faq-list">
                  {C.faq.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>
            ) : null}
          </div>
        </div>
      </section>

      <section className="partners-content partners-content-minimal">
        <div className="container">
          <div className="partners-cta-final">
            <h2>{C.ctaTitle}{C.ctaEm ? <> <em>{C.ctaEm}</em></> : null}</h2>
            <p>{C.ctaText}</p>
            <div className="partners-cta">
              <a href="/audit-gratuit" className="btn btn-glow">Réserver l'audit gratuit <ArrowUpRight /></a>
              {C.ctaSecondary ? (
                <a href={C.ctaSecondary.href} className="btn btn-ghost">{C.ctaSecondary.label} <ArrowUpRight /></a>
              ) : (
                <a href="/cas-usage" className="btn btn-ghost">Voir tous les cas d'usage <ArrowUpRight /></a>
              )}
            </div>
          </div>
        </div>
      </section>

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

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