// === /newsletter/septembre-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": "septembre-2026",
  "date": "Septembre 2026",
  "title": "Une bonne réponse IA reprend les mots du prospect",
  "teaser": "Septembre, saison des agents IA qu'on branche partout. Le tri se fait sur un détail : est-ce qu'ils écrivent vraiment à quelqu'un, ou à personne.",
  "extrait": {
    "titre": "Une bonne réponse IA reprend",
    "titreEm": "les mots du prospect",
    "paragraphe": "Avant, on faisait comme tout le monde : une bibliothèque de modèles, une réponse par cas de figure. Le prospect écrit trois lignes très précises sur sa situation, il reçoit un bloc rédigé six mois plus tôt pour quelqu'un d'autre. Ça se voit en deux secondes. Et ça tue la conversation.",
    "chiffres": []
  },
  "corps": {
    "edito": "Septembre, saison des agents IA qu'on branche partout. Le tri se fait sur un détail : est-ce qu'ils écrivent vraiment à quelqu'un, ou à personne.",
    "paragraphes": [
      "Avant, on faisait comme tout le monde : une bibliothèque de modèles, une réponse par cas de figure. Le prospect écrit trois lignes très précises sur sa situation, il reçoit un bloc rédigé six mois plus tôt pour quelqu'un d'autre. Ça se voit en deux secondes. Et ça tue la conversation.",
      "Chez BoomMaker, l'IA lit l'échange réel avant d'écrire. Elle classe l'intention, mais la catégorie ne sert qu'à décider de l'action à déclencher : relancer, programmer un appel, sortir du circuit. Elle ne sert jamais à piocher un texte prêt à l'emploi. La rédaction repart du vocabulaire du prospect, de ce qu'il a nommé lui-même comme problème.",
      "Ce que ça change : la réponse ressemble enfin à une réponse. Et le coût tient en quelques centimes par message, bien moins que le quart d'heure que tu passes à retailler un modèle à la main.",
      "Ce que tu peux en retirer : garde la classification pour piloter tes actions, pas pour écrire. Le modèle type sert ta logistique, jamais ta conversation."
    ],
    "chiffres": [],
    "aTester": "Prends tes dix dernières réponses envoyées à des prospects. Surligne dans chacune les mots qui viennent du message reçu. Si tu surlignes moins de trois mots, tu envoies un modèle, pas une réponse. Réécris les deux pires en repartant uniquement de ce que le prospect a écrit.",
    "aTesterEtapes": [
      "Rassembler tes dix dernières réponses envoyées",
      "Surligner les mots repris du prospect",
      "Réécrire les deux plus génériques"
    ],
    "outil": {
      "nom": "Zapier MCP",
      "prix": "49 $/mois (Zapier Professional) + 20 $/mois (Claude Pro)",
      "verdict": "Bien si ton agent rédige déjà correctement et qu'il lui manque juste le droit d'agir : créer le deal, envoyer le Slack. Inutile si ta base est sale, tu ne ferais qu'accélérer tes erreurs."
    },
    "articles": [
      {
        "slug": "zapier-mcp-2026-agents-ia-9000-apps-pme",
        "url": "https://www.boommaker.io/blog/zapier-mcp-2026-agents-ia-9000-apps-pme",
        "cat": null,
        "title": "Brancher tes agents IA sur 9 000 apps avec Zapier MCP",
        "reco": "Le guide qui va avec l'outil du mois : configuration, accès admin, et les cas d'usage HubSpot ou Slack qui tiennent la route."
      },
      {
        "slug": "bpifrance-osez-ia-diagnostic-data-pme-2026",
        "url": "https://www.boommaker.io/blog/bpifrance-osez-ia-diagnostic-data-pme-2026",
        "cat": null,
        "title": "Bpifrance ouvre 1 000 diagnostics IA pour les PME",
        "reco": "40 % pris en charge pour faire auditer tes automatisations avant de dépenser. Si tu as entre 20 et 250 salariés, lis avant que les places partent."
      },
      {
        "slug": "hubspot-agent-builder-2026-cas-usage-pme-b2b",
        "url": "https://www.boommaker.io/blog/hubspot-agent-builder-2026-cas-usage-pme-b2b",
        "cat": null,
        "title": "HubSpot Agent Builder : 4 cas concrets pour ta PME B2B",
        "reco": "L'interface AI-first est imposée depuis le 31 août. Autant savoir ce que tu peux en tirer plutôt que de la subir six mois."
      }
    ]
  },
  "datePublished": "2026-10-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_septembre-2026" variant="bloc" />
        </div>
      </div>
    </article>

    <FooterMin />
  </div>
);

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