// ╔════════════════════════════════════════════════════════════╗
// ║  BSB · Pages génériques (theme-paramétrées)               ║
// ║  Catalogue · Détail · Hemp · HempLine · Breeding · Science ║
// ║  · About · Network · Contact · Legal                      ║
// ╚════════════════════════════════════════════════════════════╝

// ─── Catalogue tabac ─────────────────────────────────────────
function PageVarieties({ theme, t, lang, setRoute }) {
  const [type, setType] = React.useState("all");
  const [precocity, setPrecocity] = React.useState("all");
  const [resistance, setResistance] = React.useState("all");
  const [search, setSearch] = React.useState("");

  const filtered = VARIETIES.filter(v => {
    if (type !== "all" && v.typeShort !== type) return false;
    if (precocity !== "all" && v.precocity !== precocity) return false;
    if (resistance !== "all" && v.resistances[resistance] !== "R") return false;
    if (search && !v.code.toLowerCase().includes(search.toLowerCase()) &&
        !v.headline.toLowerCase().includes(search.toLowerCase())) return false;
    return true;
  });

  const typeOpts = [["all", t("filter_all")], ...TYPES.map(x => [x.id, x.label])];
  const precOpts = [["all", t("filter_all")],
    ...PRECOCITY_GROUPS.map(p => [p.id, lang==="fr"?p.label:p.labelEn])];
  const resOpts = [["all", t("filter_all")], ...RESISTANCE_KEYS.map(r => [r.id, r.short])];

  const reset = () => { setType("all"); setPrecocity("all"); setResistance("all"); setSearch(""); };

  return (
    <main style={{ background: theme.bg, color: theme.ink, fontFamily: theme.body, minHeight: "100vh" }}>
      <PageHeader theme={theme}
        eyebrow={lang==="fr"?"01 / Catalogue Tabac · Édition 2026":"01 / Tobacco catalogue · 2026 edition"}
        title={lang==="fr"
          ? <>16 variétés. <em style={{ color: theme.primary, fontStyle: theme.italic ? "italic" : "normal", fontWeight: theme.id==="C"?500:800 }}>Comparées au témoin national.</em></>
          : <>16 cultivars. <em style={{ color: theme.primary, fontStyle: theme.italic ? "italic" : "normal", fontWeight: theme.id==="C"?500:800 }}>Benchmarked vs the French reference.</em></>}
        subtitle={t("section_finder_sub")}
        hero={theme.id==="B" ? { url: PHOTOS.field_rows, caption: lang==="fr"?"Essais variétaux · Bergerac":"Variety trials · Bergerac" } : undefined}/>

      {/* Filters */}
      <section style={{ padding: "32px", background: theme.bg2,
        borderBottom: `1px solid ${theme.line}`, position: "sticky", top: 80, zIndex: 10,
        backdropFilter: "blur(8px)" }}>
        <div style={{ maxWidth: 1320, margin: "0 auto" }}>
          <div style={{ display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 24,
            alignItems: "center", marginBottom: 20 }}>
            <div style={{ fontFamily: theme.mono, fontSize: 11, letterSpacing: ".18em",
              color: theme.primary, fontWeight: 700 }}>
              {filtered.length} / {VARIETIES.length} {t("filter_results")}
            </div>
            <input type="text" placeholder={lang==="fr"?"Recherche · code, mot-clé":"Search · code, keyword"}
              value={search} onChange={e => setSearch(e.target.value)}
              style={{ background: theme.surface, border: `1px solid ${theme.line2}`,
                borderRadius: theme.buttonRadius, padding: "10px 14px",
                fontFamily: theme.body, fontSize: 14, color: theme.ink,
                outline: "none", width: "100%", maxWidth: 360 }}/>
            <button onClick={reset}
              style={{ fontFamily: theme.mono, fontSize: 11, letterSpacing: ".15em",
                color: theme.inkSoft, background: "transparent", border: "none",
                cursor: "pointer", textTransform: "uppercase", fontWeight: 600 }}>
              ↻ {t("filter_clear")}
            </button>
          </div>
          <div style={{ display: "grid", gap: 10 }}>
            <div style={{ display: "grid", gridTemplateColumns: "120px 1fr", gap: 16, alignItems: "center" }}>
              <span style={{ fontFamily: theme.mono, fontSize: 11, letterSpacing: ".15em",
                color: theme.inkSoft, textTransform: "uppercase" }}>{t("filter_type")}</span>
              <PillGroup theme={theme} options={typeOpts} value={type} onChange={setType}/>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "120px 1fr", gap: 16, alignItems: "center" }}>
              <span style={{ fontFamily: theme.mono, fontSize: 11, letterSpacing: ".15em",
                color: theme.inkSoft, textTransform: "uppercase" }}>{t("filter_precocity")}</span>
              <PillGroup theme={theme} options={precOpts} value={precocity} onChange={setPrecocity}/>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "120px 1fr", gap: 16, alignItems: "center" }}>
              <span style={{ fontFamily: theme.mono, fontSize: 11, letterSpacing: ".15em",
                color: theme.inkSoft, textTransform: "uppercase" }}>{t("filter_resistance")}</span>
              <PillGroup theme={theme} options={resOpts} value={resistance} onChange={setResistance}/>
            </div>
          </div>
        </div>
      </section>

      {/* Grid of cultivars */}
      <section style={{ padding: "48px 32px 80px" }}>
        <div style={{ maxWidth: 1320, margin: "0 auto" }}>
          {filtered.length === 0 ? (
            <div style={{ padding: "100px 20px", textAlign: "center",
              fontFamily: theme.body, color: theme.inkSoft }}>
              {lang==="fr"?"Aucun résultat.":"No results."}
            </div>
          ) : (
            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(320px, 1fr))",
              gap: 16 }}>
              {filtered.map(v => (
                <article key={v.code} onClick={() => setRoute({ name: "detail", code: v.code })}
                  style={{ cursor: "pointer", background: theme.surface,
                    borderRadius: theme.radius, padding: 24,
                    border: `1px solid ${v.isReference ? theme.accent : theme.line}`,
                    display: "flex", flexDirection: "column", gap: 14,
                    transition: "all .25s ease",
                    boxShadow: v.isReference ? `0 0 0 1px ${theme.accent}, 0 4px 16px rgba(15,26,20,.04)` : "0 4px 16px rgba(15,26,20,.04)" }}
                  onMouseEnter={e => { e.currentTarget.style.transform = "translateY(-3px)";
                    e.currentTarget.style.boxShadow = `0 12px 32px rgba(15,26,20,.10)`; }}
                  onMouseLeave={e => { e.currentTarget.style.transform = "none";
                    e.currentTarget.style.boxShadow = v.isReference ? `0 0 0 1px ${theme.accent}, 0 4px 16px rgba(15,26,20,.04)` : "0 4px 16px rgba(15,26,20,.04)"; }}>
                  <div style={{ display: "flex", alignItems: "start", gap: 8,
                    flexWrap: "wrap", justifyContent: "space-between" }}>
                    <div style={{ fontFamily: theme.display, fontSize: 28,
                      fontWeight: theme.displayWeight, letterSpacing: "-.02em", color: theme.ink,
                      lineHeight: 1 }}>
                      {v.code}
                    </div>
                    <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
                      {v.isReference && <span style={{ fontFamily: theme.mono, fontSize: 9,
                        background: theme.accent, color: theme.ink, padding: "3px 7px",
                        borderRadius: 4, letterSpacing: ".12em", fontWeight: 800 }}>
                        ★ REF</span>}
                      {v.isNew && <span style={{ fontFamily: theme.mono, fontSize: 9,
                        background: theme.primary, color: theme.surface, padding: "3px 7px",
                        borderRadius: 4, letterSpacing: ".12em", fontWeight: 800 }}>NEW</span>}
                      {v.coBred && <span style={{ fontFamily: theme.mono, fontSize: 9,
                        background: theme.secondary, color: theme.surface, padding: "3px 7px",
                        borderRadius: 4, letterSpacing: ".12em", fontWeight: 800 }}>NICOTA</span>}
                    </div>
                  </div>
                  <div style={{ fontFamily: theme.mono, fontSize: 11, color: theme.primary,
                    letterSpacing: ".1em", textTransform: "uppercase", fontWeight: 600 }}>
                    {v.typeShort} · {v.year}
                  </div>
                  <p style={{ fontFamily: theme.body, fontSize: 14, lineHeight: 1.5,
                    color: theme.inkSoft, margin: 0, textWrap: "pretty",
                    display: "-webkit-box", WebkitLineClamp: 3, WebkitBoxOrient: "vertical",
                    overflow: "hidden" }}>
                    {v.headline}
                  </p>
                  <div style={{ marginTop: "auto", paddingTop: 14,
                    borderTop: `1px solid ${theme.line}`,
                    display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 10,
                    fontFamily: theme.mono }}>
                    <Stat theme={theme} label="YIELD" value={v.yieldPct + "%"}
                      hi={v.yieldPct >= 100}/>
                    <Stat theme={theme} label="QUAL" value={v.qualityPct + "%"}
                      hi={v.qualityPct >= 95}/>
                    <Stat theme={theme} label="ALK" value={v.alkaloids.toFixed(1)}/>
                  </div>
                  <div style={{ display: "flex", gap: 4, flexWrap: "wrap" }}>
                    {RESISTANCE_KEYS.filter(r => v.resistances[r.id] === "R").map(r => (
                      <span key={r.id} style={{ fontFamily: theme.mono, fontSize: 10,
                        padding: "2px 6px", borderRadius: 4,
                        background: theme.primarySoft, color: theme.primary,
                        fontWeight: 700, letterSpacing: ".05em" }}>
                        R · {r.short}
                      </span>
                    ))}
                  </div>
                </article>
              ))}
            </div>
          )}
        </div>
      </section>
    </main>
  );
}

function Stat({ theme, label, value, hi }) {
  return (
    <div>
      <div style={{ fontSize: 9, letterSpacing: ".15em", color: theme.inkMuted,
        fontWeight: 700, textTransform: "uppercase" }}>{label}</div>
      <div style={{ fontFamily: theme.display, fontSize: 18, fontWeight: theme.displayWeight,
        color: hi ? theme.primary : theme.ink, letterSpacing: "-.01em",
        marginTop: 2, lineHeight: 1.1 }}>{value}</div>
    </div>
  );
}

// ─── Détail variété ──────────────────────────────────────────
function PageDetail({ theme, t, lang, setRoute, code }) {
  const v = VARIETIES.find(x => x.code === code) || VARIETIES[0];
  const ref = VARIETIES.find(x => x.isReference);
  // Pick a hero photo per variety, deterministic by code
  const heroPool = [PHOTOS.tobacco_leaves_close, PHOTOS.field_rows, PHOTOS.tobacco_leaf,
    PHOTOS.worker_field, PHOTOS.drying_barn, PHOTOS.green_field, PHOTOS.leaf_macro];
  const photoIdx = (v.code || "").split("").reduce((a,c)=>a+c.charCodeAt(0),0) % heroPool.length;
  const heroPhoto = heroPool[photoIdx];
  const isB = theme.id === "B";
  return (
    <main style={{ background: theme.bg, color: theme.ink, fontFamily: theme.body, minHeight: "100vh" }}>
      {/* Photo banner — site B only */}
      {isB && (
        <section style={{ position: "relative", height: 380, overflow: "hidden",
          borderBottom: `1px solid ${theme.line}` }}>
          <div style={{ position: "absolute", inset: 0,
            backgroundImage: `url(${heroPhoto})`,
            backgroundSize: "cover", backgroundPosition: "center" }}/>
          <div style={{ position: "absolute", inset: 0,
            background: `linear-gradient(180deg, ${theme.ink}55 0%, transparent 40%, ${theme.ink}E0 100%)` }}/>
          <div style={{ position: "absolute", top: 24, left: 0, right: 0,
            padding: "0 32px" }}>
            <div style={{ maxWidth: 1320, margin: "0 auto" }}>
              <a onClick={() => setRoute({ name: "varieties" })}
                style={{ cursor: "pointer", fontFamily: theme.body, fontSize: 13,
                  color: theme.surface, fontWeight: 600,
                  background: "rgba(15,26,20,.45)", padding: "8px 14px",
                  borderRadius: 999, display: "inline-block" }}>
                ← {lang==="fr"?"Catalogue":"Catalogue"}
              </a>
            </div>
          </div>
          <div style={{ position: "absolute", bottom: 32, left: 0, right: 0,
            padding: "0 32px" }}>
            <div style={{ maxWidth: 1320, margin: "0 auto",
              display: "flex", alignItems: "end", justifyContent: "space-between",
              gap: 24, flexWrap: "wrap", color: theme.surface }}>
              <div>
                <div style={{ fontFamily: theme.mono, fontSize: 11,
                  letterSpacing: ".22em", color: theme.accent, fontWeight: 700,
                  marginBottom: 12, textTransform: "uppercase" }}>
                  ● {v.typeShort} · {v.year}
                  {v.isReference && <span style={{ marginLeft: 12, color: theme.accent }}>★ {(t("reference_label")||"référence").toUpperCase()}</span>}
                  {v.isNew && <span style={{ marginLeft: 12 }}>● {(t("new_label")||"nouveau").toUpperCase()}</span>}
                </div>
                <h1 style={{ fontFamily: theme.display,
                  fontSize: "clamp(56px, 9vw, 128px)", lineHeight: .85,
                  letterSpacing: "-.045em", margin: 0,
                  fontWeight: theme.displayWeight, color: theme.surface,
                  textShadow: "0 2px 24px rgba(15,26,20,.35)" }}>
                  {v.code}
                </h1>
              </div>
              <div style={{ fontFamily: theme.mono, fontSize: 10,
                letterSpacing: ".15em", opacity: .8 }}>
                PARCELLE D'ESSAI · 06.2025
              </div>
            </div>
          </div>
        </section>
      )}

      {/* Back — only when no photo banner (site C) */}
      {!isB && (
      <section style={{ padding: "24px 32px" }}>
        <div style={{ maxWidth: 1320, margin: "0 auto" }}>
          <a onClick={() => setRoute({ name: "varieties" })}
            style={{ cursor: "pointer", fontFamily: theme.body, fontSize: 13,
              color: theme.primary, fontWeight: 600 }}>
            {t("detail_back")}
          </a>
        </div>
      </section>
      )}

      {/* Hero */}
      <section style={{ padding: "16px 32px 48px",
        borderBottom: `1px solid ${theme.line}` }}>
        <div style={{ maxWidth: 1320, margin: "0 auto",
          display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 56, alignItems: "end" }}>
          <div>
            {!isB && (
            <div style={{ display: "flex", gap: 8, marginBottom: 16, flexWrap: "wrap" }}>
              <span style={{ fontFamily: theme.mono, fontSize: 11,
                background: theme.primarySoft, color: theme.primary,
                padding: "5px 12px", borderRadius: theme.pillRadius,
                letterSpacing: ".15em", fontWeight: 700, textTransform: "uppercase" }}>
                {v.typeShort}
              </span>
              <span style={{ fontFamily: theme.mono, fontSize: 11,
                background: theme.bg2, color: theme.inkSoft,
                padding: "5px 12px", borderRadius: theme.pillRadius,
                letterSpacing: ".15em", fontWeight: 600, textTransform: "uppercase" }}>
                {t("table_year")} · {v.year}
              </span>
              {v.isReference && <span style={{ fontFamily: theme.mono, fontSize: 11,
                background: theme.accent, color: theme.ink, padding: "5px 12px",
                borderRadius: theme.pillRadius, letterSpacing: ".15em", fontWeight: 800 }}>
                ★ {t("reference_label").toUpperCase()}</span>}
              {v.isNew && <span style={{ fontFamily: theme.mono, fontSize: 11,
                background: theme.primary, color: theme.surface, padding: "5px 12px",
                borderRadius: theme.pillRadius, letterSpacing: ".15em", fontWeight: 800 }}>
                ● {t("new_label").toUpperCase()}</span>}
            </div>
            )}
            {!isB && (
            <h1 style={{ fontFamily: theme.display, fontSize: "clamp(80px, 12vw, 168px)",
              lineHeight: .85, letterSpacing: "-.045em", margin: 0,
              fontWeight: theme.displayWeight, color: theme.ink, textWrap: "balance" }}>
              {v.code}
            </h1>
            )}
            <p style={{ fontFamily: theme.body, fontSize: 21, lineHeight: 1.4,
              color: theme.inkSoft, marginTop: 24, maxWidth: 600, fontWeight: 500,
              textWrap: "pretty" }}>
              {v.headline}
            </p>
            <p style={{ fontFamily: theme.mono, fontSize: 12, color: theme.inkMuted,
              marginTop: 16, letterSpacing: ".05em" }}>
              {v.breeder}
            </p>
          </div>
          {/* vs reference */}
          <div style={{ background: theme.surface, borderRadius: theme.radiusLg,
            border: `1px solid ${theme.line}`, padding: 28,
            boxShadow: "0 4px 16px rgba(15,26,20,.04)" }}>
            {[
              [t("table_yield"), v.yieldPct, v.yield + " kg/ha"],
              [t("table_quality"), v.qualityPct, v.quality + " pts"],
            ].map(([l, pct, sub]) => (
              <div key={l} style={{ marginBottom: 16 }}>
                <div style={{ display: "flex", justifyContent: "space-between",
                  alignItems: "baseline", marginBottom: 6 }}>
                  <span style={{ fontFamily: theme.body, fontSize: 13, color: theme.ink,
                    fontWeight: 600 }}>{l}</span>
                  <span style={{ fontFamily: theme.display, fontSize: 24,
                    fontWeight: theme.displayWeight, color: pct >= 100 ? theme.primary : theme.ink,
                    letterSpacing: "-.02em" }}>{pct}%</span>
                </div>
                <div style={{ height: 8, background: theme.bg2,
                  borderRadius: 4, position: "relative", overflow: "hidden" }}>
                  <div style={{ height: "100%", width: Math.min(pct, 130) / 1.3 + "%",
                    background: pct >= 100 ? theme.primary : theme.secondary,
                    borderRadius: 4, transition: "width .6s" }}/>
                  <div style={{ position: "absolute", left: "76.9%", top: -2, bottom: -2,
                    width: 2, background: theme.accent }}/>
                </div>
                <div style={{ fontFamily: theme.mono, fontSize: 11, color: theme.inkMuted,
                  marginTop: 4, letterSpacing: ".05em" }}>{sub}</div>
              </div>
            ))}
            <div style={{ paddingTop: 12, marginTop: 8,
              borderTop: `1px solid ${theme.line}`, display: "flex",
              justifyContent: "space-between", alignItems: "center",
              fontFamily: theme.mono, fontSize: 11, color: theme.inkMuted }}>
              <span>{lang==="fr"?"vs":"vs"} ITB 683 = 100%</span>
              <span style={{ color: theme.accent, fontWeight: 700 }}>★ témoin</span>
            </div>
          </div>
        </div>
      </section>

      {/* Resistances grid */}
      <section style={{ padding: "64px 32px", background: theme.bg2 }}>
        <div style={{ maxWidth: 1320, margin: "0 auto" }}>
          <Eyebrow theme={theme}>{t("detail_resistances")}</Eyebrow>
          <h2 style={{ fontFamily: theme.display, fontSize: theme.h2Size, lineHeight: .95,
            fontWeight: theme.displayWeight, letterSpacing: theme.letterSpacing,
            margin: "0 0 32px", color: theme.ink, textTransform: theme.id==="B"?"none":"none",
            maxWidth: 800, textWrap: "pretty" }}>
            {lang==="fr"?"Profil bio-agresseurs.":"Bio-aggressor profile."}
          </h2>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 8 }}>
            {RESISTANCE_KEYS.map(r => {
              const k = v.resistances[r.id];
              const status = k === "R" ? { bg: theme.primary, fg: theme.surface, label: "R", text: lang==="fr"?"Résistante":"Resistant" }
                : k === "Tol" ? { bg: theme.accent, fg: theme.ink, label: "T", text: lang==="fr"?"Tolérante":"Tolerant" }
                : { bg: theme.surface, fg: theme.inkMuted, label: "S", text: lang==="fr"?"Sensible":"Susceptible" };
              return (
                <div key={r.id} style={{ background: status.bg, color: status.fg,
                  borderRadius: theme.radius, padding: 20,
                  border: k === "S" ? `1px dashed ${theme.line2}` : "none",
                  display: "flex", flexDirection: "column", gap: 10, minHeight: 130 }}>
                  <div style={{ fontFamily: theme.display, fontSize: 36,
                    fontWeight: theme.displayWeight, letterSpacing: "-.02em", lineHeight: 1 }}>
                    {status.label}
                  </div>
                  <div style={{ fontFamily: theme.mono, fontSize: 10, opacity: .8,
                    letterSpacing: ".15em", textTransform: "uppercase",
                    marginTop: "auto" }}>{r.short}</div>
                  <div style={{ fontFamily: theme.body, fontSize: 11, opacity: .85 }}>
                    {status.text}
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* Agronomic + Chemistry */}
      <section style={{ padding: "64px 32px",
        borderBottom: `1px solid ${theme.line}` }}>
        <div style={{ maxWidth: 1320, margin: "0 auto",
          display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32 }}>
          <div>
            <Eyebrow theme={theme}>{t("detail_agronomic")}</Eyebrow>
            <div style={{ background: theme.surface, borderRadius: theme.radiusLg,
              border: `1px solid ${theme.line}`, padding: 28 }}>
              {[
                [t("table_flowering"), `${v.flowering}j · ${v.floweringClass}`],
                [lang==="fr"?"Durée du cycle":"Cycle length", `${v.duration} jours`],
                [t("table_lodging"), v.lodging],
              ].map(([l, val]) => (
                <div key={l} style={{ display: "flex", justifyContent: "space-between",
                  padding: "12px 0", borderBottom: `1px solid ${theme.line}` }}>
                  <span style={{ fontFamily: theme.body, fontSize: 14, color: theme.inkSoft }}>{l}</span>
                  <span style={{ fontFamily: theme.display, fontSize: 16,
                    fontWeight: theme.displayWeight, color: theme.ink }}>{val}</span>
                </div>
              ))}
            </div>
          </div>
          <div>
            <Eyebrow theme={theme}>{t("detail_chemistry")}</Eyebrow>
            <div style={{ background: theme.surface, borderRadius: theme.radiusLg,
              border: `1px solid ${theme.line}`, padding: 28 }}>
              {[
                [t("table_alkaloids"), `${v.alkaloids} %`],
                [t("table_sugars"), `${v.sugars} %`],
              ].map(([l, val]) => (
                <div key={l} style={{ display: "flex", justifyContent: "space-between",
                  padding: "12px 0", borderBottom: `1px solid ${theme.line}` }}>
                  <span style={{ fontFamily: theme.body, fontSize: 14, color: theme.inkSoft }}>{l}</span>
                  <span style={{ fontFamily: theme.display, fontSize: 16,
                    fontWeight: theme.displayWeight, color: theme.ink }}>{val}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Technician note */}
      {!isB && (
      <section style={{ padding: "64px 32px", background: theme.primarySoft }}>
        <div style={{ maxWidth: 900, margin: "0 auto" }}>
          <Eyebrow theme={theme}>{t("detail_technician")}</Eyebrow>
          <p style={{ fontFamily: theme.display, fontSize: 32, lineHeight: 1.35,
            fontWeight: theme.id === "C" ? 400 : 600, color: theme.ink,
            margin: 0, textWrap: "pretty",
            fontStyle: theme.italic ? "italic" : "normal" }}>
            « {v.technician} »
          </p>
        </div>
      </section>
      )}

      {/* STORY — warmer human note + photo (site B only) */}
      {isB && (
        <section style={{ padding: "100px 32px", background: theme.bg }}>
          <div style={{ maxWidth: 1320, margin: "0 auto",
            display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56,
            alignItems: "center" }}>
            <div style={{ position: "relative", height: 480, borderRadius: theme.radiusLg,
              overflow: "hidden", border: `1px solid ${theme.line}` }}>
              <div style={{ position: "absolute", inset: 0,
                backgroundImage: `url(${PHOTOS.hands_soil})`,
                backgroundSize: "cover", backgroundPosition: "center" }}/>
              <div style={{ position: "absolute", bottom: 18, left: 22, right: 22,
                color: theme.surface, fontFamily: theme.mono, fontSize: 10,
                letterSpacing: ".15em", fontWeight: 700, textTransform: "uppercase",
                opacity: .9 }}>
                {v.breeder}
              </div>
            </div>
            <div>
              <p style={{ fontFamily: theme.display, fontSize: 36, lineHeight: 1.25,
                fontWeight: theme.id === "C" ? 400 : 600, color: theme.ink,
                margin: 0, textWrap: "pretty",
                fontStyle: theme.italic ? "italic" : "normal" }}>
                « {v.technician} »
              </p>
              <div style={{ marginTop: 28, display: "flex", gap: 24,
                paddingTop: 24, borderTop: `1px solid ${theme.line}` }}>
                <div style={{ flex: 1 }}>
                  <div style={{ fontFamily: theme.mono, fontSize: 10,
                    color: theme.inkMuted, letterSpacing: ".15em",
                    fontWeight: 700, textTransform: "uppercase" }}>
                    {lang==="fr"?"Sélectionneur":"Breeder"}
                  </div>
                  <div style={{ fontFamily: theme.display, fontSize: 18, fontWeight: 700,
                    color: theme.ink, marginTop: 4 }}>{v.breeder}</div>
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontFamily: theme.mono, fontSize: 10,
                    color: theme.inkMuted, letterSpacing: ".15em",
                    fontWeight: 700, textTransform: "uppercase" }}>
                    {lang==="fr"?"Disponibilité":"Availability"}
                  </div>
                  <div style={{ fontFamily: theme.display, fontSize: 18, fontWeight: 700,
                    color: theme.primary, marginTop: 4 }}>
                    ● {lang==="fr"?"En stock · 48 h":"In stock · 48 h"}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
      )}

      {/* INLINE CONTACT FORM — request a quote / sample for THIS variety */}
      <section style={{ padding: "100px 32px",
        background: isB ? theme.primarySoft : theme.bg2,
        borderTop: `1px solid ${theme.line}` }}>
        <div style={{ maxWidth: 1320, margin: "0 auto",
          display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 56,
          alignItems: "start" }}>
          <div>
            <h2 style={{ fontFamily: theme.display, fontSize: 56, lineHeight: 1,
              fontWeight: theme.displayWeight, letterSpacing: theme.letterSpacing,
              margin: 0, color: theme.ink, textWrap: "balance" }}>
              {lang==="fr"
                ? <>{v.code} <em style={{ color: theme.primary, fontStyle: theme.italic?"italic":"normal", fontWeight: theme.id==="C"?500:800 }}>vous intéresse&nbsp;?</em></>
                : <>Interested in <em style={{ color: theme.primary, fontStyle: theme.italic?"italic":"normal", fontWeight: theme.id==="C"?500:800 }}>{v.code}&thinsp;?</em></>}
            </h2>
            <p style={{ fontFamily: theme.body, fontSize: 16, lineHeight: 1.55,
              color: theme.ink, opacity: .8, marginTop: 20, maxWidth: 380,
              textWrap: "pretty" }}>
              {lang==="fr"
                ? "Devis sous 48h, échantillon technique sur demande, données d'essais multilocaux à votre disposition."
                : "Quote within 48h, technical sample available on request, multi-location trial data on demand."}
            </p>
            <div style={{ marginTop: 32, display: "flex", flexDirection: "column", gap: 14 }}>
              {[
                ["✓", lang==="fr"?"Réponse personnalisée sous 48 h":"Personalised reply within 48h"],
                ["✓", lang==="fr"?"Conseiller agronome dédié":"Dedicated agronomist"],
                ["✓", lang==="fr"?"Conditions par volume & pays":"Volume & country pricing"],
              ].map(([i, l]) => (
                <div key={l} style={{ display: "flex", gap: 12, alignItems: "start" }}>
                  <span style={{ width: 22, height: 22, borderRadius: 11,
                    background: theme.primary, color: theme.surface,
                    display: "inline-flex", alignItems: "center", justifyContent: "center",
                    fontFamily: theme.mono, fontSize: 11, fontWeight: 800,
                    flexShrink: 0 }}>{i}</span>
                  <span style={{ fontFamily: theme.body, fontSize: 14, color: theme.ink,
                    paddingTop: 2 }}>{l}</span>
                </div>
              ))}
            </div>
          </div>

          <DetailContactForm theme={theme} v={v} lang={lang} setRoute={setRoute}/>
        </div>
      </section>
    </main>
  );
}

function DetailContactForm({ theme, v, lang, setRoute }) {
  const [sent, setSent] = React.useState(false);
  const [form, setForm] = React.useState({
    name: "", company: "", email: "", country: "FR",
    surface: "", message: "", role: "producer",
  });
  const update = (k) => (e) => setForm(s => ({ ...s, [k]: e.target.value }));
  const fld = {
    background: theme.surface, border: `1px solid ${theme.line2}`,
    borderRadius: theme.buttonRadius === 999 ? 10 : theme.buttonRadius,
    padding: "12px 14px", fontFamily: theme.body, fontSize: 15, color: theme.ink,
    outline: "none", width: "100%", boxSizing: "border-box",
  };
  const lab = {
    fontFamily: theme.mono, fontSize: 10, letterSpacing: ".15em",
    color: theme.primary, textTransform: "uppercase", display: "block",
    marginBottom: 8, fontWeight: 700,
  };
  if (sent) {
    return (
      <div style={{ background: theme.surface, borderRadius: theme.radiusLg,
        border: `1px solid ${theme.line}`, padding: 48, textAlign: "center",
        boxShadow: "0 8px 32px rgba(15,26,20,.06)" }}>
        <div style={{ width: 64, height: 64, borderRadius: 32,
          background: theme.primary, color: theme.surface,
          display: "inline-flex", alignItems: "center", justifyContent: "center",
          fontSize: 28, fontWeight: 800, marginBottom: 24 }}>✓</div>
        <h3 style={{ fontFamily: theme.display, fontSize: 36,
          fontWeight: theme.displayWeight, color: theme.ink, margin: 0,
          letterSpacing: theme.letterSpacing }}>
          {lang==="fr"?"Demande envoyée.":"Request sent."}
        </h3>
        <p style={{ fontFamily: theme.body, fontSize: 16, color: theme.ink, opacity: .75,
          marginTop: 12, marginBottom: 28 }}>
          {lang==="fr"
            ? `Réponse personnalisée pour ${v.code} sous 48 h, à ${form.email || "votre adresse"}.`
            : `Personalised reply for ${v.code} within 48h, to ${form.email || "your address"}.`}
        </p>
        <button onClick={() => setRoute({ name: "varieties" })}
          style={{ background: theme.ink, color: theme.surface, border: "none",
            padding: "12px 20px", borderRadius: theme.buttonRadius === 999 ? 999 : 10,
            fontFamily: theme.body, fontSize: 14, fontWeight: 600, cursor: "pointer" }}>
          ← {lang==="fr"?"Retour au catalogue":"Back to catalogue"}
        </button>
      </div>
    );
  }
  return (
    <form onSubmit={(e) => { e.preventDefault(); setSent(true); }}
      style={{ background: theme.surface, borderRadius: theme.radiusLg,
        border: `1px solid ${theme.line}`, padding: 32,
        boxShadow: "0 8px 32px rgba(15,26,20,.06)" }}>
      <div style={{ display: "flex", justifyContent: "space-between",
        alignItems: "center", marginBottom: 24, paddingBottom: 16,
        borderBottom: `1px solid ${theme.line}` }}>
        <span style={{ fontFamily: theme.mono, fontSize: 10,
          letterSpacing: ".18em", color: theme.inkMuted, fontWeight: 700,
          textTransform: "uppercase" }}>
          {lang==="fr"?"Variété demandée":"Cultivar requested"}
        </span>
        <span style={{ fontFamily: theme.display, fontSize: 22, fontWeight: 800,
          color: theme.primary, letterSpacing: "-.02em" }}>{v.code}</span>
      </div>

      {/* Role pills */}
      <div style={{ marginBottom: 20 }}>
        <label style={lab}>{lang==="fr"?"Vous êtes":"You are"}</label>
        <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
          {[
            ["producer", lang==="fr"?"Producteur":"Grower"],
            ["industrial", lang==="fr"?"Industriel":"Manufacturer"],
            ["research", lang==="fr"?"Chercheur":"Researcher"],
            ["other", lang==="fr"?"Autre":"Other"],
          ].map(([k, l]) => (
            <button type="button" key={k} onClick={() => setForm(s => ({ ...s, role: k }))}
              style={{ padding: "8px 14px", borderRadius: theme.pillRadius,
                border: `1px solid ${form.role === k ? theme.primary : theme.line2}`,
                background: form.role === k ? theme.primary : theme.surface,
                color: form.role === k ? theme.surface : theme.ink,
                fontFamily: theme.body, fontSize: 13, fontWeight: 600,
                cursor: "pointer", transition: "all .15s" }}>{l}</button>
          ))}
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginBottom: 16 }}>
        <div>
          <label style={lab}>{lang==="fr"?"Nom":"Name"} *</label>
          <input required value={form.name} onChange={update("name")} style={fld}/>
        </div>
        <div>
          <label style={lab}>{lang==="fr"?"Entreprise":"Company"}</label>
          <input value={form.company} onChange={update("company")} style={fld}/>
        </div>
        <div>
          <label style={lab}>Email *</label>
          <input required type="email" value={form.email} onChange={update("email")} style={fld}/>
        </div>
        <div>
          <label style={lab}>{lang==="fr"?"Pays":"Country"}</label>
          <select value={form.country} onChange={update("country")} style={fld}>
            {["FR","IT","ES","DE","BE","MA","TN","BJ","CH","Other"].map(c =>
              <option key={c} value={c}>{c}</option>)}
          </select>
        </div>
      </div>

      <div style={{ marginBottom: 16 }}>
        <label style={lab}>{lang==="fr"?"Surface envisagée (ha)":"Planned surface (ha)"}</label>
        <input value={form.surface} onChange={update("surface")} placeholder="ex. 12"
          inputMode="decimal" style={fld}/>
      </div>

      <div style={{ marginBottom: 24 }}>
        <label style={lab}>{lang==="fr"?"Précisez votre besoin":"Tell us more"}</label>
        <textarea value={form.message} onChange={update("message")} rows={4}
          placeholder={lang==="fr"
            ? `Année de production, débouché, questions techniques sur ${v.code}…`
            : `Production year, end-market, technical questions about ${v.code}…`}
          style={{ ...fld, resize: "vertical", minHeight: 96, fontFamily: theme.body }}/>
      </div>

      <div style={{ display: "flex", justifyContent: "space-between",
        alignItems: "center", gap: 16, flexWrap: "wrap" }}>
        <div style={{ fontFamily: theme.mono, fontSize: 11, color: theme.inkMuted,
          letterSpacing: ".05em" }}>
          {lang==="fr"?"Réponse sous 48 h ouvrées":"Reply within 48 working hours"}
        </div>
        <button type="submit"
          style={{ background: theme.ink, color: theme.surface, border: "none",
            padding: "14px 24px",
            borderRadius: theme.buttonRadius === 999 ? 999 : 10,
            fontFamily: theme.body, fontSize: 14, fontWeight: 700,
            cursor: "pointer", letterSpacing: ".02em" }}>
          {lang==="fr"?"Demander un devis":"Request a quote"} →
        </button>
      </div>
    </form>
  );
}

// ─── Hemp landing ───────────────────────────────────────────
function PageHemp({ theme, t, lang, setRoute }) {
  return (
    <main style={{ background: theme.bg, color: theme.ink, fontFamily: theme.body, minHeight: "100vh" }}>
      <PageHeader theme={theme}
        eyebrow={lang==="fr"?"02 / Programme chanvre · Lancé 2022":"02 / Hemp programme · Launched 2022"}
        title={lang==="fr"
          ? <>Une <em style={{ color: theme.primary, fontStyle: theme.italic ? "italic" : "normal", fontWeight: theme.id==="C"?500:800 }}>maison.</em> Deux cultures.</>
          : <>One <em style={{ color: theme.primary, fontStyle: theme.italic ? "italic" : "normal", fontWeight: theme.id==="C"?500:800 }}>house.</em> Two crops.</>}
        subtitle={lang==="fr"
          ? "Lancé en 2022, notre programme chanvre s'appuie sur 25 années d'expertise sélection. Trois lignées en cours d'inscription : fibres longues, graines, cannabinoïdes — toutes < 0,3 % THC."
          : "Launched in 2022, our hemp programme builds on 25 years of breeding expertise. Three lines in registration: long fibre, grain, cannabinoids — all under 0.3% THC."}
        hero={theme.id==="B" ? { url: PHOTOS.green_field, caption: lang==="fr"?"Programme chanvre · 2022":"Hemp programme · 2022"} : undefined}/>

      {/* Stats band */}
      <section style={{ padding: "48px 32px", background: theme.bg2,
        borderBottom: `1px solid ${theme.line}` }}>
        <div style={{ maxWidth: 1320, margin: "0 auto",
          display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24 }}>
          {[
            { n: "2022", l: lang==="fr"?"lancement programme":"programme launched" },
            { n: "3", l: lang==="fr"?"lignées en sélection":"lines in breeding" },
            { n: "< 0.3%", l: lang==="fr"?"THC · conforme UE":"THC · EU-compliant" },
            { n: "2026", l: lang==="fr"?"premières inscriptions":"first releases" },
          ].map((s, i) => (
            <div key={i}>
              <div style={{ fontFamily: theme.display, fontSize: 64, lineHeight: 1,
                fontWeight: theme.displayWeight, color: theme.primary,
                letterSpacing: "-.035em" }}>{s.n}</div>
              <div style={{ fontFamily: theme.body, fontSize: 13, color: theme.inkSoft,
                marginTop: 12, textWrap: "pretty" }}>{s.l}</div>
            </div>
          ))}
        </div>
      </section>

      {/* 3 lines */}
      <section style={{ padding: "80px 32px" }}>
        <div style={{ maxWidth: 1320, margin: "0 auto" }}>
          <Eyebrow theme={theme}>{lang==="fr"?"03 / Lignées · 3 débouchés":"03 / Lines · 3 use cases"}</Eyebrow>
          <h2 style={{ fontFamily: theme.display, fontSize: theme.h2Size, lineHeight: .95,
            fontWeight: theme.displayWeight, letterSpacing: theme.letterSpacing,
            margin: "0 0 48px", color: theme.ink, maxWidth: 800, textWrap: "pretty" }}>
            {lang==="fr"
              ? <>Une plante, <em style={{ color: theme.primary, fontStyle: theme.italic?"italic":"normal", fontWeight: theme.id==="C"?500:800 }}>trois économies</em> industrielles.</>
              : <>One plant, <em style={{ color: theme.primary, fontStyle: theme.italic?"italic":"normal", fontWeight: theme.id==="C"?500:800 }}>three industries.</em></>}
          </h2>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
            {HEMP_VARIETIES.map((h, i) => {
              const lineId = ["fibres", "graines", "cannabinoides"][i];
              return (
                <article key={h.code} onClick={() => setRoute({ name: "hempLine", lineId })}
                  style={{ cursor: "pointer", background: theme.surface,
                    border: `1px solid ${theme.line}`, borderRadius: theme.radiusLg,
                    padding: 28, minHeight: 360, display: "flex", flexDirection: "column",
                    gap: 16, transition: "all .25s",
                    boxShadow: "0 4px 16px rgba(15,26,20,.04)" }}
                  onMouseEnter={e => { e.currentTarget.style.transform = "translateY(-4px)";
                    e.currentTarget.style.borderColor = theme.primary;
                    e.currentTarget.style.boxShadow = `0 16px 40px rgba(15,26,20,.10)`; }}
                  onMouseLeave={e => { e.currentTarget.style.transform = "none";
                    e.currentTarget.style.borderColor = theme.line;
                    e.currentTarget.style.boxShadow = "0 4px 16px rgba(15,26,20,.04)"; }}>
                  <div style={{ display: "flex", justifyContent: "space-between",
                    alignItems: "start" }}>
                    <span style={{ fontFamily: theme.mono, fontSize: 10, color: theme.primary,
                      letterSpacing: ".18em", fontWeight: 700, textTransform: "uppercase" }}>
                      ● L.0{i+1} · {lang==="fr"?h.line:h.lineEn}
                    </span>
                    {h.isNew && <span style={{ fontFamily: theme.mono, fontSize: 9,
                      background: theme.primary, color: theme.surface, padding: "3px 8px",
                      borderRadius: 4, letterSpacing: ".1em", fontWeight: 800 }}>
                      {h.year}
                    </span>}
                  </div>
                  <div style={{ fontFamily: theme.display, fontSize: 48,
                    fontWeight: theme.displayWeight, letterSpacing: "-.025em",
                    lineHeight: 1, color: theme.ink }}>
                    {h.code}
                  </div>
                  <p style={{ fontFamily: theme.body, fontSize: 14, lineHeight: 1.55,
                    margin: 0, color: theme.inkSoft, textWrap: "pretty", flex: 1 }}>
                    {lang === "fr" ? h.headline : h.headlineEn}
                  </p>
                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10,
                    paddingTop: 16, borderTop: `1px solid ${theme.line}` }}>
                    <div>
                      <div style={{ fontFamily: theme.mono, fontSize: 9,
                        letterSpacing: ".15em", color: theme.inkMuted, fontWeight: 700,
                        textTransform: "uppercase" }}>{lang==="fr"?"Rdt":"Yield"}</div>
                      <div style={{ fontFamily: theme.display, fontSize: 22,
                        fontWeight: theme.displayWeight, color: theme.ink, marginTop: 2 }}>
                        {h.yield}
                      </div>
                    </div>
                    <div>
                      <div style={{ fontFamily: theme.mono, fontSize: 9,
                        letterSpacing: ".15em", color: theme.inkMuted, fontWeight: 700,
                        textTransform: "uppercase" }}>THC</div>
                      <div style={{ fontFamily: theme.display, fontSize: 22,
                        fontWeight: theme.displayWeight, color: theme.primary, marginTop: 2 }}>
                        {h.thc}
                      </div>
                    </div>
                  </div>
                  <div style={{ fontFamily: theme.body, fontSize: 12, color: theme.inkMuted,
                    fontStyle: "italic" }}>
                    → {lang === "fr" ? h.use : h.useEn}
                  </div>
                  <div style={{ fontFamily: theme.body, fontSize: 13,
                    color: theme.primary, fontWeight: 700, marginTop: 4 }}>
                    {lang==="fr"?"Voir la lignée":"View line"} →
                  </div>
                </article>
              );
            })}
          </div>
        </div>
      </section>

      {/* CTA — partner */}
      <section style={{ padding: "64px 32px", background: theme.primary, color: theme.surface }}>
        <div style={{ maxWidth: 1320, margin: "0 auto",
          display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 56, alignItems: "center" }}>
          <div>
            <h2 style={{ fontFamily: theme.display, fontSize: 56, lineHeight: .95,
              fontWeight: theme.displayWeight, letterSpacing: theme.letterSpacing,
              margin: 0, textWrap: "pretty" }}>
              {lang==="fr"?<>Vous transformez du <em style={{ fontStyle: theme.italic?"italic":"normal" }}>chanvre ?</em></>
                :<>You process <em style={{ fontStyle: theme.italic?"italic":"normal" }}>hemp?</em></>}
            </h2>
          </div>
          <div>
            <p style={{ fontFamily: theme.body, fontSize: 17, lineHeight: 1.55,
              opacity: .85, margin: "0 0 24px", textWrap: "pretty" }}>
              {lang==="fr"
                ? "Co-développement, contrats de multiplication, partenariats d'inscription. Dix transformateurs européens travaillent déjà avec nous."
                : "Co-development, multiplication contracts, registration partnerships. Ten European processors already work with us."}
            </p>
            <Btn theme={theme} kind="accent"
              onClick={() => setRoute({ name: "contact", subject: "hemp" })}>
              {lang==="fr"?"Discuter d'un partenariat":"Discuss a partnership"} →
            </Btn>
          </div>
        </div>
      </section>
    </main>
  );
}

// ─── Hemp line detail ───────────────────────────────────────
function PageHempLine({ theme, t, lang, setRoute, lineId }) {
  const idx = ["fibres", "graines", "cannabinoides"].indexOf(lineId || "fibres");
  const v = HEMP_VARIETIES[idx >= 0 ? idx : 0];
  return (
    <main style={{ background: theme.bg, color: theme.ink, fontFamily: theme.body, minHeight: "100vh" }}>
      <section style={{ padding: "24px 32px" }}>
        <div style={{ maxWidth: 1320, margin: "0 auto" }}>
          <a onClick={() => setRoute({ name: "hemp" })}
            style={{ cursor: "pointer", fontFamily: theme.body, fontSize: 13,
              color: theme.primary, fontWeight: 600 }}>
            ← {lang==="fr"?"Programme chanvre":"Hemp programme"}
          </a>
        </div>
      </section>

      <section style={{ padding: "16px 32px 48px",
        borderBottom: `1px solid ${theme.line}` }}>
        <div style={{ maxWidth: 1320, margin: "0 auto" }}>
          <div style={{ display: "flex", gap: 8, marginBottom: 16, flexWrap: "wrap" }}>
            <span style={{ fontFamily: theme.mono, fontSize: 11,
              background: theme.primarySoft, color: theme.primary,
              padding: "5px 12px", borderRadius: theme.pillRadius,
              letterSpacing: ".15em", fontWeight: 700, textTransform: "uppercase" }}>
              {lang === "fr" ? v.line : v.lineEn}
            </span>
            <span style={{ fontFamily: theme.mono, fontSize: 11,
              background: theme.primary, color: theme.surface, padding: "5px 12px",
              borderRadius: theme.pillRadius, letterSpacing: ".15em", fontWeight: 800 }}>
              ● {lang==="fr"?"INSCRIPTION":"REGISTRATION"} · {v.year}
            </span>
          </div>
          <h1 style={{ fontFamily: theme.display, fontSize: "clamp(80px, 12vw, 168px)",
            lineHeight: .85, letterSpacing: "-.045em", margin: 0,
            fontWeight: theme.displayWeight, color: theme.ink, textWrap: "balance" }}>
            {v.code}
          </h1>
          <p style={{ fontFamily: theme.body, fontSize: 21, lineHeight: 1.4,
            color: theme.inkSoft, marginTop: 24, maxWidth: 700, fontWeight: 500,
            textWrap: "pretty",
            fontStyle: theme.italic ? "italic" : "normal" }}>
            {lang === "fr" ? v.headline : v.headlineEn}
          </p>
        </div>
      </section>

      {/* Specs */}
      <section style={{ padding: "64px 32px", background: theme.bg2 }}>
        <div style={{ maxWidth: 1320, margin: "0 auto" }}>
          <Eyebrow theme={theme}>{lang==="fr"?"Conduite & spécifications":"Husbandry & specs"}</Eyebrow>
          <h2 style={{ fontFamily: theme.display, fontSize: 48, lineHeight: .95,
            fontWeight: theme.displayWeight, letterSpacing: theme.letterSpacing,
            margin: "0 0 32px", color: theme.ink }}>
            {lang==="fr"?"Profil agronomique.":"Agronomic profile."}
          </h2>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12 }}>
            {[
              { l: lang==="fr"?"Densité semis":"Sowing density",
                v: idx === 0 ? "200 pl/m²" : idx === 1 ? "60 pl/m²" : "10 000 pl/ha" },
              { l: lang==="fr"?"Cycle":"Cycle",
                v: idx === 0 ? "120-140 j" : idx === 1 ? "150 j" : "140-160 j" },
              { l: lang==="fr"?"Récolte":"Harvest",
                v: idx === 0 ? (lang==="fr"?"Pleine flor. ♂":"Full flower ♂") : idx === 1 ? (lang==="fr"?"Maturité graines":"Grain maturity") : (lang==="fr"?"Pré-floraison":"Pre-flower") },
              { l: lang==="fr"?"Fertilisation N":"N fertilisation", v: "100-120 kg/ha" },
              { l: lang==="fr"?"Sol":"Soil",
                v: idx === 0 ? (lang==="fr"?"Limono-argileux":"Loam-clay") : (lang==="fr"?"Argilo-calcaire":"Clay-limestone") },
              { l: "THC", v: v.thc },
            ].map((s, i) => (
              <div key={i} style={{ background: theme.surface, padding: 28,
                borderRadius: theme.radius, border: `1px solid ${theme.line}` }}>
                <div style={{ fontFamily: theme.mono, fontSize: 10, letterSpacing: ".18em",
                  color: theme.primary, fontWeight: 700, textTransform: "uppercase" }}>{s.l}</div>
                <div style={{ fontFamily: theme.display, fontSize: 30,
                  fontWeight: theme.displayWeight, color: theme.ink, marginTop: 12,
                  letterSpacing: "-.02em" }}>{s.v}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Other lines */}
      <section style={{ padding: "64px 32px" }}>
        <div style={{ maxWidth: 1320, margin: "0 auto" }}>
          <Eyebrow theme={theme}>{lang==="fr"?"Autres lignées":"Other lines"}</Eyebrow>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 16 }}>
            {HEMP_VARIETIES.filter((_, i) => i !== idx).map(x => {
              const otherIdx = HEMP_VARIETIES.indexOf(x);
              const lid = ["fibres", "graines", "cannabinoides"][otherIdx];
              return (
                <article key={x.code} onClick={() => setRoute({ name: "hempLine", lineId: lid })}
                  style={{ cursor: "pointer", background: theme.surface,
                    border: `1px solid ${theme.line}`, borderRadius: theme.radiusLg,
                    padding: 28, transition: "all .25s",
                    boxShadow: "0 4px 16px rgba(15,26,20,.04)" }}
                  onMouseEnter={e => { e.currentTarget.style.borderColor = theme.primary;
                    e.currentTarget.style.transform = "translateY(-2px)"; }}
                  onMouseLeave={e => { e.currentTarget.style.borderColor = theme.line;
                    e.currentTarget.style.transform = "none"; }}>
                  <div style={{ fontFamily: theme.mono, fontSize: 10, letterSpacing: ".18em",
                    color: theme.primary, marginBottom: 8, fontWeight: 700,
                    textTransform: "uppercase" }}>
                    {lang==="fr"?x.line:x.lineEn} · {x.year}
                  </div>
                  <div style={{ fontFamily: theme.display, fontSize: 36,
                    fontWeight: theme.displayWeight, letterSpacing: "-.025em",
                    color: theme.ink }}>{x.code}</div>
                  <div style={{ fontFamily: theme.body, fontSize: 14, color: theme.inkSoft,
                    marginTop: 8, textWrap: "pretty" }}>
                    {lang==="fr"?x.headline:x.headlineEn}
                  </div>
                </article>
              );
            })}
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, {
  PageVarieties, PageDetail, PageHemp, PageHempLine, Stat,
});