// PAGE NOUVEAUTÉS — journal éditorial des évolutions du recueil, groupé par mois
// (plus récent d'abord). Source de vérité : window.NOUVEAUTES (components/nouveautes.js),
// partagée avec le générateur du mail mensuel (scripts/build-mail-nouveautes.mjs).
//
// Page volontairement ABSENTE de la barre de nav — on y accède par la carte
// « Nouveautés » de l'Accueil (comme Recettes). Contenu de confiance (rédigé en dur
// dans nouveautes.js) → `corps` rendu en HTML léger via dangerouslySetInnerHTML.
(function () {
  // Un billet : ligne titre (emoji + titre, vert mousse) + prose. `separateur`
  // optionnel = petite ligne de transition affichée AVANT le billet.
  function Billet({ n, isMobile }) {
    return (
      <div>
        {n.separateur && (
          <div style={{ borderTop: "1px solid var(--line)", marginTop: isMobile ? 28 : 40, paddingTop: isMobile ? 20 : 28, marginBottom: isMobile ? 20 : 28, fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".18em", textTransform: "uppercase", color: "var(--rust)" }}>
            {n.separateur}
          </div>
        )}
        <div style={{ marginBottom: isMobile ? 34 : 52 }}>
          <h3 className="h-display" style={{ fontSize: isMobile ? 23 : 30, lineHeight: 1.15, margin: "0 0 12px", color: "var(--moss-deep)" }}>
            <span style={{ marginRight: 10 }}>{n.emoji}</span>{n.titre}
          </h3>
          <p
            style={{ fontFamily: "var(--serif)", fontSize: isMobile ? 16 : 18, lineHeight: 1.65, color: "var(--ink-soft)", margin: 0, maxWidth: 720 }}
            dangerouslySetInnerHTML={{ __html: n.corps }}
          />
        </div>
      </div>
    );
  }

  function Nouveautes() {
    const isMobile = useMobile();
    const pad = isMobile ? "0 20px" : "0 40px";
    const groupes = window.groupNouveautesByMois(window.NOUVEAUTES || []);

    return (
      <main className="page-enter">
        {/* En-tête */}
        <section style={{ padding: isMobile ? "44px 0 24px" : "80px 0 36px" }}>
          <div style={{ maxWidth: 1400, margin: "0 auto", padding: pad }}>
            <div className="kicker" style={{ marginBottom: 18 }}>Nouveautés · le journal du recueil</div>
            <h1 className="h-display" style={{ fontSize: isMobile ? "clamp(40px, 9vw, 64px)" : "clamp(60px, 8vw, 100px)", lineHeight: 0.95, margin: isMobile ? "0 0 16px" : "0 0 24px", letterSpacing: "-0.02em" }}>
              Ce qui a <span className="h-italic">changé</span>.
            </h1>
            {!isMobile && (
              <p style={{ fontFamily: "var(--serif)", fontSize: 22, lineHeight: 1.5, color: "var(--ink-soft)", maxWidth: 720, margin: 0 }}>
                Les évolutions de l'herbier, mois après mois — les fonctions qui apparaissent, les pans du jardin qui entrent au recueil.
              </p>
            )}
          </div>
        </section>

        {/* Journal groupé par mois */}
        <section style={{ maxWidth: 1400, margin: "36px auto 0", padding: pad, paddingBottom: isMobile ? 64 : 100 }}>
          {groupes.length === 0 ? (
            <p style={{ fontFamily: "var(--serif)", fontSize: 17, fontStyle: "italic", color: "var(--ink-mute)" }}>Rien de neuf pour le moment.</p>
          ) : (
            groupes.map((g) => (
              <div key={g.mois} style={{ marginBottom: isMobile ? 48 : 76 }}>
                <div style={{ display: "flex", alignItems: "baseline", gap: 16, marginBottom: isMobile ? 22 : 34 }}>
                  <h2 className="h-display" style={{ fontSize: isMobile ? 28 : 40, lineHeight: 1, margin: 0 }}>{g.mois}</h2>
                  <span style={{ flex: 1, borderTop: "1px solid var(--line)" }} />
                </div>
                {g.entrees.map((n, i) => <Billet key={i} n={n} isMobile={isMobile} />)}
              </div>
            ))
          )}
        </section>
      </main>
    );
  }

  window.Nouveautes = Nouveautes;
})();