/* Page /automatisation-contenu — landing SEO + vente du "Moteur de Contenu".
 * Cible "automatisation blog", "automatisation réseaux sociaux", "contenu IA".
 * Réutilise le design system : audit-hero, expertises-cases/case/faq,
 * partners-cta-final. Prix affiché : 890€ install + 590€/mois. */

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

/* === 5 étapes du moteur === */
const STEPS = [
  {
    tag: 'Étape 01',
    title: 'Veille de sujets',
    body: "Chaque semaine, l'IA scanne ton secteur (actus, tendances, questions que se posent tes clients) et propose des sujets qui intéressent vraiment ta cible et qui ont une chance de se positionner sur Google. Fini la page blanche.",
  },
  {
    tag: 'Étape 02',
    title: 'Rédaction dans ta voix',
    body: "On entraîne le moteur sur tes anciens contenus et une charte éditoriale. Résultat : des articles fouillés et structurés pour le SEO, et des posts réseaux qui sonnent comme toi, pas comme un robot. Tu n'écris plus une ligne.",
  },
  {
    tag: 'Étape 03',
    title: 'Visuels à ta charte',
    body: "Images de couverture d'article et visuels carrés pour les réseaux, générés automatiquement avec ton logo, tes couleurs, tes polices. Pas de Canva, pas de designer, pas de stock photo générique. Tout est à ta marque.",
  },
  {
    tag: 'Étape 04',
    title: 'Publication automatique',
    body: "L'article part directement en ligne sur ton blog (mise en forme, image, FAQ, liens internes). Les posts sont programmés sur tes réseaux aux bons créneaux. Tu vois le contenu apparaître, tu n'as rien fait.",
  },
  {
    tag: 'Étape 05',
    title: 'Pilotage et optimisation',
    body: "Tout est suivi dans un planning clair (sujets, statuts, performances). Chaque mois, on regarde ce qui marche, ce qui accroche, et on ajuste la ligne éditoriale. Le moteur s'améliore au fil du temps.",
  },
];

/* === Stack outils orchestrés === */
const STACK = [
  {
    label: 'Veille & recherche',
    items: ['Perplexity', 'Google Trends', 'Search Console'],
  },
  {
    label: 'Rédaction IA',
    items: ['Claude', 'GPT', 'Mistral'],
  },
  {
    label: 'Visuels',
    items: ['HTMLCSStoImage', 'Bannerbear', 'Canva API'],
  },
  {
    label: 'Blog / CMS',
    items: ['Contentful', 'WordPress', 'Webflow', 'Ghost'],
  },
  {
    label: 'Réseaux & programmation',
    items: ['LinkedIn', 'Buffer', 'Metricool', 'Instagram'],
  },
  {
    label: 'Orchestration',
    items: ['Make', 'n8n', 'Airtable', 'Notion'],
  },
];

/* === Preuve : le contenu de BoomMaker tourne déjà en auto === */
const CASES = [
  {
    sector: 'Blog BoomMaker',
    title: 'Un article SEO publié tout seul chaque semaine',
    body: "Recherche de sujet d'actu, rédaction longue dans la voix BoomMaker, image de couverture, schémas, FAQ, mise en ligne et maillage interne. Zéro intervention humaine. C'est ce moteur exact qu'on installe chez toi.",
    bullets: [
      'Recherche de sujet via Perplexity sur les tendances du mois',
      'Article de 1800 à 2800 mots structuré pour le référencement',
      'Couverture brandée et mise en ligne automatiques',
    ],
    tag: 'Make + Perplexity + Claude + Contentful',
  },
  {
    sector: 'LinkedIn BoomMaker',
    title: 'Des posts et visuels prêts, programmés à l\'avance',
    body: "Posts rédigés dans la voix de la marque et visuels carrés 1080x1080 générés à la charte, stockés dans un planning et programmés. Une présence régulière sans y passer ses soirées.",
    bullets: [
      'Visuels carrés générés automatiquement à la charte',
      'Ton et angle calés sur la voix de la marque',
      'Planning éditorial centralisé dans Airtable',
    ],
    tag: 'Claude + HTMLCSStoImage + Airtable',
  },
  {
    sector: 'Newsletter mensuelle',
    title: 'Le digest du mois monté tout seul',
    body: "Le 1er de chaque mois, un récap des articles publiés est rédigé et monté en brouillon, prêt à relire et envoyer. Le contenu travaille deux fois : sur le blog, puis dans la boîte mail de ta communauté.",
    bullets: [
      'Édito généré dans la voix de la marque',
      'Articles du mois agrégés automatiquement',
      'Brouillon prêt à envoyer, tu gardes le dernier mot',
    ],
    tag: 'Claude + Brevo',
  },
];

/* === Ce que tu reçois === */
const KPIS = [
  { value: '4', label: "Articles SEO publiés sur ton blog chaque mois" },
  { value: '12+', label: "Posts réseaux rédigés et programmés chaque mois" },
  { value: '100%', label: "Sur tes propres comptes, tu gardes la propriété de tout" },
  { value: '10h', label: "Récupérées chaque semaine sur la production de contenu" },
  { value: '0', label: "Canva, rédacteur freelance ou agence à gérer" },
];

/* === Résultats attendus (objectifs réalistes, pas des promesses) === */
const RESULTS = [
  { value: '×2 à ×3', label: "Trafic organique sur ton site en 6 à 12 mois, à partir d'une base modeste" },
  { value: '30 à 80', label: "Nouvelles requêtes positionnées sur Google en 6 mois" },
  { value: '+40%', label: "Portée moyenne sur LinkedIn grâce à une publication régulière" },
  { value: '2 à 5', label: "Demandes entrantes qualifiées par mois une fois le rythme stabilisé" },
];

/* === FAQ === */
const FAQS = [
  {
    q: "Le contenu ressemble vraiment à moi, ou à de l'IA générique ?",
    a: "À toi. On entraîne le moteur sur tes anciens contenus et une charte éditoriale qu'on définit ensemble (ton, vocabulaire, sujets interdits, références). Tu valides la voix sur les premiers contenus, on ajuste, et tu peux garder une validation en 1 clic avant chaque publication si tu préfères ne rien laisser passer sans toi.",
  },
  {
    q: "Est-ce que Google pénalise le contenu écrit par IA ?",
    a: "Non. Google pénalise le contenu inutile et bâclé, pas le contenu utile, peu importe comment il est produit. On génère des articles fouillés, structurés, avec FAQ, schémas et maillage interne, exactement ce que Google récompense. La preuve : c'est ce moteur qui fait tourner mon propre blog, et il est bien référencé.",
  },
  {
    q: "Je garde la main sur ce qui est publié ?",
    a: "Totalement. Deux modes au choix : auto (le contenu part tout seul) ou validation (tu approuves chaque pièce avant publication). Tu peux mettre en pause, changer un sujet, faire réécrire, ajouter une actu à chaud. Tout est sur tes comptes, tu n'es jamais enfermée.",
  },
  {
    q: "Sur quels réseaux ça marche ?",
    a: "LinkedIn en priorité (de loin le plus rentable en B2B), puis Instagram et Facebook selon ton activité. On programme via Buffer ou Metricool, ou directement sur l'API du réseau. On adapte le format des visuels et le ton à chaque canal.",
  },
  {
    q: "Et pour le blog, quels outils vous gérez ?",
    a: "Contentful, WordPress, Webflow, Ghost, Shopify. Si ton CMS a une API ou un webhook (c'est le cas de la quasi-totalité), on s'y connecte. Et si tu n'as pas encore de blog, on peut t'en installer un simple et rapide, ou brancher le moteur sur une page de ton site existant.",
  },
  {
    q: "Combien de temps avant de voir des résultats ?",
    a: "Le moteur publie dès la 2e semaine. Sur LinkedIn, l'effet est rapide : tu redeviens visible en quelques posts. Sur le SEO, compte 2 à 4 mois pour que Google prenne en compte tes nouveaux articles, c'est le jeu du référencement. Ce qui fait la différence, ce n'est pas un coup d'éclat, c'est la régularité, et c'est exactement ce que le moteur garantit.",
  },
  {
    q: "Combien ça coûte ?",
    a: "890€ d'installation (on entraîne le moteur sur ta voix, on crée tes templates et visuels, on connecte tes comptes, livré en 2 semaines) puis 590€/mois sans engagement pour que le moteur tourne et soit optimisé. À comparer à un rédacteur freelance (1500 à 3000€/mois) ou une agence de contenu (2000 à 5000€/mois) pour un volume équivalent.",
  },
  {
    q: "Et si ça ne marche pas pour moi ?",
    a: "Avant de déployer, on chiffre ensemble ce que ça te rapporte : heures gagnées, trafic, leads attendus. Si l'amortissement dépasse 90 jours, on ne déploie pas et on ne facture rien. C'est la règle qui filtre une partie des demandes qu'on reçoit, et c'est ce qui nous force à ne livrer que ce qui crée vraiment de la valeur.",
  },
];

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 de contenu</span>
  </nav>
);

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

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

      {/* HERO */}
      <article className="audit-hero">
        <div className="container">
          <PageBreadcrumb />
          <span className="eyebrow"><span className="pulse" /> Le Moteur de Contenu · blog + réseaux en pilote auto</span>
          <h1>
            Automatisation de contenu : ton blog et tes réseaux <em>en pilote automatique</em>.
          </h1>
          <p className="lead">
            Veille de sujets, rédaction dans ta voix, visuels à ta charte, publication et programmation. Un moteur installé sur tes propres comptes qui produit ton contenu chaque semaine, sans que tu y touches. Le contenu d'une agence, le prix d'un outil. <strong>ROI sous 90 jours, sinon on ne déploie pas.</strong>
          </p>
        </div>
      </article>

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

            {/* === Problème === */}
            <section className="expertises-cases">
              <div className="expertise-eyebrow eyebrow"><span className="pulse" />Le problème qu'on résout</div>
              <h2 className="expertises-cases-title">
                Tu sais que le contenu rapporte. Mais tu n'as <em>jamais le temps</em> d'en produire.
              </h2>
              <p className="expertises-cases-lead">
                Un article de blog correct, c'est 3 à 5 heures. Un post LinkedIn qui tient la route, 45 minutes. Avec une vraie régularité, ça fait un mi-temps. Du coup tu publies par à-coups, ton référencement stagne, ton LinkedIn s'endort, et tes prospects ne voient jamais que tu existes. Pendant ce temps, tes concurrents publient chaque semaine et raflent la visibilité.
              </p>
            </section>

            {/* === Les 5 étapes du moteur === */}
            <section className="expertises-cases" id="comment">
              <div className="expertise-eyebrow eyebrow"><span className="pulse" />Comment ça marche</div>
              <h2 className="expertises-cases-title">
                5 étapes. <em>Un seul moteur.</em> Zéro page blanche.
              </h2>
              <p className="expertises-cases-lead">
                De la recherche de sujet à la mise en ligne, chaque étape est orchestrée par Make ou n8n. Tu interviens seulement si tu veux valider ou ajuster. Le reste tourne tout seul, chaque semaine, sur tes comptes.
              </p>
              <div className="expertises-cases-grid">
                {STEPS.map((s) => (
                  <article className="expertises-case" key={s.tag}>
                    <div className="expertises-case-tag">{s.tag}</div>
                    <h3>{s.title}</h3>
                    <p>{s.body}</p>
                  </article>
                ))}
              </div>
            </section>

            {/* === Stack === */}
            <section className="expertises-cases" id="stack">
              <div className="expertise-eyebrow eyebrow"><span className="pulse" />Stack qu'on intègre</div>
              <h2 className="expertises-cases-title">
                On branche <em>tes outils</em>, pas une usine à gaz.
              </h2>
              <p className="expertises-cases-lead">
                Si tu as déjà un blog WordPress et un Buffer, on connecte. Si tu pars de zéro, on choisit ensemble la combinaison la plus simple. Pas de revendeur, pas d'affiliation cachée, pas d'outil que tu paies en double.
              </p>
              <div className="contenu-stack-grid">
                {STACK.map((s) => (
                  <div className="contenu-stack-group" key={s.label}>
                    <div className="contenu-stack-label">{s.label}</div>
                    <ul>
                      {s.items.map((it) => <li key={it}>{it}</li>)}
                    </ul>
                  </div>
                ))}
              </div>
            </section>

            {/* === Preuve : le contenu de BoomMaker === */}
            <section className="expertises-cases" id="cas">
              <div className="expertise-eyebrow eyebrow"><span className="pulse" />La meilleure preuve : notre propre contenu</div>
              <h2 className="expertises-cases-title">
                Ce moteur, il fait déjà tourner <em>BoomMaker</em>.
              </h2>
              <p className="expertises-cases-lead">
                Je ne te vends pas une théorie. Mon blog, mon LinkedIn et ma newsletter tournent avec ce système, sans que j'y passe mes journées. C'est exactement ce moteur qu'on installe et qu'on calibre pour toi.
              </p>
              <div className="expertises-cases-grid">
                {CASES.map((c) => (
                  <article className="expertises-case" key={c.title}>
                    <div className="expertises-case-tag">{c.tag}</div>
                    <span className="expertises-case-sector">{c.sector}</span>
                    <h3>{c.title}</h3>
                    <p>{c.body}</p>
                    <ul>
                      {c.bullets.map((b) => (
                        <li key={b}><Check /> {b}</li>
                      ))}
                    </ul>
                  </article>
                ))}
              </div>
            </section>

            {/* === Ce que tu reçois === */}
            <section className="expertises-cases" id="livrables">
              <div className="expertise-eyebrow eyebrow"><span className="pulse" />Ce que tu reçois chaque mois</div>
              <h2 className="expertises-cases-title">
                Le <em>volume d'une agence</em>, en pilote auto.
              </h2>
              <div className="contenu-kpis-grid">
                {KPIS.map((k) => (
                  <div className="contenu-kpi" key={k.label}>
                    <div className="contenu-kpi-value">{k.value}</div>
                    <div className="contenu-kpi-label">{k.label}</div>
                  </div>
                ))}
              </div>
              <p className="expertises-cases-lead" style={{ marginTop: '24px' }}>
                Volumes indicatifs pour un abonnement standard. On cale le rythme exact (canaux, fréquence, formats) sur ton activité et tes objectifs lors de l'audit gratuit.
              </p>
            </section>

            {/* === Résultats attendus === */}
            <section className="expertises-cases" id="resultats">
              <div className="expertise-eyebrow eyebrow"><span className="pulse" />Résultats attendus</div>
              <h2 className="expertises-cases-title">
                Ce que ça produit, <em>concrètement.</em>
              </h2>
              <p className="expertises-cases-lead">
                Le contenu utile et régulier, ça ne se voit pas en une semaine, ça se construit. Voici les ordres de grandeur qu'on vise sur les premiers mois, une fois le moteur lancé.
              </p>
              <div className="contenu-kpis-grid contenu-results-grid">
                {RESULTS.map((r) => (
                  <div className="contenu-kpi" key={r.label}>
                    <div className="contenu-kpi-value">{r.value}</div>
                    <div className="contenu-kpi-label">{r.label}</div>
                  </div>
                ))}
              </div>
              <p className="expertises-cases-lead" style={{ marginTop: '24px' }}>
                Fourchettes observées sur des activités B2B qui publient régulièrement. Très variable selon ton point de départ, ton secteur et la concurrence sur tes mots-clés. On fixe des objectifs réalistes ensemble à l'audit, et la garantie ROI 90 jours s'applique d'abord sur le temps que tu récupères chaque semaine.
              </p>
            </section>

            {/* === Prix === */}
            <section className="expertises-cases" id="prix">
              <div className="expertise-eyebrow eyebrow"><span className="pulse" />Le prix, clair et sans surprise</div>
              <h2 className="expertises-cases-title">
                Une installation, <em>puis un abonnement</em>. Sans engagement.
              </h2>
              <div className="contenu-pricing-grid">
                <div className="contenu-price-card">
                  <div className="contenu-price-tag">Installation</div>
                  <div className="contenu-price-amount">890 €<span>une fois</span></div>
                  <p className="contenu-price-desc">
                    On entraîne le moteur sur ta voix, on crée tes templates d'articles et tes visuels à ta charte, on connecte ton blog et tes réseaux. Livré et testé en 2 semaines.
                  </p>
                  <ul className="contenu-price-list">
                    <li><Check /> Charte éditoriale et entraînement sur ta voix</li>
                    <li><Check /> Templates d'articles + visuels brandés</li>
                    <li><Check /> Connexion blog, réseaux et planning</li>
                  </ul>
                </div>
                <div className="contenu-price-card contenu-price-card-featured">
                  <div className="contenu-price-tag">Abonnement</div>
                  <div className="contenu-price-amount">590 €<span>/ mois</span></div>
                  <p className="contenu-price-desc">
                    Le moteur tourne : articles, posts et visuels publiés chaque semaine. Suivi des performances et optimisation de la ligne éditoriale chaque mois. Tu gardes la propriété de tout.
                  </p>
                  <ul className="contenu-price-list">
                    <li><Check /> 4 articles SEO + 12 posts réseaux par mois</li>
                    <li><Check /> Visuels inclus, optimisation mensuelle</li>
                    <li><Check /> Sans engagement, 100% sur tes comptes</li>
                  </ul>
                </div>
              </div>
              <p className="expertises-cases-lead" style={{ marginTop: '24px' }}>
                Les coûts des outils IA (Claude, Perplexity, génération de visuels) tournent autour de 30 à 80€ par mois selon le volume, sur tes propres comptes ou refacturés au réel. Pas de marge cachée dessus.
              </p>
            </section>

            {/* === FAQ === */}
            <section className="expertises-faq" id="faq" aria-labelledby="faq-title">
              <div className="expertise-eyebrow eyebrow"><span className="pulse" />Questions fréquentes · Automatisation de contenu</div>
              <h2 className="expertises-faq-title" id="faq-title">
                Ce qu'on nous demande <em>tout le temps.</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 voir tourner <em>ton moteur de contenu</em>&nbsp;?</h2>
            <p>30 minutes, gratuit, sans engagement. On regarde ton activité, tes sujets, tes réseaux. À la fin de l'appel, tu repars avec un plan éditorial chiffré : combien de contenu par mois, sur quels canaux, à quel coût, en combien de temps.</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 tarifs <ArrowUpRight /></a>
            </div>
          </div>
        </div>
      </section>

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

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