// === Page /newsletter : le journal Boom Maker ===
const { useState } = React;
const {
  Logo, ArrowUpRight, Check, useReveal, ThemeToggle, FooterMin,
  NewsletterForm, JOURNAL_EDITIONS,
} = window.BMShared;

/* Nav complète : la page est maintenant rangée dans le menu "À propos",
 * un visiteur qui arrive par le menu doit pouvoir repartir ailleurs. */
const NlNav = () => {
  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="/plan-de-ciblage">Plan de ciblage</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="/newsletter" className="active" style={{ color: 'var(--cyan)' }}>Newsletter</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="/plan-de-ciblage">Plan de ciblage</a>
        <a href="/news">News</a>
        <span className="nav-mobile-group">/ À propos</span>
        <a href="/a-propos">BoomMaker</a>
        <a href="/newsletter" className="active">Newsletter</a>
        <a href="/#faq">FAQ</a>
        <a href="/contact">Contact</a>
        <a href="/audit-gratuit" className="btn btn-glow">Audit gratuit <ArrowUpRight /></a>
      </div>
    </>
  );
};

/* Les trois piliers du site, dits avec les mots d'un abonne et non d'une
 * page d'offre : la page ne parlait que de prospection, alors que le journal
 * couvre les trois. */
const SUJETS = [
  {
    n: '01',
    t: 'Prospection B2B',
    lien: '/expertises#trouver',
    d: "Les séquences qui obtiennent des réponses, les fichiers qui n'en valent pas la peine, et le canal qui porte encore cette année.",
  },
  {
    n: '02',
    t: 'No-code et automatisation',
    lien: '/expertises#connecter',
    d: "Make, n8n, les scénarios qui tiennent le lundi matin et ceux qui dupliquent ta base sans prévenir.",
  },
  {
    n: '03',
    t: 'Agents IA',
    lien: '/expertises#deleguer',
    d: "Claude dans un scénario réel : ce qu'on lui délègue, ce qu'on ne lui délègue jamais, et ce que ça coûte par mois.",
  },
];

const RECU = [
  { t: 'Le truc du mois', d: "Une question de terrain creusée à fond, avec ce qu'on a mesuré chez un client." },
  { t: 'Les chiffres', d: "Ce que ça a donné, en trois indicateurs. Même quand ils ne sont pas flatteurs." },
  { t: 'À tester chez toi', d: "Une action concrète que tu peux faire dans la semaine." },
  { t: "L'outil du mois", d: "Ce que j'ai testé, ce que ça coûte, et mon verdict." },
];

const POUR_QUI = [
  "Tu prospectes en B2B et tes campagnes répondent moins que prévu.",
  "Tu veux automatiser sans coder, sans y passer tes soirées.",
  "Tu entends parler d'agents IA partout et tu ne sais pas ce qui tient vraiment.",
  "Tu n'as pas le temps de tester 15 outils pour trouver le bon.",
];

const FAQ = [
  { q: 'Ça arrive quand ?', r: <>Une fois par mois. Pas plus.</> },
  { q: "C'est gratuit ?", r: <>Oui. Pas de version payante, pas de pitch caché.</> },
  {
    q: 'Que deviennent mes données ?',
    r: <>Ton email sert uniquement à t'envoyer le journal. Il n'est jamais revendu ni partagé. Tu te désinscris en 1 clic depuis n'importe quelle édition. <a href="/politique-de-confidentialite">Politique de confidentialité</a>.</>,
  },
  {
    q: "Je peux lire avant de m'abonner ?",
    r: <>Oui. <a href={`/newsletter/${JOURNAL_EDITIONS[0].slug}`}>Lis la dernière édition en entier</a>, puis décide.</>,
  },
];

const NewsletterApp = () => {
  useReveal();
  const derniere = JOURNAL_EDITIONS[0];
  const precedentes = JOURNAL_EDITIONS.slice(1);

  return (
    <div className="page nl-page">
      <NlNav />

      {/* 1. Hero */}
      <section className="section nl-hero">
        <div className="container">
          <span className="eyebrow reveal"><span className="pulse" /> Newsletter · une fois par mois</span>
          <h1 className="h1 reveal">
            Prospection, <span className="nowrap">no-code</span>, IA : ce qui marche vraiment. <em>Chiffres à l'appui.</em>
          </h1>
          <p className="lead reveal">
            Une fois par mois : une campagne de prospection, un scénario no-code ou un agent IA que j'ai installé
            chez un client. Ce que ça a coûté, ce que ça a donné. Aucun pitch, aucun spam.
          </p>
          <div className="nl-hero-form reveal">
            <NewsletterForm source="newsletter_page" variant="bloc" />
          </div>
        </div>
      </section>

      {/* 2. Les sujets */}
      <section className="section">
        <div className="container">
          <span className="eyebrow reveal"><span className="pulse" /> Les sujets</span>
          <h2 className="h2 reveal">Ce que je creuse, <em>un mois sur l'autre.</em></h2>
          <div className="nl-sujets reveal">
            {SUJETS.map((s) => (
              <div className="nl-sujet" key={s.n}>
                <span className="nl-sujet-n">{s.n}</span>
                <h3><a href={s.lien}>{s.t}</a></h3>
                <p>{s.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 3. Ce que tu reçois */}
      <section className="section">
        <div className="container">
          <span className="eyebrow reveal"><span className="pulse" /> Dans chaque édition</span>
          <div className="nl-cards reveal">
            {RECU.map((c) => (
              <div className="nl-card" key={c.t}>
                <h3>{c.t}</h3>
                <p>{c.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 4. Extrait de la dernière édition */}
      <section className="section">
        <div className="container">
          <div className="nl-extract reveal">
            <span className="eyebrow"><span className="pulse" /> Extrait · édition {derniere.date.toLowerCase()}</span>
            <h2 className="h2">Une liste complète n'est pas <em>une liste joignable.</em></h2>

            <div className="nl-extract-flow">
              <span><span className="nl-extract-num">18 687</span> sociétés identifiées au registre</span>
              <span className="nl-extract-arrow" aria-hidden="true">→</span>
              <span><span className="nl-extract-num">640 à 765</span> contacts réellement joignables</span>
            </div>

            <p>
              On a changé de source : des personnes déjà actives sur LinkedIn plutôt qu'un fichier du registre,
              et une séquence en un seul message court.
            </p>

            <div className="nl-tiles">
              <div className="nl-tile"><div className="nl-tile-v">41 %</div><div className="nl-tile-l">taux de réponse LinkedIn</div></div>
              <div className="nl-tile"><div className="nl-tile-v">126</div><div className="nl-tile-l">conversations ouvertes</div></div>
              <div className="nl-tile"><div className="nl-tile-v">117</div><div className="nl-tile-l">candidats identifiés</div></div>
            </div>

            <a href={`/newsletter/${derniere.slug}`} className="btn btn-ghost">
              Lire l'édition complète <ArrowUpRight size={14} />
            </a>
          </div>
        </div>
      </section>

      {/* 5. Pour qui */}
      <section className="section nl-for">
        <div className="container">
          <h2 className="h2 reveal">Pour toi si…</h2>
          <ul className="reveal">
            {POUR_QUI.map((l) => (
              <li key={l}><Check size={16} /><span>{l}</span></li>
            ))}
          </ul>
        </div>
      </section>

      {/* 6. Qui écrit */}
      <section className="section">
        <div className="container">
          <span className="eyebrow reveal"><span className="pulse" /> Qui écrit</span>
          <div className="nl-author reveal">
            <img src="/images/julia.jpeg" alt="Julia Levy, fondatrice de Boom Maker" width="140" height="140" loading="lazy" />
            <p>
              Je suis Julia, fondatrice de Boom Maker. Avant, marketing du luxe (Nespresso, Simone Pérèle) puis CMO
              de startup. Aujourd'hui, j'installe la prospection, les automatisations no-code et les agents IA de TPE et PME francophones,
              entre Tel-Aviv et Paris. Le journal, c'est ce que j'apprends en le faisant.
            </p>
          </div>
        </div>
      </section>

      {/* 7. Archives : seulement s'il y a autre chose que l'édition déjà citée
          plus haut, sinon la page affiche deux fois la même chose. */}
      {precedentes.length > 0 && (
        <section className="section">
          <div className="container">
            <h2 className="h2 reveal">Les éditions précédentes</h2>
            <div className="nl-archive reveal">
              {precedentes.map((e) => (
                <a href={`/newsletter/${e.slug}`} key={e.slug}>
                  <div className="nl-archive-date">{e.date}</div>
                  <div className="nl-archive-title">{e.title}</div>
                  <p className="nl-archive-teaser">{e.teaser}</p>
                </a>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* 8. FAQ */}
      <section className="section">
        <div className="container">
          <h2 className="h2 reveal">Questions</h2>
          <div className="nl-faq reveal">
            {FAQ.map((f) => (
              <details key={f.q}>
                <summary>{f.q}</summary>
                <p>{f.r}</p>
              </details>
            ))}
          </div>
        </div>
      </section>

      {/* 9. CTA final */}
      <section className="section">
        <div className="container">
          <div className="nl-cta reveal">
            <h2 className="h2">La prochaine édition, <em>dans ta boîte.</em></h2>
            <NewsletterForm source="newsletter_page_cta" variant="bloc" />
          </div>
        </div>
      </section>

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

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