/* App shell: hash router + Tweaks. Mounts everything. */
const { useState: uS, useEffect: uE } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "split",
  "handwriting": true,
  "baseSize": 17
}/*EDITMODE-END*/;

const ROUTES = {
  "/":            { id: "start" },
  "/lernort":     { id: "lernort" },
  "/film":        { id: "start", scrollTo: "film" },
  "/familien":    { id: "familien" },
  "/kooperation": { id: "kooperation" },
  "/team":        { id: "team" },
  "/aktuelles":   { id: "aktuelles" },
  "/artikel":     { id: "artikel" },
  "/kontakt":     { id: "kontakt" },
  "/impressum":   { id: "impressum" },
  "/datenschutz": { id: "datenschutz" },
};

function parseHash() {
  let h = (location.hash || "#/").replace(/^#/, "");
  if (!h.startsWith("/")) h = "/" + h;
  return ROUTES[h] ? h : "/";
}

function scrollToId(id) {
  const el = document.getElementById(id);
  if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 70, behavior: "smooth" });
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [path, setPath] = uS(parseHash());

  uE(() => {
    const onHash = () => {
      const raw = (location.hash || "#/").replace(/^#/, "");
      const candidate = raw.startsWith("/") ? raw : "/" + raw;
      if (ROUTES[candidate]) { setPath(candidate); return; }
      // in-page anchor on the current page → scroll, keep route
      if (raw && document.getElementById(raw)) { scrollToId(raw); return; }
      setPath("/");
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  const route = ROUTES[path];

  uE(() => {
    if (route.scrollTo) {
      const el = document.getElementById(route.scrollTo);
      if (el) { window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 70, behavior: "smooth" }); return; }
    }
    window.scrollTo({ top: 0, behavior: "auto" });
  }, [path]);

  uE(() => {
    document.documentElement.classList.toggle("no-script", !t.handwriting);
    document.documentElement.style.setProperty("--base-size", (t.baseSize || 17) + "px");
  }, [t.handwriting, t.baseSize]);

  let page;
  if (route.id === "start") page = <StartPage heroVariant={t.heroVariant} />;
  else if (route.id === "lernort") page = <LernortPage />;
  else if (route.id === "familien") page = <FamilienPage />;
  else if (route.id === "kooperation") page = <KooperationPage />;
  else if (route.id === "team") page = <TeamPage />;
  else if (route.id === "aktuelles") page = <AktuellesPage />;
  else if (route.id === "artikel") page = <ArtikelPage />;
  else if (route.id === "kontakt") page = <KontaktPage />;
  else if (route.id === "impressum") page = <ImpressumPage />;
  else if (route.id === "datenschutz") page = <DatenschutzPage />;
  else page = <StubPage title="In Vorbereitung" lead="Diese Seite folgt in Kürze." />;

  return (
    <>
      <Header route={route.id} />
      {page}
      <Footer />
      <TweaksPanel title="Tweaks">
        <TweakSection label="Startseite-Hero" />
        <TweakRadio label="Variante" value={t.heroVariant}
          options={[{ value: "split", label: "Split" }, { value: "center", label: "Zentriert" }, { value: "editorial", label: "Editorial" }]}
          onChange={(v) => setTweak("heroVariant", v)} />
        <TweakSection label="Typografie" />
        <TweakToggle label="Handschrift-Akzente" value={t.handwriting} onChange={(v) => setTweak("handwriting", v)} />
        <TweakSlider label="Textgröße" value={t.baseSize} min={16} max={19} step={1} unit="px" onChange={(v) => setTweak("baseSize", v)} />
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);