// === /newsletter/octobre-2026 : édition archivée ===
// Fichier généré par /api/newsletter-digest à la création de la campagne.
// La mise en page reprend celle du mail : un bloc, une carte.
const { Logo, ArrowUpRight, ThemeToggle, FooterMin, NewsletterForm } = window.BMShared;

const E = {
  "slug": "octobre-2026",
  "date": "Octobre 2026",
  "title": "Mon blog tourne seul, sauf la vérification des liens",
  "teaser": "Ce mois-ci, je te montre l'endroit exact où j'ai refusé d'automatiser. Pas par principe de prudence : parce que la machine se trompait et que personne ne le voyait.",
  "extrait": {
    "titre": "Mon blog tourne seul, sauf",
    "titreEm": "la vérification des liens",
    "paragraphe": "Chaque semaine, un article sort sur mon blog. Le sujet est choisi, le texte est rédigé, la mise en ligne se fait. Je n'interviens à aucun moment de la chaîne. C'est exactement ce que je vends aux autres, donc c'est la moindre des choses que je le fasse chez moi.",
    "chiffres": []
  },
  "corps": {
    "edito": "Ce mois-ci, je te montre l'endroit exact où j'ai refusé d'automatiser. Pas par principe de prudence : parce que la machine se trompait et que personne ne le voyait.",
    "paragraphes": [
      "Chaque semaine, un article sort sur mon blog. Le sujet est choisi, le texte est rédigé, la mise en ligne se fait. Je n'interviens à aucun moment de la chaîne. C'est exactement ce que je vends aux autres, donc c'est la moindre des choses que je le fasse chez moi.",
      "Sauf qu'un détail m'a rattrapée. L'IA cite des sources, et une partie de ces sources n'existe plus. Des URLs mortes, des 404, des pages supprimées depuis. Rien ne plante, rien n'alerte, l'article part quand même. Tu ne le vois que le jour où un lecteur te le signale, et là c'est ta crédibilité qui a pris.",
      "J'ai donc ajouté une étape avant publication : un contrôle des liens externes qui sort un rapport des liens cassés. C'est moi qui valide ou qui retire. Semi-automatisé, assumé.",
      "La leçon vaut pour n'importe quelle chaîne que tu montes : automatiser, ce n'est pas se désintéresser, c'est choisir où l'humain reste. Si tu ne choisis pas cet endroit, tu automatises tes erreurs, pas ton travail."
    ],
    "chiffres": [],
    "aTester": "Prends l'automatisation qui tourne chez toi depuis le plus longtemps et cherche son point aveugle. Pas l'étape principale, elle marche. L'endroit où une donnée fausse peut passer sans que personne ne lève la main. Puis ajoute une validation humaine à cet endroit précis, et nulle part ailleurs.",
    "aTesterEtapes": [
      "Lister les sorties que personne ne relit jamais",
      "Choisir le point où une erreur coûte cher",
      "Y insérer un rapport à valider avant envoi"
    ],
    "outil": {
      "nom": "Make",
      "prix": "",
      "verdict": "Bien pour enchaîner recherche, rédaction et publication, et surtout pour glisser une étape de contrôle au milieu sans tout casser. Moins utile si tu veux seulement générer du texte : un outil IA seul suffit."
    },
    "articles": [
      {
        "slug": "notion-3-8-agents-ia-mcp-cas-usage-pme-2026",
        "url": "https://www.boommaker.io/blog/notion-3-8-agents-ia-mcp-cas-usage-pme-2026",
        "cat": null,
        "title": "Notion 3.8 et ses agents IA, 5 cas d'usage pour ta PME",
        "reco": "Si ta boîte vit déjà dans Notion, tu peux automatiser sans passer par un scénario à modéliser."
      },
      {
        "slug": "openai-dots-2026-agents-autonomes-cas-usage-pme",
        "url": "https://www.boommaker.io/blog/openai-dots-2026-agents-autonomes-cas-usage-pme",
        "cat": null,
        "title": "OpenAI Dots, 5 tâches que tu peux confier à un agent autonome",
        "reco": "Lis surtout la partie supervision : un agent avec des accès larges sans périmètre, c'est le pire des stagiaires."
      },
      {
        "slug": "gpt-live-1-agent-vocal-telephonique-cas-usage-pme-2026",
        "url": "https://www.boommaker.io/blog/gpt-live-1-agent-vocal-telephonique-cas-usage-pme-2026",
        "cat": null,
        "title": "GPT-Live-1, 4 usages vocaux concrets pour ta PME",
        "reco": "Un agent vocal à 0,05 $/min qui qualifie tes appels : utile si tu rates encore des prospects au téléphone."
      }
    ]
  },
  "datePublished": "2026-11-01"
};

const Eyebrow = ({ children }) => (
  <span className="eyebrow"><span className="pulse" /> {children}</span>
);

const EditionApp = () => (
  <div className="page">
    <nav className="nav" id="nav">
      <a href="/" className="nav-logo" aria-label="Boom Maker"><Logo /></a>
      <div className="nav-actions">
        <ThemeToggle />
        <a href="/newsletter#editions" className="btn btn-sm btn-ghost">Toutes les éditions</a>
      </div>
    </nav>

    <article className="section nl-edition">
      <div className="container">
        <Eyebrow>Le journal · {E.date.toLowerCase()}</Eyebrow>
        <h1 className="h1">
          {E.extrait.titre} {E.extrait.titreEm ? <em>{E.extrait.titreEm}</em> : null}
        </h1>
        {E.corps.edito ? <p className="lead">{E.corps.edito}</p> : null}

        <div className="nl-ed-card">
          <Eyebrow>Le truc du mois</Eyebrow>
          {E.corps.paragraphes.map((p, i) => <p key={i}>{p}</p>)}
        </div>

        {E.corps.chiffres.length === 3 ? (
          <div className="nl-ed-stats">
            <div className="nl-ed-escalier" aria-hidden="true"><span /><span /><span /></div>
            <div className="nl-tiles">
              {E.corps.chiffres.map((c) => (
                <div className="nl-tile" key={c.l}>
                  <div className="nl-tile-v">{c.v}</div>
                  <div className="nl-tile-l">{c.l}</div>
                </div>
              ))}
            </div>
          </div>
        ) : null}

        {E.corps.aTester ? (
          <div className="nl-ed-card">
            <Eyebrow>À tester chez toi</Eyebrow>
            <p>{E.corps.aTester}</p>
            {E.corps.aTesterEtapes.length === 3 ? (
              <ol className="nl-ed-steps">
                {E.corps.aTesterEtapes.map((e, i) => (
                  <li key={i}><b>{String(i + 1).padStart(2, '0')}</b><span>{e}</span></li>
                ))}
              </ol>
            ) : null}
          </div>
        ) : null}

        {E.corps.outil ? (
          <div className="nl-ed-card">
            <Eyebrow>L'outil du mois</Eyebrow>
            <div className="nl-ed-tool-head">
              <h3>{E.corps.outil.nom}</h3>
              {E.corps.outil.prix ? <span className="nl-ed-tool-prix">{E.corps.outil.prix}</span> : null}
            </div>
            <p>{E.corps.outil.verdict}</p>
          </div>
        ) : null}

        {E.corps.articles.length ? (
          <div className="nl-ed-links">
            <Eyebrow>À lire aussi</Eyebrow>
            {E.corps.articles.map((a) => (
              <a href={a.url} key={a.slug}>
                <strong>{a.title}</strong>
                <span>{a.reco}</span>
              </a>
            ))}
          </div>
        ) : null}

        <div className="nl-cta">
          <h2 className="h2">La prochaine édition, <em>dans ta boîte.</em></h2>
          <NewsletterForm source="edition_octobre-2026" variant="bloc" />
        </div>
      </div>
    </article>

    <FooterMin />
  </div>
);

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