// MANIFESTE — page éditoriale présentant l'Herbier comme l'émanation
// numérique de l'association Les Amis des Jardins d'Opio (laopio.com).
// Reprend ses cinq piliers officiels (Nourricière, Recherche d'adaptation,
// Enseignement, Conservatoire d'espèces végétales, Esthétique).
(function () {
  const PILIERS = [
    {
      titre: "Nourricière",
      texte: "Consigner ce qui nourrit : les parties comestibles, leurs saisons, leurs préparations et leurs recettes.",
    },
    {
      titre: "Recherche d'adaptation",
      texte: "Noter ce que les plantes nous apprennent de la sécheresse et d'un climat qui change — résistances, milieux, acclimatations.",
    },
    {
      titre: "Enseignement",
      texte: "Chaque fiche est faite pour transmettre, à la main et sans jargon inutile, ce que l'on sait d'une espèce.",
    },
    {
      titre: "Conservatoire d'espèces végétales",
      texte: "Garder trace, espèce par espèce, de ce qui mérite de ne pas se perdre — l'Herbier en est la mémoire écrite.",
    },
    {
      titre: "Esthétique",
      texte: "Parce qu'une planche bien faite et une page soignée donnent envie de regarder, puis de cultiver.",
    },
  ];

  function Pilier({ index, titre, texte, isMobile }) {
    return (
      <div style={{ display: "grid", gridTemplateColumns: isMobile ? "auto 1fr" : "56px 1fr", gap: isMobile ? 16 : 24, alignItems: "baseline", padding: isMobile ? "20px 0" : "26px 0", borderTop: "1px solid var(--line-soft)" }}>
        <div style={{ fontFamily: "var(--mono)", fontSize: isMobile ? 13 : 15, color: "var(--moss-deep)", letterSpacing: ".06em" }}>
          {String(index + 1).padStart(2, "0")}
        </div>
        <div>
          <h3 className="h-italic" style={{ fontSize: isMobile ? 22 : 27, lineHeight: 1.15, margin: "0 0 8px", color: "var(--ink)" }}>
            {titre}
          </h3>
          <p style={{ fontFamily: "var(--serif)", fontSize: isMobile ? 16 : 18, lineHeight: 1.6, color: "var(--ink-soft)", margin: 0 }}>
            {texte}
          </p>
        </div>
      </div>
    );
  }

  function Manifeste({ setRoute }) {
    const isMobile = useMobile();
    const pad = isMobile ? "0 20px" : "0 40px";

    return (
      <main className="page-enter">
        {/* ---------- En-tête ---------- */}
        <section style={{ maxWidth: 760, margin: isMobile ? "48px auto 0" : "96px auto 0", padding: pad, textAlign: "center" }}>
          <Reveal>
            <div className="kicker" style={{ color: "var(--moss-deep)", marginBottom: 20 }}>
              Le projet · Manifeste
            </div>
            <h1 className="h-display" style={{ fontSize: isMobile ? 40 : 64, lineHeight: 1.05, margin: "0 0 24px" }}>
              Une <span className="h-italic">mémoire vivante</span> du végétal,<br />
              tenue par la main des jardiniers.
            </h1>
            <Ornament size={isMobile ? 40 : 52} color="var(--moss-mid)" />
          </Reveal>
        </section>

        {/* ---------- Préambule ---------- */}
        <section style={{ maxWidth: 680, margin: isMobile ? "32px auto 0" : "48px auto 0", padding: pad }}>
          <Reveal delay={80}>
            <p style={{ fontFamily: "var(--serif)", fontSize: isMobile ? 18 : 21, lineHeight: 1.65, color: "var(--ink-soft)", margin: "0 0 22px" }}>
              Cet herbier est né aux <span className="h-italic">Jardins d'Opio</span>, sur une colline
              couverte d'oliviers centenaires. Là, une cinquantaine d'amis travaillent quelques heures par
              mois à préparer et entretenir le sol, à cultiver en agriculture durable, à vivre en harmonie
              avec ces arbres plusieurs fois centenaires. L'Herbier est la mémoire écrite de ce jardin : le
              conservatoire de tout ce qui pousse, se cueille et se soigne ici.
            </p>
            <p style={{ fontFamily: "var(--serif)", fontSize: isMobile ? 18 : 21, lineHeight: 1.65, color: "var(--ink-soft)", margin: "0 0 22px" }}>
              On y cherche, le plus souvent en les adaptant à nos conditions, des réponses à nos problèmes
              de sol, d'eau et de disparition d'espèces. Semaine après semaine, on voit la terre se
              transformer — un sol rocailleux à neuf dixièmes qui devient peu à peu fertile. Il faut de la
              patience ; et savoir que <span className="h-italic">lorsqu'on se plante, on replante</span>.
            </p>
            <p style={{ fontFamily: "var(--serif)", fontSize: isMobile ? 18 : 21, lineHeight: 1.65, color: "var(--ink-soft)", margin: 0 }}>
              Nous renseignons chaque plante avec rigueur — nom commun, binôme latin, famille, morphologie,
              habitat — mais notre recueil ne dort pas dans les armoires : il vit, se complète et s'amende
              au rythme des saisons et des observations partagées.
            </p>
          </Reveal>
        </section>

        {/* ---------- Les cinq piliers ---------- */}
        <section style={{ maxWidth: 760, margin: isMobile ? "44px auto 0" : "72px auto 0", padding: pad }}>
          <Reveal delay={120}>
            <div className="kicker" style={{ marginBottom: 10 }}>Notre optique</div>
            <p style={{ fontFamily: "var(--serif)", fontSize: isMobile ? 16 : 18, fontStyle: "italic", lineHeight: 1.6, color: "var(--ink-mute)", margin: "0 0 8px" }}>
              Large, comme celle de l'association qui le porte : nourricière, recherche d'adaptation,
              enseignement, conservatoire d'espèces végétales, esthétique.
            </p>
          </Reveal>
          <div style={{ marginTop: isMobile ? 8 : 16, borderBottom: "1px solid var(--line-soft)" }}>
            {PILIERS.map((p, i) => (
              <Reveal key={p.titre} delay={140 + i * 40}>
                <Pilier index={i} titre={p.titre} texte={p.texte} isMobile={isMobile} />
              </Reveal>
            ))}
          </div>
        </section>

        {/* ---------- Clôture + appels à l'action ---------- */}
        <section style={{ maxWidth: 680, margin: isMobile ? "44px auto 0" : "72px auto 0", padding: pad, textAlign: "center" }}>
          <Reveal delay={160}>
            <p style={{ fontFamily: "var(--serif)", fontSize: isMobile ? 19 : 23, fontStyle: "italic", lineHeight: 1.55, color: "var(--ink)", margin: "0 0 14px" }}>
              Photographier une feuille au matin, noter une floraison hâtive, ajouter un usage tinctorial —
              tout y devient matière. À plusieurs mains.
            </p>
            <div style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".16em", textTransform: "uppercase", color: "var(--ink-mute)" }}>
              Les Amis des Jardins d'Opio · 06650 Opio
            </div>
          </Reveal>
          <Reveal delay={200}>
            <div style={{ display: "flex", flexWrap: "wrap", gap: isMobile ? 12 : 18, justifyContent: "center", marginTop: isMobile ? 32 : 44, marginBottom: isMobile ? 24 : 0 }}>
              <button className="btn btn-solid" onClick={() => setRoute("catalogue")}>
                Parcourir le catalogue
              </button>
              <button className="btn btn-ghost" onClick={() => setRoute("edit")}>
                Contribuer une fiche
              </button>
            </div>
          </Reveal>
        </section>
      </main>
    );
  }

  window.Manifeste = Manifeste;
})();
