/* Main App — Sevil Dolmacı Gallery prototype */
const { useEffect: aUseEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#8A6A4B",
  "type": "cormorant-hanken",
  "density": "default",
  "showTopBar": true
}/*EDITMODE-END*/;

function App() {
  const { route, sub } = useHashRoute();
  const [tw, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // apply tweaks to body
  aUseEffect(() => {
    document.body.dataset.type = tw.type;
    document.body.dataset.density = tw.density;
    document.body.style.setProperty("--accent", tw.accent);
    document.body.style.setProperty("--focus", tw.accent);
  }, [tw]);

  let page;
  if (route === "home" || route === "") page = <HomePage />;
  else if (route === "exhibitions" && !sub) page = <ExhibitionsPage />;
  else if (route === "exhibitions" && sub) page = <ExhibitionDetailPage slug={sub} />;
  else if (route === "artists" && !sub) page = <ArtistsPage />;
  else if (route === "artists" && sub) page = <ArtistDetailPage slug={sub} />;
  else if (route === "publications") page = <PublicationsPage />;
  else if (route === "fairs") page = <FairsPage />;
  else if (route === "press") page = <PressPage />;
  else if (route === "about") page = <AboutPage />;
  else if (route === "contact") page = <ContactPage />;
  else page = <HomePage />;

  return (
    <>
      {tw.showTopBar && <TopBar />}
      <Nav route={route} />
      <main key={route + (sub || "")}>{page}</main>
      <Footer />

      <TweaksPanel title="Tweaks · Sevil Dolmacı">
        <TweakSection label="Theme">
          <TweakColor
            label="Editorial accent"
            value={tw.accent}
            options={["#8A6A4B", "#294056", "#7B3640", "#5C6A45", "#A86A2C"]}
            onChange={v => setTweak("accent", v)}
          />
          <TweakSelect
            label="Type pair"
            value={tw.type}
            options={[
              { value: "cormorant-hanken", label: "Cormorant + Hanken (default)" },
              { value: "eb-jakarta", label: "EB Garamond + Plus Jakarta" },
              { value: "canela-soehne", label: "Cormorant + Manrope" },
            ]}
            onChange={v => setTweak("type", v)}
          />
          <TweakRadio
            label="Density"
            value={tw.density}
            options={[
              { value: "tight", label: "Tight" },
              { value: "default", label: "Reg" },
              { value: "loose", label: "Loose" },
            ]}
            onChange={v => setTweak("density", v)}
          />
        </TweakSection>
        <TweakSection label="Chrome">
          <TweakToggle
            label="Top utility bar"
            value={tw.showTopBar}
            onChange={v => setTweak("showTopBar", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

// Load auxiliary fonts so the type tweak can swap without flash
(function loadAuxFonts() {
  const link = document.createElement("link");
  link.rel = "stylesheet";
  link.href = "https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Plus+Jakarta+Sans:wght@300;400;500;600&family=Manrope:wght@300;400;500;600&display=swap";
  document.head.appendChild(link);
})();

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