// Main App — router, tweaks, scroll restoration, enquire drawer wiring.
const { useState: useStateA, useEffect: useEffectA, useCallback: useCallbackA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#0b3619",
  "displayFont": "Cormorant Garamond",
  "density": "editorial",
  "rekordTheme": "dark"
}/*EDITMODE-END*/;

function App() {
  const [route, setRoute] = useStateA({ page: "home" });
  const [enquire, setEnquire] = useStateA(null);
  const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);

  // Apply tweaks to :root
  useEffectA(() => {
    document.documentElement.style.setProperty("--primary", t.accent);
    document.documentElement.style.setProperty("--focus", t.accent);
    // The mission/dot use primary; rekord-band keeps mint
    const fontMap = {
      "Cormorant Garamond": `"Cormorant Garamond", "Source Serif 4", Georgia, serif`,
      "EB Garamond": `"EB Garamond", "Source Serif 4", Georgia, serif`,
      "Spectral": `"Spectral", "Source Serif 4", Georgia, serif`
    };
    document.documentElement.style.setProperty("--serif", fontMap[t.displayFont] || fontMap["Cormorant Garamond"]);
    document.documentElement.setAttribute("data-density", t.density);
  }, [t.accent, t.displayFont, t.density]);

  const goTo = useCallbackA((next) => {
    setRoute(next);
    window.scrollTo({ top: 0, behavior: "instant" in window ? "instant" : "auto" });
    // Update hash for shareable state (best-effort)
    const hash = next.page === "home" ? "" : next.slug ? `${next.page}/${next.slug}` : next.page;
    history.replaceState(null, "", "#" + hash);
  }, []);

  // Hash sync (load deep links)
  useEffectA(() => {
    const h = window.location.hash.replace(/^#/, "");
    if (!h) return;
    const [page, slug] = h.split("/");
    if (["home","exhibitions","exhibition","artists","artist","viewing-rooms","rekord","about","visit"].includes(page)) {
      setRoute(slug ? { page, slug } : { page });
    }
  }, []);

  const openEnquire = useCallbackA((ctx) => setEnquire(ctx), []);
  const closeEnquire = useCallbackA(() => setEnquire(null), []);

  function renderPage() {
    switch (route.page) {
      case "home": return <window.HomePage goTo={goTo} openEnquire={openEnquire} />;
      case "exhibitions": return <window.ExhibitionsPage goTo={goTo} />;
      case "exhibition": return <window.ExhibitionDetailPage slug={route.slug} goTo={goTo} openEnquire={openEnquire} />;
      case "artists": return <window.ArtistsPage goTo={goTo} />;
      case "artist": return <window.ArtistDetailPage slug={route.slug} goTo={goTo} openEnquire={openEnquire} />;
      case "viewing-rooms": return <window.ViewingRoomsPage goTo={goTo} openEnquire={openEnquire} />;
      case "rekord": return <window.RekordPage goTo={goTo} />;
      case "about": return <window.AboutPage />;
      case "visit": return <window.VisitPage openEnquire={openEnquire} />;
      default: return <window.HomePage goTo={goTo} openEnquire={openEnquire} />;
    }
  }

  const isDarkPage = route.page === "rekord";

  return (
    <div className="app">
      <window.Nav route={route} goTo={goTo} openEnquire={openEnquire} />
      {renderPage()}
      <window.Footer goTo={goTo} />
      <window.EnquireDrawer enquire={enquire} close={closeEnquire} />

      <window.TweaksPanel>
        <window.TweakSection label="Accent" />
        <window.TweakColor
          label="Brand colour"
          value={t.accent}
          options={["#0b3619", "#8a5a2b", "#7a1f1f", "#202939"]}
          onChange={(v) => setTweak("accent", v)}
        />
        <window.TweakSection label="Typography" />
        <window.TweakRadio
          label="Display serif"
          value={t.displayFont}
          options={["Cormorant Garamond", "EB Garamond", "Spectral"]}
          onChange={(v) => setTweak("displayFont", v)}
        />
        <window.TweakSection label="Layout" />
        <window.TweakRadio
          label="Density"
          value={t.density}
          options={["editorial", "compact"]}
          onChange={(v) => setTweak("density", v)}
        />
      </window.TweaksPanel>
    </div>
  );
}

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