// PAGE « LECTURE DU SOL » — plantes bio-indicatrices inversées. Index (#/sol) : liste
// des indications de sol ; détail (#/sol/<slug>) : plantes qui portent l'indication.
// Index pur : components/bioindication.js. Cartes réutilisées : CatCard (Catalogue.jsx).
(function () {
  function Sol({ solSlug, setRoute, setPlantId }) {
    const isMobile = useMobile();
    const pad = isMobile ? "0 20px" : "0 40px";
    const index = React.useMemo(() => window.buildBioIndex(window.PLANTS || []), []);
    const byId = React.useMemo(() => {
      const m = {}; for (const p of (window.PLANTS || [])) m[p.id] = p; return m;
    }, []);
    const goFiche = (id) => { setPlantId(id); setRoute("fiche"); };
    const goSol = (slug) => { location.hash = window.buildHash("sol", slug ? { sol: slug } : {}); };

    // — DÉTAIL : plantes d'une indication —
    if (solSlug) {
      const entry = index.bySlug.get(solSlug);
      const plantes = entry ? entry.plantIds.map((id) => byId[id]).filter(Boolean) : [];
      return (
        <main className="page-enter">
          <section style={{ padding: isMobile ? "44px 0 20px" : "80px 0 32px" }}>
            <div style={{ maxWidth: 1400, margin: "0 auto", padding: pad }}>
              <button onClick={() => goSol("")} style={{ background: "none", border: "none", cursor: "pointer", fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".14em", textTransform: "uppercase", color: "var(--ink-mute)", padding: 0, marginBottom: 18 }}>
                ← Toutes les indications
              </button>
              <div className="kicker" style={{ marginBottom: 16 }}>Lecture du sol</div>
              {entry ? (
                <React.Fragment>
                  <h1 className="h-display" style={{ fontSize: isMobile ? "clamp(34px,8vw,58px)" : "clamp(52px,7vw,88px)", lineHeight: 0.98, margin: isMobile ? "0 0 14px" : "0 0 18px", letterSpacing: "-0.02em" }}>
                    {entry.label}<span className="h-italic">.</span>
                  </h1>
                  <div style={{ fontFamily: "var(--mono)", fontSize: 12, letterSpacing: ".16em", textTransform: "uppercase", color: "var(--moss-deep)" }}>
                    {entry.count} plante{entry.count > 1 ? "s" : ""} le signale{entry.count > 1 ? "nt" : ""}
                  </div>
                </React.Fragment>
              ) : (
                <h1 className="h-display" style={{ fontSize: isMobile ? 34 : 52, lineHeight: 1, margin: 0 }}>
                  Indication <span className="h-italic">inconnue</span>.
                </h1>
              )}
            </div>
          </section>
          <section style={{ maxWidth: 1400, margin: "24px auto 0", padding: pad, paddingBottom: isMobile ? 64 : 100 }}>
            {entry ? (
              <div style={{ display: "grid", gridTemplateColumns: isMobile ? "repeat(2, 1fr)" : "repeat(4, 1fr)", gap: isMobile ? 12 : 20 }}>
                {plantes.map((p, i) => (
                  <CatCard key={p.id} p={p} idx={i + 1} onClick={() => goFiche(p.id)} isMobile={isMobile} />
                ))}
              </div>
            ) : (
              <p style={{ fontFamily: "var(--serif)", fontSize: 18, fontStyle: "italic", color: "var(--ink-mute)" }}>
                Cette indication n'est portée par aucune fiche du recueil — ou son lien a expiré.
              </p>
            )}
          </section>
        </main>
      );
    }

    // — INDEX : liste des indications —
    return (
      <main className="page-enter">
        <section style={{ padding: isMobile ? "44px 0 8px" : "80px 0 24px" }}>
          <div style={{ maxWidth: 1400, margin: "0 auto", padding: pad }}>
            <div className="kicker" style={{ marginBottom: 18 }}>Lire le sol · bio-indication</div>
            <h1 className="h-display" style={{ fontSize: isMobile ? "clamp(38px,9vw,60px)" : "clamp(56px,7vw,92px)", lineHeight: 0.98, margin: isMobile ? "0 0 16px" : "0 0 20px", letterSpacing: "-0.02em" }}>
              Que dit <span className="h-italic">votre sol</span> ?
            </h1>
            <p style={{ fontFamily: "var(--serif)", fontSize: isMobile ? 17 : 20, lineHeight: 1.5, color: "var(--ink-soft)", maxWidth: 640 }}>
              Une plante ne pousse pas par hasard ; lorsque vous la rencontrez dans votre
              jardin, elle a un rôle à jouer dans cet endroit-là, à ce moment-là. Partez d'une
              observation — calcaire, tassé, trop humide — et lisez ce qu'en disent les espèces
              du recueil.
            </p>
          </div>
        </section>
        <section style={{ maxWidth: 900, margin: "8px auto 0", padding: pad, paddingBottom: isMobile ? 64 : 100 }}>
          <div style={{ borderTop: "1px solid var(--line)" }}>
            {index.list.map((e) => (
              <button key={e.slug} onClick={() => goSol(e.slug)}
                style={{ display: "flex", width: "100%", textAlign: "left", alignItems: "baseline", gap: 16, padding: isMobile ? "18px 4px" : "22px 6px", background: "none", border: "none", borderBottom: "1px solid var(--line)", cursor: "pointer" }}>
                <span className="h-display" style={{ fontSize: isMobile ? 22 : 28, flexShrink: 0, minWidth: isMobile ? 0 : 260 }}>{e.label}</span>
                <span style={{ fontFamily: "var(--serif)", fontSize: isMobile ? 14 : 16, color: "var(--ink-soft)", flex: 1 }}>{e.description}</span>
                <span style={{ fontFamily: "var(--mono)", fontSize: 12, letterSpacing: ".14em", color: "var(--moss-deep)", flexShrink: 0 }}>{e.count} →</span>
              </button>
            ))}
          </div>
        </section>
      </main>
    );
  }
  window.Sol = Sol;
})();