/* ==========================================================================
   LANDING: hero and category tiles.
   ========================================================================== */

const TILE_SPAN = {
  stoffe: "wide", kontext: "wide",
  sport: "", ernahrung: "", schlaf: "", gesundheit: "",
  rezepte: "half", wettkampf: "half",
};

function CategoryTile({ cat, span }) {
  const forumOnly = cat.forumOnly;
  const href = forumOnly ? "/forum?kind=recipe" : "/wissen?cat=" + cat.id;
  const count = forumOnly ? (cat.forumCount || 0) : cat.count;
  return (
    <Reveal className={"cat-tile " + span} as="div">
      <Link to={href} aria-label={cat.label} style={{ display: "block", height: "100%" }}>
        {cat.image && (
          <img
            src={cat.image}
            alt=""
            loading="lazy"
            onError={(e) => { e.target.style.display = "none"; }}
          />
        )}
        <span className="cat-arrow" aria-hidden="true">→</span>
        <div className="cat-body">
          <div className="cat-meta">
            {BB.num(count)} {BB.t("Einträge")}
            {cat.readCount > 0 && <span style={{ color: "var(--fg-3)" }}> · {BB.num(cat.readCount)} {BB.t("gelesen")}</span>}
          </div>
          <h3>{cat.label}</h3>
          {cat.blurb && <p>{cat.blurb}</p>}
        </div>
      </Link>
    </Reveal>
  );
}

function KnowledgeLanding({ categories, stats }) {
  const tops = useMemo(
    () => BB.children(categories, null).filter((c) => TILE_SPAN[c.id] !== undefined),
    [categories]
  );
  const rest = useMemo(
    () => BB.children(categories, null).filter((c) => TILE_SPAN[c.id] === undefined),
    [categories]
  );

  return (
    <>
      {/* ---------------- hero ---------------- */}
      <section className="hero">
        <div className="hero-glow" aria-hidden="true" />
        <div className="hero-grid" aria-hidden="true" />
        <div className="wrap hero-in">
          <div className="eyebrow">{BB.t("Wissensbasis & Community")}</div>

          <SplitHeadline>
            {words(BB.t("Alles über den Sport,"))}
            <em className="hero-word">{BB.t("ehrlich")}</em>{" "}
            {words(BB.t("dokumentiert."))}
          </SplitHeadline>

          <p className="lead">
            {BB.t("{n} kuratierte Einträge zu Pharmakologie, Physiologie, Training und Ernährung, plus ein Forum, in dem Mitglieder ihre Artikel, Storys, Stacks, Rezepte und Transformationen teilen.")
              .replace("{n}", BB.num(stats.wiki))}
          </p>

          <div className="hero-cta">
            <Link to="/wissen/alle" className="btn primary lg">{BB.t("Wissensbasis öffnen")}</Link>
            <Link to="/forum" className="btn ghost lg">{BB.t("Ins Forum")}</Link>
          </div>

          <div className="stat-strip">
            <div><div className="n"><Counter value={stats.wiki} /></div><div className="l">{BB.t("Wissensartikel")}</div></div>
            <div><div className="n"><Counter value={stats.categories} /></div><div className="l">{BB.t("Kategorien")}</div></div>
            <div><div className="n"><Counter value={stats.community} /></div><div className="l">{BB.t("Community-Beiträge")}</div></div>
            <div><div className="n"><Counter value={stats.members} /></div><div className="l">{BB.t("Mitglieder")}</div></div>
          </div>
        </div>
      </section>

      {/* ---------------- categories ---------------- */}
      <section className="section" id="kategorien">
        <div className="wrap">
          <Reveal className="section-head">
            <div className="eyebrow">{BB.t("Hauptkategorien")}</div>
            <h2>{BB.t("Wo willst du anfangen?")}</h2>
            <p className="lead">
              {BB.t("Jede Kategorie ist ein eigener Baum aus Unterthemen, von der Molekülstruktur bis zum fertigen Trainingsplan.")}
            </p>
          </Reveal>

          <div className="cat-grid">
            {tops.map((c) => <CategoryTile key={c.id} cat={c} span={TILE_SPAN[c.id]} />)}
          </div>

          {rest.length > 0 && (
            <Reveal className="row" style={{ flexWrap: "wrap", gap: 8, marginTop: "1.5rem" }}>
              {rest.map((c) => (
                <Link key={c.id} to={"/wissen?cat=" + c.id} className="pill">
                  {c.label}<span className="dim"> {c.count}</span>
                </Link>
              ))}
            </Reveal>
          )}
        </div>
      </section>
    </>
  );
}

/* ==========================================================================
   STARTSEITE: Premium-Funktionen zuerst. Die Wissensbasis hat ihre eigene
   Landingpage in KnowledgeLanding; hier wird das Produkt als zusammenhaengendes
   System aus Analyse, Wissen und Molekuelkarte gezeigt.
   ========================================================================== */

const HOME_ANALYSES = [
  {
    id: "split", number: "01", label: "Trainingssplit",
    title: "Volumen sehen. Erholung verstehen.",
    copy: "Sätze, Frequenz und Übungsauswahl werden zu einer lesbaren Woche. Du siehst nicht nur den Score, sondern jede Annahme darunter.",
    score: 86, scoreLabel: "stimmige Belastung", note: "2 Stellen verdienen Aufmerksamkeit",
    path: "M4 72 C22 68 30 30 49 37 S78 78 98 52 S128 17 151 28 S180 65 206 20",
    metrics: [["Wochenvolumen", 0.86], ["Erholung", 0.74], ["Abdeckung", 0.92]],
    facts: ["18 Muskelgruppen", "5 Trainingstage", "jede Zahl begründet"],
  },
  {
    id: "stack", number: "02", label: "Stack",
    title: "Zusammenspiel statt Einzelliste.",
    copy: "Wirkstoffe, Dosis und Dauer werden gemeinsam betrachtet: Zielabdeckung, Redundanz, Organlast und bekannte Interaktionen bleiben getrennt nachvollziehbar.",
    score: 62, scoreLabel: "erhöhte Komplexität", note: "3 Überschneidungen im Blick behalten",
    path: "M4 64 C22 42 38 52 54 31 S82 20 101 48 S130 76 148 43 S183 28 206 39",
    metrics: [["Zielabdeckung", 0.81], ["Redundanz", 0.58], ["Datenlage", 0.69]],
    facts: ["5 Wirkstoffe", "11 Wirkungspfade", "keine Empfehlung"],
  },
  {
    id: "meal", number: "03", label: "Mahlzeit",
    title: "Mehr Kontext als Makros.",
    copy: "Eine Mahlzeit wird für ihren Anlass gelesen. Nährwerte, Kaloriendichte, Verdauung und Mikronährstoffe landen in derselben verständlichen Ansicht.",
    score: 91, scoreLabel: "passt zum Trainingsziel", note: "Proteinverteilung ist der stärkste Punkt",
    path: "M4 67 C24 63 34 48 51 51 S77 58 94 36 S119 18 140 31 S173 59 206 24",
    metrics: [["Protein", 0.94], ["Energiedichte", 0.72], ["Mikronährstoffe", 0.79]],
    facts: ["742 kcal", "54 g Protein", "Anlass einbezogen"],
  },
  {
    id: "blood", number: "04", label: "Blutbild",
    title: "Werte im richtigen Zusammenhang.",
    copy: "Messwerte werden im Referenzbereich verortet und mit Training, Belastung und zeitlichem Verlauf gelesen. Auffällig heißt nicht automatisch schlecht.",
    score: 78, scoreLabel: "überwiegend unauffällig", note: "2 Werte brauchen Verlauf statt Momentaufnahme",
    path: "M4 55 C23 35 39 61 57 42 S88 30 107 37 S131 62 151 48 S178 17 206 30",
    metrics: [["Referenzlage", 0.82], ["Verlauf", 0.67], ["Vollständigkeit", 0.88]],
    facts: ["24 Messwerte", "3 Zeitpunkte", "Kontext statt Diagnose"],
  },
];

const HOME_MAP_NODES = [
  { id: "testosteron", label: "Testosteron", name: "Testosteron", type: "substance", seed: true, tiefe: 0,
    detail: "Ausgangspunkt der Demo. Von hier werden Bindungen, Umwandlungen und Analyse-Endpunkte sichtbar." },
  { id: "ar", label: "AR", name: "Androgenrezeptor", type: "receptor", tiefe: 1,
    detail: "Der Androgenrezeptor verbindet den Stoff mit mehreren nachgelagerten biologischen Signalen." },
  { id: "cyp19a1", label: "CYP19A1", name: "Aromatase · CYP19A1", type: "enzyme", tiefe: 1,
    detail: "Das Enzym bildet die Brücke zur Umwandlung von Testosteron in Estradiol." },
  { id: "estradiol", label: "Estradiol", name: "Estradiol", type: "metabolite", tiefe: 2,
    detail: "Ein Metabolit mit eigenen Rezeptorwegen – nicht bloß ein Nebenprodukt in der Karte." },
  { id: "esr1", label: "ESR1", name: "Estrogenrezeptor alpha", type: "receptor", tiefe: 2,
    detail: "Ein Zielprotein, über das Estradiol weitere regulatorische Wege erreicht." },
  { id: "protein", label: "MPS", name: "Muskelproteinsynthese", type: "endpoint", tiefe: 2,
    detail: "Ein virtueller Analyse-Endpunkt bündelt mehrere belegte Wege, ohne sie zu einer Behauptung zu verkürzen." },
  { id: "shbg", label: "SHBG", name: "Sexualhormon-bindendes Globulin", type: "transporter", tiefe: 1,
    detail: "Der Transportknoten zeigt, dass freie und gebundene Anteile im System nicht dasselbe sind." },
];

const HOME_MAP_EDGES = [
  { id: 1, src: "testosteron", dst: "ar", mechanism: "agonist", evidence: "measured", strength: 0.95, confidence: 0.94, messungen: 12 },
  { id: 2, src: "testosteron", dst: "cyp19a1", mechanism: "substrate", evidence: "measured", strength: 0.76, confidence: 0.89, messungen: 7 },
  { id: 3, src: "cyp19a1", dst: "estradiol", mechanism: "produces", evidence: "measured", strength: 0.86, confidence: 0.91, messungen: 8 },
  { id: 4, src: "estradiol", dst: "esr1", mechanism: "agonist", evidence: "measured", strength: 0.88, confidence: 0.93, messungen: 10 },
  { id: 5, src: "ar", dst: "protein", mechanism: "positive_modulator", evidence: "predicted", strength: 0.66, confidence: 0.72, effect: 1 },
  { id: 6, src: "testosteron", dst: "shbg", mechanism: "binding", evidence: "measured", strength: 0.72, confidence: 0.87, messungen: 5 },
];

const HOME_MAP_TYPE_LABEL = {
  substance: "Substanz", metabolite: "Metabolit", receptor: "Rezeptor",
  enzyme: "Enzym", transporter: "Transporter", regulator: "Regulator",
  endpoint: "Analyse-Endpunkt",
};

function HomeHero({ stats }) {
  return (
    <section className="home-hero" aria-label={BB.t("Bodybuilding. Bis ins Molekül.")}>
      <div className="home-hero-media" aria-hidden="true" />
      <div className="home-hero-shade" aria-hidden="true" />

      <div className="wrap home-hero-inner">
        <div className="home-hero-copy">
          <SplitHeadline className="home-hero-title">
            {words(BB.t("Bodybuilding."))}
            <em>{words(BB.t("Bis ins Molekül."))}</em>
          </SplitHeadline>
          <p>{BB.t("Analysen, kuratiertes Wissen und biologische Zusammenhänge – transparent gerechnet, sauber belegt und an einem Ort.")}</p>
          <div className="home-hero-actions">
            <a href="#analysen" className="btn primary lg">{BB.t("Premium entdecken")} <span aria-hidden="true">↓</span></a>
            <Link to="/wissen" className="btn home-glass lg">{BB.t("Wissen öffnen")}</Link>
          </div>
          <div className="home-proof" aria-label={BB.t("Umfang der Plattform")}>
            <span><strong>{BB.num(stats.wiki || 0)}</strong>{BB.t("Wissenseinträge")}</span>
            <span><strong>4</strong>{BB.t("Analysemodelle")}</span>
            <span><strong>1</strong>{BB.t("verknüpftes System")}</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function HomeAnalysisPreview({ story }) {
  return (
    <div className="home-analysis-preview">
      <div className="home-preview-head">
        <span className="label">{BB.t("Beispielanalyse")}</span>
        <span className="home-trace"><i /> {BB.t("vollständig begründet")}</span>
      </div>
      <div className="home-preview-main">
        <div className="home-preview-score">
          <span>{BB.t("Gesamtbild")}</span>
          <strong>{story.score}</strong>
          <small>{BB.t(story.scoreLabel)}</small>
        </div>
        <svg className="home-preview-chart" viewBox="0 0 210 92" role="img" aria-label={BB.t("Verlauf der Beispielanalyse")}>
          <path className="home-chart-grid" d="M4 20 H206 M4 46 H206 M4 72 H206" />
          <path className="home-chart-area" d={`${story.path} L206 88 L4 88 Z`} />
          <path className="home-chart-line" d={story.path} />
          <circle cx="206" cy={story.id === "split" ? 20 : story.id === "stack" ? 39 : story.id === "meal" ? 24 : 30} r="3.5" />
        </svg>
      </div>
      <div className="home-preview-metrics">
        {story.metrics.map(([label, value]) => (
          <div key={label}>
            <div><span>{BB.t(label)}</span><strong>{Math.round(value * 100)}%</strong></div>
            <i><b style={{ transform: `scaleX(${value})` }} /></i>
          </div>
        ))}
      </div>
      <div className="home-preview-note"><span aria-hidden="true">↳</span>{BB.t(story.note)}</div>
    </div>
  );
}

function HomeAnalysisShowcase() {
  const [active, setActive] = useState(0);
  const [direction, setDirection] = useState(1);
  const stageRef = useRef(null);
  const animationRef = useRef(null);
  const story = HOME_ANALYSES[active];

  useEffect(() => {
    const stage = stageRef.current;
    if (!stage || BB.reducedMotion() || !stage.animate) return undefined;
    if (animationRef.current) animationRef.current.cancel();
    animationRef.current = stage.animate(
      [
        { opacity: 0.35, transform: `translate3d(${direction * 24}px, 0, 0)`, filter: "blur(2px)" },
        { opacity: 1, transform: "translate3d(0, 0, 0)", filter: "blur(0)" },
      ],
      { duration: 600, easing: "cubic-bezier(0.23, 1, 0.32, 1)" }
    );
    return () => { if (animationRef.current) animationRef.current.cancel(); };
  }, [active, direction]);

  function select(next) {
    if (next === active) return;
    setDirection(next > active ? 1 : -1);
    setActive(next);
  }

  function step(delta) {
    const next = (active + delta + HOME_ANALYSES.length) % HOME_ANALYSES.length;
    setDirection(delta > 0 ? 1 : -1);
    setActive(next);
  }

  return (
    <section className="section home-analysis" id="analysen" aria-labelledby="analysis-title">
      <div className="wrap">
        <Reveal className="home-section-intro">
          <div className="eyebrow">{BB.t("Premium Analysen")}</div>
          <h2 id="analysis-title">{BB.t("Nicht nur ein Score.")} <em>{BB.t("Die ganze Rechnung.")}</em></h2>
          <p className="lead">{BB.t("Jede Auswertung zeigt, wie sie zu ihrem Ergebnis kommt – vom Eingangswert bis zur Quelle. Vier Perspektiven, dieselbe Klarheit.")}</p>
        </Reveal>

        <Reveal className="home-analysis-shell">
          <div
            className="home-analysis-tabs" role="tablist" aria-label={BB.t("Analyse auswählen")}
            onKeyDown={(event) => {
              if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
              event.preventDefault();
              const delta = event.key === "ArrowRight" ? 1 : -1;
              const next = (active + delta + HOME_ANALYSES.length) % HOME_ANALYSES.length;
              select(next);
              const tabs = event.currentTarget.querySelectorAll('[role="tab"]');
              if (tabs[next]) tabs[next].focus();
            }}
          >
            {HOME_ANALYSES.map((item, index) => (
              <button
                type="button" role="tab" key={item.id}
                id={`home-analysis-tab-${item.id}`}
                aria-selected={active === index}
                aria-controls="home-analysis-panel"
                tabIndex={active === index ? 0 : -1}
                onClick={() => select(index)}
              >
                <span>{item.number}</span>
                <strong>{BB.t(item.label)}</strong>
                <i aria-hidden="true">↗</i>
              </button>
            ))}
          </div>

          <div
            className="home-analysis-stage" id="home-analysis-panel" role="tabpanel"
            aria-labelledby={`home-analysis-tab-${story.id}`}
            ref={stageRef} tabIndex="0"
            onKeyDown={(event) => {
              if (event.key === "ArrowLeft") { event.preventDefault(); step(-1); }
              if (event.key === "ArrowRight") { event.preventDefault(); step(1); }
            }}
          >
            <div className="home-analysis-copy">
              <div className="label">{story.number} / 04 · {BB.t(story.label)}</div>
              <h3>{BB.t(story.title)}</h3>
              <p>{BB.t(story.copy)}</p>
              <ul>
                {story.facts.map((fact) => <li key={fact}><span aria-hidden="true">✓</span>{BB.t(fact)}</li>)}
              </ul>
              <Link to={`/auswertung?was=${story.id}`} className="home-text-link">{BB.t("Analyse öffnen")} <span aria-hidden="true">↗</span></Link>
            </div>
            <HomeAnalysisPreview story={story} />
          </div>

          <div className="home-analysis-controls">
            <span className="mono">0{active + 1} <i /> 04</span>
            <div>
              <button type="button" onClick={() => step(-1)} aria-label={BB.t("Vorherige Analyse")}>←</button>
              <button type="button" onClick={() => step(1)} aria-label={BB.t("Nächste Analyse")}>→</button>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function HomeMoleculeDemo() {
  const [selected, setSelected] = useState(HOME_MAP_NODES[0]);

  function pick(node) {
    const match = HOME_MAP_NODES.find((item) => String(item.id) === String(node.id));
    if (match) setSelected(match);
  }

  const links = HOME_MAP_EDGES.filter((edge) => edge.src === selected.id || edge.dst === selected.id).length;

  return (
    <section className="section home-map" aria-labelledby="map-title">
      <div className="wrap">
        <Reveal className="home-map-head">
          <div>
            <div className="eyebrow">{BB.t("Molekülkarte")}</div>
            <h2 id="map-title">{BB.t("Vom Stoff zum System.")} <em>{BB.t("Eine Verbindung nach der anderen.")}</em></h2>
          </div>
          <p className="lead">{BB.t("Diese kleine Auswahl nutzt bereits die echte Kartenansicht. Wähle eine Node und verfolge, wie Substanz, Enzym, Rezeptor und Endpunkt zusammenhängen.")}</p>
        </Reveal>

        <Reveal className="home-map-frame">
          <div className="home-map-canvas">
            <div className="home-map-caption">
              <span className="label">{BB.t("Interaktive Demo")}</span>
              <span><i /> {HOME_MAP_NODES.length} {BB.t("ausgewählte Nodes")}</span>
            </div>
            <MolekuelkarteGraph
              nodes={HOME_MAP_NODES} edges={HOME_MAP_EDGES}
              treffer={[selected.id]} zentrum="testosteron" ansicht={1}
              onAufklappen={() => {}} onZuklappen={() => {}} onNodeSelect={pick}
            />
          </div>
          <aside className="home-map-detail" aria-live="polite">
            <span className={`home-node-type mk-typ-${selected.type}`}><i />{BB.t(HOME_MAP_TYPE_LABEL[selected.type] || selected.type)}</span>
            <div className="label">{BB.t("Ausgewählte Node")}</div>
            <h3>{BB.t(selected.name)}</h3>
            <p>{BB.t(selected.detail)}</p>
            <dl>
              <div><dt>{BB.t("Verbindungen in der Demo")}</dt><dd>{links}</dd></div>
              <div><dt>{BB.t("Datenstatus")}</dt><dd>{BB.t("gemessen + modelliert")}</dd></div>
            </dl>
            <div className="home-map-legend">
              <span className="mk-typ-substance"><i />{BB.t("Substanz")}</span>
              <span className="mk-typ-receptor"><i />{BB.t("Rezeptor")}</span>
              <span className="mk-typ-enzyme"><i />{BB.t("Enzym")}</span>
              <span className="mk-typ-endpoint"><i />{BB.t("Endpunkt")}</span>
            </div>
            <div className="home-map-node-picker" role="group" aria-label={BB.t("Node auswählen")}>
              <span className="label">{BB.t("Node auswählen")}</span>
              <div>
                {HOME_MAP_NODES.map((node) => (
                  <button
                    type="button" key={node.id} aria-pressed={selected.id === node.id}
                    onClick={() => setSelected(node)}
                  >
                    {node.label}
                  </button>
                ))}
              </div>
            </div>
            <Link to="/molekuelkarte" className="btn primary">{BB.t("Ganze Karte erkunden")} <span aria-hidden="true">↗</span></Link>
          </aside>
        </Reveal>
      </div>
    </section>
  );
}

function HomeClosing() {
  return (
    <section className="section home-closing">
      <div className="wrap">
        <Reveal className="home-closing-card">
          <div className="eyebrow">{BB.t("Bodybuilding Bible Premium")}</div>
          <h2>{BB.t("Deine Frage ist der Anfang.")} <em>{BB.t("Nicht das Ende der Erklärung.")}</em></h2>
          <p className="lead">{BB.t("Starte mit einer Analyse oder tauche kostenlos in die kuratierte Wissensbasis ein.")}</p>
          <div className="home-hero-actions">
            <Link to="/auswertung" className="btn primary lg">{BB.t("Analyse starten")}</Link>
            <Link to="/wissen" className="btn ghost lg">{BB.t("Wissen entdecken")}</Link>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function HomeLoader({ ready }) {
  return (
    <div
      className={`home-loader${ready ? " out" : ""}`}
      role="status"
      aria-label={BB.t("Lädt …")}
      aria-hidden={ready}
    >
      <span className="brand-logo home-loader-logo" aria-hidden="true">
        <img src="/static/assets/logo-source.png" alt="" />
      </span>
      <span className="home-loader-line" aria-hidden="true"><i /></span>
    </div>
  );
}

function Landing({ categories, stats }) {
  const [ready, setReady] = useState(() => {
    try { return window.sessionStorage.getItem("bb-home-image-ready") === "1"; }
    catch (_) { return false; }
  });

  useEffect(() => {
    if (ready) return undefined;

    const previousOverflow = document.body.style.overflow;
    const startedAt = performance.now();
    const image = new Image();
    let active = true;
    let settled = false;
    let revealTimer;
    let fallbackTimer;

    document.body.style.overflow = "hidden";
    document.body.classList.add("home-is-loading");

    const reveal = () => {
      if (settled) return;
      settled = true;
      window.clearTimeout(fallbackTimer);
      const remaining = Math.max(0, 400 - (performance.now() - startedAt));
      revealTimer = window.setTimeout(() => {
        if (!active) return;
        try { window.sessionStorage.setItem("bb-home-image-ready", "1"); }
        catch (_) { /* Storage can be disabled without blocking the page. */ }
        setReady(true);
      }, remaining);
    };

    image.onload = reveal;
    image.onerror = reveal;
    image.src = "/static/assets/landing-gym.jpg?v=hero4k1";
    if (image.decode) image.decode().then(reveal).catch(() => { if (image.complete) reveal(); });
    fallbackTimer = window.setTimeout(reveal, 4000);

    return () => {
      active = false;
      window.clearTimeout(revealTimer);
      window.clearTimeout(fallbackTimer);
      image.onload = null;
      image.onerror = null;
      document.body.style.overflow = previousOverflow;
      document.body.classList.remove("home-is-loading");
    };
  }, [ready]);

  return (
    <div className={`home-page ${ready ? "is-ready" : "is-loading"}`} aria-busy={!ready}>
      <HomeLoader ready={ready} />
      <div className="home-page-content" aria-hidden={!ready}>
        <HomeHero stats={stats} />
        <HomeAnalysisShowcase />
        <HomeMoleculeDemo />
        <HomeClosing />
      </div>
    </div>
  );
}

Object.assign(window, { Landing, KnowledgeLanding, CategoryTile });