/* Der Lernort page + ValuesOrbit + FarmMap, and the StubPage for routes not yet built */

function ValuesOrbit() {
  const vals = window.SITE.values;
  const ring1 = [], ring2 = [];
  vals.forEach((v, i) => (i % 2 === 0 ? ring1 : ring2).push(v));
  const place = (list, radius) => list.map((v, i) => {
    const a = (i / list.length) * Math.PI * 2 - Math.PI / 2;
    return { v, left: 50 + radius * Math.cos(a), top: 50 + radius * Math.sin(a) };
  });
  const outer = place(ring1, 46);
  const inner = place(ring2, 35);
  return (
    <>
      <div className="orbit-wrap" aria-hidden="true">
        <div className="orbit-ring"></div>
        <div className="orbit-ring r2"></div>
        <div className="orbit-core">
          <span className="script">Werte des</span>
          <b>Erdkinderplans</b>
        </div>
        <div className="orbit-spin" style={{ "--dur": "70s" }}>
          {outer.map((n, i) => (
            <div className="value-node" key={n.v} style={{ left: `${n.left}%`, top: `${n.top}%` }}>
              <span className="chip" style={{ "--dur": "70s" }}><span className="dot"></span>{n.v}</span>
            </div>
          ))}
        </div>
        <div className="orbit-spin reverse" style={{ "--dur": "52s" }}>
          {inner.map((n, i) => (
            <div className="value-node" key={n.v} style={{ left: `${n.left}%`, top: `${n.top}%` }}>
              <span className="chip" style={{ "--dur": "52s" }}><span className="dot"></span>{n.v}</span>
            </div>
          ))}
        </div>
      </div>
      <div className="orbit-fallback">
        {vals.map((v) => <span className="chip" key={v}><span className="dot"></span>{v}</span>)}
      </div>
    </>
  );
}

function FarmMap() {
  const areas = window.SITE.areas;
  const blurbs = window.SITE.areaBlurbs;
  const [active, setActive] = useState(0);
  const [pulse, setPulse] = useState(0);
  const cur = areas[active];
  const select = (i) => { setActive(i); setPulse((p) => p + 1); };
  return (
    <div className="farm-layout">
      <div className="farm-areas" role="tablist" aria-label="Bereiche der Farm">
        {areas.map((a, i) => (
          <button
            key={a.a}
            className={`area-chip ${i === active ? "active" : ""}`}
            role="tab"
            aria-selected={i === active}
            onClick={() => select(i)}
            onMouseEnter={() => select(i)}
          >
            <span className="a-name">{a.a}</span>
            <span className="a-cm"><span className="ring"></span>{a.cm ? a.cm.split(" & ")[0].split(" ")[0] : "Bereich"}</span>
          </button>
        ))}
      </div>
      <div className={`cm-panel ${pulse ? "swap" : ""}`} key={pulse}>
        <Ph motif={cur.cm ? `Porträt ${cur.cm}` : `Bereich ${cur.a} am Lernort`} tone="ph--olive" />
        <div className="cm-body">
          <div className="cm-area">{cur.a}</div>
          {cur.cm
            ? <><div className="cm-name">{cur.cm}</div><div className="cm-role">{cur.role}</div></>
            : <div className="cm-role" style={{ marginTop: ".4em" }}>Community-Bereich · Manager:in in Vorbereitung</div>}
          <p className="cm-desc">{blurbs[cur.a]}</p>
        </div>
      </div>
    </div>
  );
}

function LernortPage() {
  return (
    <main className="page-enter">
      {/* page hero */}
      <section className="page-hero has-rays">
        <div className="rays" style={{ "--ray-y": "0%", "--ray-opacity": ".045" }} aria-hidden="true"></div>
        <div className="container">
          <Reveal>
            <div className="breadcrumb"><a href="#/">Start</a> · Der Lernort</div>
            <span className="hero-eyebrow"><span className="dot"></span><span>Erdkinderplan · Soziale Organisation Farm</span></span>
            <h1 style={{ marginTop: ".5rem" }}>Der Lernort, an dem Arbeit zur Schule des Lebens wird</h1>
            <p className="lead">
              Auf der Farm lernen Jugendliche durch echte Verantwortung in einer Gemeinschaft. Werte,
              Methodik und vierzehn Bereiche greifen zu einem lebendigen sozialen Organismus ineinander.
            </p>
          </Reveal>
        </div>
      </section>

      {/* quote */}
      <section className="section section--tight">
        <div className="container">
          <Reveal>
            <div className="quote-block">
              <span className="mark" aria-hidden="true">„</span>
              <blockquote>
                How can you be prepared for social life if you have no knowledge of social life
                or the beginning of society?
              </blockquote>
              <p className="cite"><b>Maria Montessori</b> · The 1946 London Lectures, p. 102</p>
            </div>
          </Reveal>
        </div>
      </section>

      {/* values orbit */}
      <section className="section section--sage has-rays">
        <div className="rays rays--sage" style={{ "--ray-opacity": ".03" }} aria-hidden="true"></div>
        <div className="container">
          <div className="grid" style={{ gridTemplateColumns: "1fr 1fr", alignItems: "center", gap: "clamp(28px,4vw,60px)" }}>
            <Reveal>
              <div>
                <span className="eyebrow">Werte-Wolke</span>
                <h2 style={{ fontSize: "clamp(1.9rem,3.4vw,2.7rem)" }}>Die Werte des Erdkinderplans</h2>
                <p className="lead" style={{ marginTop: "1rem" }}>
                  Sie sind keine Regeln an der Wand, sondern werden im Alltag gelebt. Acht
                  Haltungen kreisen um den Kern des Lernorts und prägen jede Entscheidung.
                </p>
                <div className="chip-cloud" style={{ marginTop: "1.4rem" }}>
                  <span className="c" style={{ fontSize: ".9rem" }}>Wertschätzend</span>
                  <span className="c" style={{ fontSize: ".9rem" }}>Verbindlich</span>
                  <span className="c" style={{ fontSize: ".9rem" }}>Gemeinschaftlich</span>
                </div>
              </div>
            </Reveal>
            <Reveal delay="2"><ValuesOrbit /></Reveal>
          </div>
        </div>
      </section>

      {/* methodology */}
      <section className="section">
        <div className="container">
          <SecHead eyebrow="Methodik" title="Wie auf der Farm gelernt wird">
            Ein rhythmisierter Alltag verbindet praktisches Arbeiten mit fachlichem Lernen und Reflexion.
          </SecHead>
          <div className="method-grid">
            {window.SITE.methodsTop.map((m, i) => (
              <Reveal key={m.n} delay={String((i % 3) + 1)}>
                <div className="method-card">
                  <div className="ph-num">{m.n}</div>
                  <h3>{m.t}</h3>
                  <p>{m.d}</p>
                </div>
              </Reveal>
            ))}
          </div>
          <Reveal>
            <div className="method-list">
              {[
                ["Arbeitspläne", "Individuelle Pläne steuern das eigene Lernen über die Woche."],
                ["Portfolio & Bullet Journaling", "Lernwege werden dokumentiert und sichtbar gemacht."],
                ["Kleingruppen", "Lernen in überschaubaren, verlässlichen Gruppen."],
                ["Entwicklungs- & Feedbackgespräche", "Regelmäßige Gespräche begleiten jeden Lernweg."],
              ].map((r, i) => (
                <div className="row" key={i}>
                  <span className="tick">✓</span>
                  <div><b style={{ color: "var(--olive)" }}>{r[0]}</b><div className="muted" style={{ fontSize: ".95rem" }}>{r[1]}</div></div>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </section>

      {/* farm map */}
      <section className="section section--sage has-rays">
        <div className="rays rays--sage" style={{ "--ray-opacity": ".03", "--ray-x": "20%" }} aria-hidden="true"></div>
        <div className="container">
          <SecHead eyebrow="Soziale Organisation »Farm«" title="Vierzehn Bereiche, eine Gemeinschaft">
            Jeder Bereich wird von jugendlichen Community Manager:innen verantwortet. Fahre über einen
            Bereich oder tippe ihn an, um die zuständige Person kennenzulernen.
          </SecHead>
          <Reveal><FarmMap /></Reveal>
        </div>
      </section>

      {/* companions */}
      <section className="section">
        <div className="container">
          <SecHead eyebrow="Begleitung" title="Wer die Lerngruppe trägt" />
          <div className="grid" style={{ gridTemplateColumns: "repeat(4,1fr)" }}>
            {window.SITE.companions.map((c, i) => (
              <Reveal key={c.t} delay={String((i % 4) + 1)}>
                <div className="card" style={{ height: "100%" }}>
                  <div className="idx" style={{ fontFamily: "var(--font-script)", color: "var(--sage)", fontSize: "2rem" }}>{String(i + 1).padStart(2, "0")}</div>
                  <h3 style={{ fontSize: "1.18rem", margin: ".3em 0 .4em" }}>{c.t}</h3>
                  <p style={{ margin: 0, color: "var(--ink-soft)", fontSize: ".95rem" }}>{c.d}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* schooling band */}
      <section className="section section--olive has-rays">
        <div className="rays" aria-hidden="true"></div>
        <div className="container">
          <SecHead eyebrow="Schulische Bestandteile" light title="Was über den Kooperationspartner dazukommt">
            Der schulische Rahmen läuft über den anerkannten Schulträger. Am Lernort werden diese Bausteine eng verzahnt.
          </SecHead>
          <div className="school-list">
            {window.SITE.schoolParts.map((s, i) => (
              <Reveal key={s.t} delay={String((i % 4) + 1)}>
                <div className="s"><h4>{s.t}</h4><p>{s.d}</p></div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* deep film */}
      <FilmSection deep />

      <CtaBand
        title="Den Lernort selbst erleben"
        text="Der beste Weg, die Farm zu verstehen, ist ein Besuch. Vereinbare eine Hospitation oder komm zum Infoabend."
        primary={{ label: "Hospitieren", href: "#/familien" }}
        secondary={{ label: "Für Schulen: Kooperieren", href: "#/kooperation" }}
      />
    </main>
  );
}

/* ---- Stub for routes not yet built ---- */
function StubPage({ title, lead, route }) {
  return (
    <main className="page-enter">
      <section className="section stub has-rays">
        <div className="rays" style={{ "--ray-opacity": ".04" }} aria-hidden="true"></div>
        <div className="container">
          <Reveal>
            <div className="box">
              <span className="pill-tag badge">In Vorbereitung</span>
              <h1 style={{ fontSize: "clamp(2.2rem,4.6vw,3.4rem)" }}>{title}</h1>
              <p className="lead" style={{ marginTop: "1rem" }}>{lead}</p>
              <p className="muted" style={{ marginTop: ".4rem" }}>
                Diese Seite folgt nach Freigabe von Start und „Der Lernort“.
              </p>
              <div className="hero-ctas" style={{ justifyContent: "center" }}>
                <a className="btn btn--primary" href="#/">Zur Startseite <Arrow /></a>
                <a className="btn btn--ghost" href="#/lernort">Der Lernort</a>
              </div>
            </div>
          </Reveal>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { LernortPage, StubPage, ValuesOrbit, FarmMap });