const QUOTES = [
  { text: "Ô, grande est la grâce puissante qui réside dans les herbes, les plantes, les pierres et leurs véritables qualités.", author: "William Shakespeare" },
  { text: "La terre donne des richesses en abondance et de la nourriture pacifique. Elle nous offre des repas qui ne sont tachés ni de sang ni de meurtre.", author: "Pythagore" },
  { text: "Si vous possédez une bibliothèque et un jardin, vous avez tout ce qu'il vous faut.", author: "Cicéron" },
  { text: "Regardez profondément dans la nature, et alors vous comprendrez tout beaucoup mieux.", author: "Albert Einstein" },
  { text: "Va prendre tes leçons dans la nature, c'est là qu'est notre futur.", author: "Léonard de Vinci" },
  { text: "Le but de la science de la nature n'est pas simplement d'accepter les déclarations des autres, mais d'étudier les causes à l'œuvre dans la nature.", author: "Albert le Grand" },
  { text: "Oublier comment creuser la terre et entretenir le sol, c'est s'oublier soi-même.", author: "Mahatma Gandhi" },
  { text: "Telle la génération des feuilles, telle est celle des hommes.", author: "Homère" },
  { text: "La nature est là qui t'invite et qui t'aime.", author: "Alphonse de Lamartine" },
  { text: "Les prés, les bois, les collines silencieuses sont les seuls amis à qui je confie mon cœur.", author: "Pétrarque" },
  { text: "Il faut cultiver notre jardin.", author: "Voltaire" },
];

function QuoteBanner() {
  const [q] = React.useState(() => QUOTES[Math.floor(Math.random() * QUOTES.length)]);
  const isMobile = useMobile();
  return (
    <div style={{ marginTop: isMobile ? 36 : 56, maxWidth: 640, marginLeft: "auto", marginRight: "auto", textAlign: "center", padding: isMobile ? "0 4px" : 0 }}>
      <Ornament size={isMobile ? 32 : 40} color="var(--moss-mid)" />
      <blockquote style={{ fontFamily: "var(--serif)", fontSize: isMobile ? 17 : 21, fontStyle: "italic", lineHeight: 1.55, color: "var(--ink-soft)", margin: isMobile ? "12px 0 8px" : "16px 0 10px" }}>
        « {q.text} »
      </blockquote>
      <cite style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: ".15em", textTransform: "uppercase", color: "var(--ink-mute)", fontStyle: "normal" }}>
        — {q.author}
      </cite>
    </div>
  );
}

// HOME PAGE — Hero with parallax, featured plants, sections
function Home({ setRoute, setPlantId }) {
  const heroRef = React.useRef(null);
  const [scrollY, setScrollY] = React.useState(0);
  const isMobile = useMobile();

  // Stats réelles du recueil, calculées depuis window.PLANTS (toujours à jour).
  const _plants = window.PLANTS || [];
  const fmt = (n) => n.toLocaleString("fr-FR");
  const statEspeces = fmt(_plants.length);
  const statFamilles = fmt(new Set(_plants.map((p) => p.famille).filter(Boolean)).size);
  const statUsages = fmt(new Set(_plants.flatMap((p) => (Array.isArray(p.usage) ? p.usage : []))).size);
  const statPhotos = fmt(_plants.reduce((s, p) => s + (p.nbPhotos || 0), 0));
  // Comptes par catégorie pour l'index par usage (dynamiques).
  const _byUsage = (u) => _plants.filter((p) => Array.isArray(p.usage) && p.usage.includes(u)).length;
  const _nRecettes = _plants.filter((p) => p.hasRecettes).length;

  // Chronique de saison — dynamique : mois courant + plantes réellement en
  // fleur ce mois-ci (d'après le champ `floraison` de chaque fiche).
  const MOIS = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"];
  const _now = new Date();
  const _moisNom = MOIS[_now.getMonth()];
  const _annee = _now.getFullYear();
  const _moisBas = _moisNom.toLowerCase();
  // Élision : « Floraisons de juin » mais « d'avril », « d'août », « d'octobre ».
  const _moisDe = /^[aeiou]/.test(_moisBas) ? `d'${_moisBas}` : `de ${_moisBas}`;
  const _enFleur = _plants.filter((p) => {
    const f = p.floraison;
    return Array.isArray(f) ? f.includes(_moisNom) : (typeof f === "string" && f.includes(_moisNom));
  });
  const _enFleurNoms = _enFleur.map((p) => p.nom).filter(Boolean);
  // Sélection de 6 vignettes : photos locales d'abord (plus soignées), puis
  // rotation selon le mois pour varier d'un mois à l'autre (raison de revenir),
  // tout en restant stable au sein d'un même mois.
  const _avecLocale = _enFleur.filter((p) => p.thumb && !p.thumbFromWikipedia);
  const _avecWiki = _enFleur.filter((p) => !(p.thumb && !p.thumbFromWikipedia));
  const _ordonnees = [..._avecLocale, ..._avecWiki];
  const _vedettes = [];
  if (_ordonnees.length) {
    const _start = (_now.getMonth() * 7) % _ordonnees.length;
    for (let i = 0; i < Math.min(6, _ordonnees.length); i++) {
      _vedettes.push(_ordonnees[(_start + i) % _ordonnees.length]);
    }
  }
  const _chronIntro = _enFleur.length
    ? `Ce mois-ci, ${_enFleur.length} espèce${_enFleur.length > 1 ? "s" : ""} du recueil ${_enFleur.length > 1 ? "sont" : "est"} en fleur — ${_enFleurNoms.slice(0, 3).join(", ")} et bien d'autres. Voici les plantes à observer et à cueillir.`
    : "Le recueil suit le fil des saisons : au gré des mois, observez et cueillez chaque espèce à sa floraison.";

  React.useEffect(() => {
    const onScroll = () => setScrollY(window.scrollY);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  // Frise « dernières fiches enrichies » — les contributeurs ne sont pas dans
  // window.PLANTS, donc fetch dédié (api/list?view=history). Repli silencieux.
  const [_histo, _setHisto] = React.useState([]);
  React.useEffect(() => {
    let alive = true;
    fetch("/api/list?view=history", { cache: "no-store" })
      .then((r) => (r.ok ? r.json() : Promise.reject(r)))
      .then((d) => { if (alive) _setHisto(Array.isArray(d.history) ? d.history : []); })
      .catch(() => {});
    return () => { alive = false; };
  }, []);

  const goFiche = (id) => {setPlantId(id);setRoute("fiche");};
  const pad = isMobile ? "0 20px" : "0 40px";

  return (
    <main className="page-enter">
      {/* ---------- HERO ---------- */}
      <section ref={heroRef} style={heroStyles.wrap}>
        <div style={{ ...heroStyles.bg, transform: `translateY(${scrollY * 0.25}px)` }}>
          <div className="plate plate-frame" style={heroStyles.bgPlate} data-label="HERBARIUM · PLANCHE D'OUVERTURE — DROP A FOREST IMAGE"></div>
        </div>

        <div style={{ ...heroStyles.inner, padding: pad }}>
          <div className="kicker" style={{ color: "var(--moss-deep)", marginBottom: isMobile ? 16 : 28 }}>
            <span style={{ display: "inline-block", width: 28, height: 1, background: "var(--moss-deep)", verticalAlign: "middle", marginRight: 12 }}></span>
            Recueil collaboratif · Édition 2026 · Vol. viii
          </div>

          <h1 className="h-display" style={{ ...heroStyles.title, fontSize: isMobile ? "clamp(42px, 11vw, 68px)" : "clamp(72px, 10vw, 128px)" }}>
            <span style={{ display: "block", fontSize: isMobile ? "clamp(42px, 11vw, 68px)" : "118px" }}>
              L'<span className="h-italic">herbier</span> vivant
            </span>
            <span style={{ display: "block", marginTop: 4 }}>
              du jardin <span className="script" style={{ fontSize: "0.85em", color: "var(--moss-deep)", lineHeight: 0.7, display: "inline-block", verticalAlign: "baseline" }}>partagé.</span>
            </span>
          </h1>

          <p style={{ ...heroStyles.lede, fontSize: isMobile ? 16 : 22, maxWidth: isMobile ? "100%" : 620 }}>
            Un inventaire botanique tenu par celles et ceux qui jardinent, cueillent, observent et soignent. Chaque plante y est consignée — sa morphologie, ses usages, son histoire — comme on le fait depuis plusieurs siècles dans les grands herbiers, mais à plusieurs mains.
          </p>

          <div style={{ ...heroStyles.actions, flexDirection: isMobile ? "column" : "row", alignItems: isMobile ? "flex-start" : "center", gap: isMobile ? 12 : 18, marginBottom: isMobile ? 40 : 80 }}>
            <button className="btn btn-solid" onClick={() => setRoute("catalogue")}>
              Parcourir le catalogue <IconArrow size={13} />
            </button>
            {!isMobile && (
              <button className="btn btn-ghost" onClick={() => setRoute("edit")}>
                Contribuer une fiche
              </button>
            )}
          </div>

          <div style={{ ...heroStyles.stats, gap: isMobile ? 24 : 64, flexWrap: "wrap", paddingTop: isMobile ? 24 : 40 }}>
            <Stat n={statEspeces} l="Espèces consignées" />
            <Stat n={statFamilles} l="Familles botaniques" />
            <Stat n={statUsages} l="Usages répertoriés" />
            {!isMobile && <Stat n={statPhotos} l="Photographies" />}
          </div>
        </div>
      </section>

      {/* ---------- ABOUT — split with botanical plate ---------- */}
      <section style={{ maxWidth: 1280, margin: isMobile ? "60px auto" : "120px auto", padding: pad }}>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1.5fr 1fr", gap: isMobile ? 36 : 80, alignItems: "center" }}>
          <Reveal>
            <div className="kicker" style={{ marginBottom: 22 }}>Le projet</div>
            <h2 className="h-display" style={{ fontSize: isMobile ? 38 : 56, lineHeight: 1.05, marginBottom: 24 }}>
              Une <span className="h-italic">mémoire vivante</span> du végétal,<br />
              tenue par la main des jardiniers.
            </h2>
            <p style={aboutP}>
              Nous renseignons chaque plante avec rigueur : nom commun, binôme latin, famille, morphologie, habitat.
              Mais notre herbier ne dort pas dans les armoires — il vit, se complète et s'amende au rythme des saisons
              et des observations partagées.
            </p>
            {!isMobile && (
              <p style={aboutP}>
                Chaque fiche est ouverte à la contribution. Photographier une feuille au matin, noter une floraison
                hâtive, ajouter une recette de baume ou un usage tinctorial : tout devient matière à enrichir le recueil.
              </p>
            )}
            <div style={{ marginTop: 28 }}>
              <button className="btn btn-ghost">Lire le manifeste</button>
            </div>
          </Reveal>

          {!isMobile && (
            <Reveal delay={120}>
              <div style={{ position: "relative" }}>
                <Plate src="/passiflora-about.jpg" cover={true} label="PASSIFLORA SERRATODIGITATA · L. — Planche herbier" aspect="2/3" style={{ position: "relative" }} />
                <div style={{ position: "absolute", bottom: -28, right: -28, background: "var(--ink)", color: "var(--paper)", padding: "18px 22px", maxWidth: 280 }}>
                  <div className="kicker" style={{ color: "var(--sand)", marginBottom: 8 }}>Recueil n° 04</div>
                  <div className="h-italic" style={{ fontSize: 18 }}>Passiflora serratodigitata L., une « fleur de la Passion »</div>
                </div>
              </div>
            </Reveal>
          )}
        </div>
      </section>

      {/* ---------- PARCOURS D'IDENTIFICATION ---------- */}
      <section style={{ maxWidth: 1280, margin: isMobile ? "60px auto 0" : "120px auto 0", padding: pad }}>
        <Reveal>
          <div style={{ border: "1px solid var(--line)", background: "var(--tint)", padding: isMobile ? "32px 22px" : "56px 60px", display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1.4fr 1fr", gap: isMobile ? 22 : 60, alignItems: "center" }}>
            <div>
              <div className="kicker" style={{ marginBottom: 16 }}>Parcours · Identification de terrain</div>
              <h2 className="h-display" style={{ fontSize: isMobile ? 34 : 52, lineHeight: 1.04, marginBottom: 16 }}>
                Une plante croisée ?<br /><span className="h-italic" style={{ color: "var(--moss-deep)" }}>Retrouvez-la</span> par ce que vous voyez.
              </h2>
              <p style={{ fontFamily: "var(--serif)", fontSize: isMobile ? 16 : 19, lineHeight: 1.5, color: "var(--ink-soft)", margin: 0, maxWidth: 520 }}>
                Couleur de la fleur, mois de l'observation, taille : trois critères, sautables, qui resserrent le recueil vers une courte liste de candidates.
              </p>
            </div>
            <div style={{ display: "flex", justifyContent: isMobile ? "flex-start" : "flex-end" }}>
              <button className="btn btn-solid" onClick={() => setRoute("identifier")}>
                Identifier une plante <IconArrow size={13} />
              </button>
            </div>
          </div>
        </Reveal>
      </section>

      {/* ---------- VEDETTES — featured plants ---------- */}
      <section style={{ maxWidth: 1400, margin: isMobile ? "60px auto 0" : "140px auto 0", padding: pad }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: isMobile ? "flex-start" : "flex-end", flexDirection: isMobile ? "column" : "row", marginBottom: isMobile ? 28 : 70, gap: isMobile ? 12 : 60 }}>
          <div>
            <div className="kicker" style={{ marginBottom: 14 }}>Au coeur de l'herbier</div>
            <h2 className="h-display" style={{ fontSize: isMobile ? 44 : 64, lineHeight: 1, letterSpacing: "-0.01em" }}>
              <span>Plantes en </span>
              <span className="h-italic" style={{ color: "var(--moss-deep)" }}>vedette</span>
            </h2>
          </div>
          {!isMobile && (
            <div style={{ maxWidth: 360 }}>
              <p style={{ fontFamily: "var(--serif)", fontSize: 18, lineHeight: 1.5, color: "var(--ink-soft)" }}>
                Trois fiches récemment enrichies par la communauté — sélectionnées par notre comité botanique pour la finesse de leur documentation.
              </p>
            </div>
          )}
        </div>

        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)", gap: isMobile ? 16 : 28 }}>
          <FeaturedCard
            id="achillea-millefolium"
            nom="Achillée millefeuille"
            latin="Achillea millefolium"
            famille="Astéracées"
            tags={["Médicinale", "Comestible", "Bio-indicatrice"]}
            note="« Plante d'Achille, des champs de bataille aux jardins partagés. »"
            onClick={() => goFiche("achillea-millefolium")} />

          <FeaturedCard
            id="sambucus-nigra"
            nom="Sureau noir"
            latin="Sambucus nigra"
            famille="Adoxacées"
            tags={["Comestible", "Symbolique"]}
            note="« L'arbre des fées, des sirops d'été et des sureaucs à pétards. »"
            onClick={() => goFiche("sambucus-nigra")} />

          <FeaturedCard
            id="hypericum-perforatum"
            nom="Millepertuis"
            latin="Hypericum perforatum"
            famille="Hypéricacées"
            tags={["Médicinale"]}
            note="« Solstice et lumière jaune dans le macérat huileux. »"
            onClick={() => goFiche("hypericum-perforatum")} />
        </div>
      </section>

      {/* ---------- CHRONIQUE — en fleur ce mois-ci ---------- */}
      <section style={chronStyles.wrap}>
        <div style={{ ...chronStyles.inner, padding: pad, paddingBottom: isMobile ? 60 : 100 }}>
          <Reveal>
            <div className="kicker" style={{ color: "#f1ead9", opacity: .7, marginBottom: 22 }}>Chronique de saison · {_moisNom} {_annee}</div>
            <h2 className="h-display" style={{ fontSize: isMobile ? 38 : 64, lineHeight: 1.02, color: "#f1ead9", marginBottom: 20 }}>
              <span className="h-italic">Floraisons</span> {_moisDe}
            </h2>
            {!isMobile && (
              <p style={{ fontFamily: "var(--serif)", fontSize: 21, lineHeight: 1.5, color: "rgba(241,234,217,0.85)", maxWidth: 680, marginBottom: 40 }}>
                {_chronIntro}
              </p>
            )}
          </Reveal>

          {_vedettes.length > 0 && (
            <div style={{ display: "grid", gridTemplateColumns: isMobile ? "repeat(2, 1fr)" : "repeat(6, 1fr)", gap: isMobile ? 14 : 20, marginTop: isMobile ? 28 : 16 }}>
              {_vedettes.map((p, i) => (
                <EnFleurCard key={p.id} plant={p} delay={i * 70} onClick={() => goFiche(p.id)} />
              ))}
            </div>
          )}

          <div style={{ marginTop: isMobile ? 28 : 44 }}>
            <button
              className="kicker"
              onClick={() => setRoute("calendrier")}
              style={{ background: "transparent", border: "none", color: "#f1ead9", cursor: "pointer", display: "inline-flex", alignItems: "center", gap: 10, padding: 0, font: "inherit", letterSpacing: ".18em" }}>
              Voir les {_enFleur.length} plantes en fleur <IconArrow size={12} />
            </button>
          </div>
        </div>
      </section>

      {/* ---------- DERNIÈRES FICHES ENRICHIES ---------- */}
      {_histo.length > 0 && (
        <section style={{ maxWidth: 1400, margin: isMobile ? "60px auto 0" : "140px auto 0", padding: pad }}>
          <Reveal>
            <div className="kicker" style={{ marginBottom: 14 }}>Le recueil vit</div>
            <h2 className="h-display" style={{ fontSize: isMobile ? 36 : 56, lineHeight: 1, marginBottom: isMobile ? 28 : 44 }}>
              Dernières fiches <span className="h-italic" style={{ color: "var(--moss-deep)" }}>enrichies</span>
            </h2>
          </Reveal>
          <div style={{ display: "grid", gridTemplateColumns: isMobile ? "repeat(2, 1fr)" : "repeat(4, 1fr)", gap: isMobile ? 14 : 24 }}>
            {_histo.slice(0, 4).map((h, i) => (
              <HistoCard key={h.id} item={h} delay={i * 60} onClick={() => goFiche(h.id)} />
            ))}
          </div>
        </section>
      )}

      {/* ---------- USAGES — index by use ---------- */}
      <section style={{ maxWidth: 1400, margin: isMobile ? "60px auto 0" : "140px auto 0", padding: pad }}>
        <Reveal>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: isMobile ? 28 : 48, flexWrap: "wrap", gap: 12 }}>
            <div>
              <div className="kicker" style={{ marginBottom: 14 }}>Index par usage</div>
              <h2 className="h-display" style={{ fontSize: isMobile ? 36 : 56, lineHeight: 1 }}>
                <span>Six</span> <span className="h-italic">manières</span> d'aborder le végétal
              </h2>
            </div>
            {!isMobile && <button className="btn btn-ghost">Tous les usages →</button>}
          </div>
        </Reveal>

        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "repeat(2, 1fr)" : "repeat(3, 1fr)", gap: 0, border: "1px solid var(--line)" }}>
          {[
          { t: "Comestibles", n: fmt(_byUsage("Comestible")), desc: "Feuilles, fleurs, fruits, racines — toute la table sauvage." },
          { t: "Médicinales", n: fmt(_byUsage("Médicinal")), desc: "Plantes officinales et de la pharmacopée populaire." },
          { t: "Bio-indicatrices", n: fmt(_byUsage("Bio-indicatrice")), desc: "Lectrices du sol, du climat et de la santé écologique." },
          { t: "Recettes", n: fmt(_nRecettes), desc: "Tisanes, sirops et préparations glanés au fil des fiches." },
          { t: "Arbres", n: fmt(_byUsage("Arbre")), desc: "Essences du verger et de la haie, du chêne au jujubier." },
          { t: "Mellifères", n: fmt(_byUsage("Mellifère")), desc: "Indispensables aux pollinisateurs du jardin." }].
          map((u, i) =>
          <Reveal key={u.t} delay={i * 60}>
              <div style={{ ...usageCard, padding: isMobile ? "22px 18px" : "44px 36px" }}>
                <div style={{ ...usageNum, fontSize: isMobile ? 42 : 64, marginBottom: isMobile ? 10 : 16 }}>{u.n}</div>
                <div className="h-display" style={{ fontSize: isMobile ? 22 : 30, marginBottom: 8 }}>{u.t}</div>
                {!isMobile && <p style={{ fontFamily: "var(--serif)", fontSize: 16, color: "var(--ink-soft)", margin: 0, lineHeight: 1.45 }}>{u.desc}</p>}
                <div style={{ marginTop: 14, display: "flex", alignItems: "center", gap: 8, fontFamily: "var(--mono)", fontSize: 10, letterSpacing: ".18em", textTransform: "uppercase", color: "var(--moss-deep)" }}>
                  Explorer <IconArrow size={10} />
                </div>
              </div>
            </Reveal>
          )}
        </div>
      </section>

      {/* ---------- JARDINS LIÉS ---------- */}
      {!isMobile && (
        <section style={{ maxWidth: 1400, margin: "140px auto 0", padding: pad }}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 80, alignItems: "start" }}>
            <Reveal>
              <div>
                <div className="kicker" style={{ marginBottom: 14 }}>Jardins partagés</div>
                <h2 className="h-display" style={{ fontSize: 48, lineHeight: 1.05, marginBottom: 24 }}>
                  Les plantes <span className="h-italic">vivent quelque part.</span>
                </h2>
                <p style={{ fontFamily: "var(--serif)", fontSize: 18, color: "var(--ink-soft)", lineHeight: 1.5 }}>
                  Chaque fiche indique précisément les jardins partagés où l'espèce est cultivée. Vous y trouverez parcelles, contributeurs et calendrier d'entretien.
                </p>
                <div style={{ marginTop: 32 }}><button className="btn">Carte des jardins</button></div>
              </div>
            </Reveal>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 24 }}>
              {[
              { n: "Jardin Aimé", l: "tant aimé", p: 24, t: "Plantes médicinales et aromatiques" },
              { n: "Jardin Médicinal", l: "Exposition sud", p: 3, t: "Plantes officinales et aromatiques" },
              { n: "Syracuse", l: "et son grand Archimède", p: 12, t: "Vergers anciens et fruits rares" },
              { n: "Palmyre", l: "Anciens jardins ouvriers", p: 16, t: "Biodiversité spontanée" }].
              map((g, i) =>
              <Reveal key={g.n} delay={i * 80}>
                  <div style={gardenCard}>
                    <Plate label={`${g.n.toUpperCase()} — DROP GARDEN PHOTO`} aspect="4/3" style={{ marginBottom: 18 }} />
                    <div className="h-display" style={{ fontSize: 24, marginBottom: 4 }}>{g.n}</div>
                    <div style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: ".16em", textTransform: "uppercase", color: "var(--ink-mute)", marginBottom: 12 }}>{g.l}</div>
                    <p style={{ fontFamily: "var(--serif)", fontSize: 16, color: "var(--ink-soft)", margin: 0 }}>{g.t}</p>
                    <div style={{ marginTop: 14, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                      <span className="tag"><span className="tag-dot" /> {g.p} parcelles</span>
                      <span style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".14em", color: "var(--moss-deep)" }}>VOIR →</span>
                    </div>
                  </div>
                </Reveal>
              )}
            </div>
          </div>
        </section>
      )}

      {/* ---------- CTA — CONTRIBUER ---------- */}
      <section style={{ padding: isMobile ? "80px 20px 70px" : "160px 40px 120px", textAlign: "center" }}>
        <Reveal>
          <div style={ctaStyles.inner}>
            <Ornament size={isMobile ? 70 : 120} color="var(--moss-deep)" />
            <h2 className="h-display" style={{ fontSize: isMobile ? 44 : 88, lineHeight: 1, margin: isMobile ? "24px 0 18px" : "32px 0 28px" }}>
              <span className="h-italic">Renseignez</span> votre observation.
            </h2>
            <p style={{ fontFamily: "var(--serif)", fontSize: isMobile ? 17 : 22, lineHeight: 1.5, color: "var(--ink-soft)", maxWidth: 720, margin: "0 auto 32px" }}>
              Chaque jardinier, chaque promeneur, chaque enfant qui s'intéresse au vivant peut ouvrir une fiche.
              Vous renseignez, nous relisons en comité, l'herbier s'enrichit.
            </p>
            <div style={{ display: "flex", gap: isMobile ? 12 : 16, justifyContent: "center", flexDirection: isMobile ? "column" : "row", alignItems: "center" }}>
              <button className="btn btn-solid" onClick={() => setRoute("catalogue")}>Parcourir le catalogue <IconArrow size={13} /></button>
              {!isMobile && <button className="btn" onClick={() => setRoute("edit")}>Ouvrir une fiche</button>}
            </div>
            <QuoteBanner />
          </div>
        </Reveal>
      </section>
    </main>);

}

function Stat({ n, l }) {
  return (
    <div style={{ display: "flex", flexDirection: "column" }}>
      <span className="h-display" style={{ fontSize: 38, lineHeight: 1 }}>{n}</span>
      <span style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: ".16em", textTransform: "uppercase", color: "var(--ink-mute)", marginTop: 6 }}>{l}</span>
    </div>);

}

function FeaturedCard({ id, nom, latin, famille, tags, note, onClick, big }) {
  const [hover, setHover] = React.useState(false);
  const plant = id && window.PLANTS ? window.PLANTS.find(p => p.id === id) : null;
  const thumb = (plant && (plant.thumb || (plant.photos && plant.photos.p1))) || null;
  const fromWiki = !!(plant && plant.thumbFromWikipedia && !(plant.photos && plant.photos.p1));
  const attribution = fromWiki ? `https://fr.wikipedia.org/wiki/${encodeURIComponent(latin.replace(/ /g,"_"))}` : null;
  return (
    <Reveal>
      <article
        onClick={onClick}
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
        style={{ ...featCard, ...(big ? featCardBig : {}) }}>

        <div style={{ position: "relative", overflow: "hidden" }}>
          <Plate
            src={thumb}
            frame={false}
            attribution={attribution}
            label={nom.toUpperCase()}
            aspect="1/1"
            style={{ transition: "transform 1200ms var(--ease)", transform: hover ? "scale(1.03)" : "scale(1)" }} />

          <div style={{ ...featLoupe, opacity: hover ? 1 : 0, transform: hover ? "translate(-50%,-50%) scale(1)" : "translate(-50%,-50%) scale(.85)" }}>
            <span className="kicker" style={{ color: "#f1ead9" }}>Lire la fiche</span>
            <IconArrow size={14} />
          </div>
        </div>
        <div style={featBody}>
          <div style={{ marginBottom: 10 }}>
            <span className="kicker">{famille}</span>
          </div>
          <h3 className="h-display" style={{ fontSize: big ? 42 : 28, lineHeight: 1, margin: "0 0 6px" }}>{nom}</h3>
          <div className="h-italic" style={{ fontSize: big ? 22 : 17, color: "var(--moss-deep)", marginBottom: 12 }}>{latin}</div>
          <p style={{ fontFamily: "var(--serif)", fontSize: 15, fontStyle: "italic", color: "var(--ink-soft)", margin: "0 0 16px", lineHeight: 1.5 }}>{note}</p>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
            {tags.map((t) => <span key={t} className="tag">{t}</span>)}
          </div>
        </div>
      </article>
    </Reveal>);

}

// Vignette « en fleur ce mois-ci » : photo + nom, sur la bande sombre. Clic → fiche.
function EnFleurCard({ plant, onClick, delay }) {
  const [hover, setHover] = React.useState(false);
  const fromWiki = !!plant.thumbFromWikipedia;
  const attribution = fromWiki && plant.latin
    ? `https://fr.wikipedia.org/wiki/${encodeURIComponent(plant.latin.replace(/ /g, "_"))}`
    : null;
  return (
    <Reveal delay={delay}>
      <div
        onClick={onClick}
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
        style={{ cursor: "pointer" }}>
        <div style={{ overflow: "hidden", marginBottom: 12 }}>
          <Plate
            src={plant.thumb}
            frame={false}
            attribution={attribution}
            label={(plant.nom || "").toUpperCase()}
            aspect="4/5"
            style={{ transition: "transform 1000ms var(--ease)", transform: hover ? "scale(1.05)" : "scale(1)" }} />
        </div>
        <div className="h-italic" style={{ fontSize: 17, lineHeight: 1.15, color: "#f1ead9", transition: "color 280ms var(--ease)", opacity: hover ? 1 : 0.92 }}>
          {plant.nom}
        </div>
        <div style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: ".06em", color: "rgba(241,234,217,0.55)", marginTop: 3, fontStyle: "italic" }}>
          {plant.latin}
        </div>
      </div>
    </Reveal>);

}

// Date relative française : « aujourd'hui », « il y a 3 jours », sinon « le 9 mai ».
function _relDate(iso) {
  const t = Date.parse(iso);
  if (isNaN(t)) return "";
  const jours = Math.floor((Date.now() - t) / 86400000);
  if (jours <= 0) return "aujourd'hui";
  if (jours === 1) return "hier";
  if (jours < 30) return `il y a ${jours} jours`;
  return "le " + new Date(t).toLocaleDateString("fr-FR", { day: "numeric", month: "long" });
}

// Carte « dernière fiche enrichie » : vignette + nom + auteur · date relative.
function HistoCard({ item, onClick, delay }) {
  const [hover, setHover] = React.useState(false);
  return (
    <Reveal delay={delay}>
      <div
        onClick={onClick}
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
        style={{ cursor: "pointer" }}>
        <div style={{ overflow: "hidden", marginBottom: 12 }}>
          <Plate
            src={item.thumb}
            frame={false}
            label={(item.nom || "").toUpperCase()}
            aspect="4/5"
            style={{ transition: "transform 1000ms var(--ease)", transform: hover ? "scale(1.05)" : "scale(1)" }} />
        </div>
        <div className="h-display" style={{ fontSize: 19, lineHeight: 1.1, marginBottom: 4 }}>{item.nom}</div>
        <div style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".04em", color: "var(--ink-mute)" }}>
          {item.who} · <span style={{ whiteSpace: "nowrap" }}>{_relDate(item.ts)}</span>
        </div>
      </div>
    </Reveal>);

}

const heroStyles = {
  wrap: { position: "relative", minHeight: "92vh", display: "flex", alignItems: "center", overflow: "hidden", paddingBottom: 80 },
  bg: { position: "absolute", inset: "-10% -5% 0 -5%", zIndex: 0 },
  bgPlate: { width: "100%", height: "120%", opacity: 0.5 },
  inner: { position: "relative", zIndex: 2, maxWidth: 1100, margin: "0 auto", textAlign: "left" },
  title: { lineHeight: 1.02, letterSpacing: "-0.02em", margin: "0 0 40px", maxWidth: 1100 },
  lede: { fontFamily: "var(--serif)", lineHeight: 1.5, color: "var(--ink-soft)", margin: "0 0 40px" },
  actions: { display: "flex" },
  stats: { display: "flex", paddingTop: 32, borderTop: "1px solid var(--line)" },
};
const aboutP = { fontFamily: "var(--serif)", fontSize: 19, lineHeight: 1.6, color: "var(--ink-soft)", marginBottom: 18 };

const featCard = { cursor: "pointer", display: "flex", flexDirection: "column", background: "var(--cream)", border: "1px solid var(--line-soft)" };
const featCardBig = {};
const featBody = { padding: 22 };
const featLoupe = { position: "absolute", top: "50%", left: "50%", transform: "translate(-50%,-50%)", background: "rgba(28,36,27,0.9)", color: "#f1ead9", padding: "16px 22px", display: "flex", alignItems: "center", gap: 12, transition: "all 380ms var(--ease)" };

const chronStyles = {
  wrap: { marginTop: 100, padding: "100px 0 0", background: "#1a2e1f", color: "#f1ead9", overflow: "hidden", position: "relative" },
  inner: { maxWidth: 1400, margin: "0 auto" },
};

const usageCard = { borderRight: "1px solid var(--line)", borderBottom: "1px solid var(--line)", cursor: "pointer", transition: "background 380ms var(--ease)", position: "relative", background: "transparent" };
const usageNum = { fontFamily: "var(--display)", color: "var(--moss-deep)", lineHeight: 1, opacity: .6 };

const gardenCard = { padding: 0, cursor: "pointer" };

const ctaStyles = {
  inner: { maxWidth: 920, margin: "0 auto" }
};

Object.assign(window, { Home });