// app-v2.jsx — Router shell for v2 (with 4 dedicated service routes)

const TWEAK_DEFAULTS_V2 = window.TWEAK_DEFAULTS || {
  heroVariant: "video",
  imageMode: "placeholder",
  typePair: "classic",
  sectionOrder: "services-first",
  readableScale: true,
  hideCounters: true
};

window.__IMG_MODE = TWEAK_DEFAULTS_V2.imageMode;

// Design-tools panel: hidden on the live domain, available everywhere else
// (local, Vercel previews) and on demand anywhere via ?edit=1
const PROD_HOSTS = ["entdm.dk", "www.entdm.dk"];
const SHOW_TWEAKS =
  new URLSearchParams(location.search).get("edit") === "1" ||
  !PROD_HOSTS.includes(location.hostname);

function AppV2() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS_V2);
  React.useEffect(() => { window.__IMG_MODE = "slot"; }, []);

  const initial = (location.hash || "#home").replace("#", "");
  const [route, _setRoute] = React.useState(initial);
  const setRoute = React.useCallback((r) => {
    _setRoute(r);
    location.hash = r;
    window.scrollTo({ top: 0, behavior: "instant" });
  }, []);
  React.useEffect(() => {
    const onHash = () => {
      const r = (location.hash || "#home").replace("#", "");
      _setRoute(r);
      window.scrollTo({ top: 0, behavior: "instant" });
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  React.useEffect(() => { if (window.applySEO) window.applySEO(route); }, [route]);

  React.useEffect(() => {
    document.documentElement.className = [
      `type-pair-${t.typePair}`,
      t.readableScale && "readable-scale",
      t.hideCounters && "hide-counters"
    ].filter(Boolean).join(" ");
  }, [t.typePair, t.readableScale, t.hideCounters]);

  // Route table — services are 1st-class routes (not query params)
  const isServiceRoute = SERVICES_V2.some(s => s.slug === route);

  let Page = window.PageHome;
  let pageProps = { setRoute };
  if (isServiceRoute) {
    Page = window.PageService;
    pageProps.slug = route;
  } else {
    switch (route) {
      case "losninger":     Page = window.PageLosninger; break;
      case "om-dm":         Page = window.PageOmDM; break;
      case "kontakt":       Page = window.PageKontakt; break;
      case "privatlivspolitik": Page = window.PagePrivatliv; break;
      default:
        Page = window.PageHome;
        pageProps.heroVariant = t.heroVariant;
        pageProps.sectionOrder = t.sectionOrder;
    }
  }

  return (
    <>
      <NavV2 route={route} setRoute={setRoute}/>
      <main key={route}>
        <Page {...pageProps}/>
      </main>
      <FooterV2 setRoute={setRoute}/>

      {SHOW_TWEAKS &&
      <TweaksPanel>
        <TweakSection label="Forside"/>
        <TweakRadio
          label="Hero-variant"
          value={t.heroVariant}
          options={[
            { value: "video", label: "Video" },
            { value: "split", label: "Split" },
            { value: "typo",  label: "Typo" }
          ]}
          onChange={(v) => setTweak('heroVariant', v)}/>
        <TweakSelect
          label="Sektionsrækkefølge"
          value={t.sectionOrder}
          options={[
            { value: "services-first", label: "Services først (standard)" },
            { value: "manifest-first", label: "Manifest først" },
            { value: "projects-first", label: "Projekter først" }
          ]}
          onChange={(v) => setTweak('sectionOrder', v)}/>

        <TweakSection label="Visuelt"/>
        {/* image-mode toggle removed — image areas are always real drop slots so
            uploaded pictures never disappear when toggling other tweaks. */}

        <TweakSection label="Typografi"/>
        <TweakSelect
          label="Type-pairing"
          value={t.typePair}
          options={[
            { value: "classic",   label: "Urbanist + Cormorant" },
            { value: "condensed", label: "Oswald + Cormorant" },
            { value: "mono",      label: "Urbanist + Instrument Serif" }
          ]}
          onChange={(v) => setTweak('typePair', v)}/>

        <TweakSection label="Læsbarhed"/>
        <TweakToggle
          label="Læsbar skala (4 størrelser)"
          value={t.readableScale}
          onChange={(v) => setTweak('readableScale', v)}/>
        <TweakToggle
          label="Skjul dekor-tællere (01 / 04)"
          value={t.hideCounters}
          onChange={(v) => setTweak('hideCounters', v)}/>
      </TweaksPanel>}
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<AppV2/>);