// App entry — router + tweaks
const { useState: aUseState, useEffect: aUseEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#6B2D2C",
  "gold": "#B08D57",
  "bg": "#F8F4ED",
  "displayFont": "Cormorant Garamond",
  "showUtility": true,
  "framedHero": true
}/*EDITMODE-END*/;

function App() {
  const route = useRoute();
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply tweaks live
  aUseEffect(() => {
    const r = document.documentElement;
    r.style.setProperty("--wine", t.accent);
    r.style.setProperty("--wine-dark", shade(t.accent, -0.25));
    r.style.setProperty("--gold", t.gold);
    r.style.setProperty("--bg", t.bg);
    r.style.setProperty("--display", `"${t.displayFont}", "EB Garamond", Georgia, serif`);
  }, [t.accent, t.gold, t.bg, t.displayFont]);

  let page;
  if (route === "/") page = <Home />;
  else if (route === "/gallery") page = <Gallery />;
  else if (route.startsWith("/gallery/artists/")) {
    const slug = route.split("/").pop();
    page = <ArtistDetail slug={slug} />;
  }
  else if (route === "/framing") page = <Framing />;
  else if (route === "/framing/inspiration") page = <FramingInspiration />;
  else if (route === "/events") page = <Events />;
  else if (route === "/about") page = <About />;
  else if (route === "/visit") page = <Visit />;
  else page = <Home />;

  return (
    <>
      {t.showUtility ? null : <style>{`.utility-bar{display:none}`}</style>}
      <Navbar />
      {page}
      <Footer />
      <TweaksPanel title="Tweaks" defaultPosition="bottom-right">
        <TweakSection label="Brand">
          <TweakColor label="Accent (wine)" value={t.accent} onChange={(v) => setTweak("accent", v)} options={["#6B2D2C", "#1F3A5F", "#2D3F2E", "#3A2A1E", "#0F0F0F"]} />
          <TweakColor label="Gold" value={t.gold} onChange={(v) => setTweak("gold", v)} options={["#B08D57", "#C9A86B", "#8A7547", "#A98F70"]} />
          <TweakColor label="Background" value={t.bg} onChange={(v) => setTweak("bg", v)} options={["#F8F4ED", "#FFFFFF", "#F0EBE0", "#EAE2D2"]} />
        </TweakSection>
        <TweakSection label="Type">
          <TweakRadio label="Display family" value={t.displayFont} onChange={(v) => setTweak("displayFont", v)} options={[
            { value: "Cormorant Garamond", label: "Cormorant" },
            { value: "Fraunces", label: "Fraunces" },
            { value: "Playfair Display", label: "Playfair" },
          ]} />
        </TweakSection>
        <TweakSection label="Layout">
          <TweakToggle label="Show utility bar" value={t.showUtility} onChange={(v) => setTweak("showUtility", v)} />
          <TweakToggle label="Framed hero artwork" value={t.framedHero} onChange={(v) => setTweak("framedHero", v)} />
        </TweakSection>
        <TweakSection label="Jump to page">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6 }}>
            {[
              { to: "/", label: "Home" },
              { to: "/gallery", label: "Gallery" },
              { to: "/gallery/artists/kay-wyne", label: "Artist" },
              { to: "/framing", label: "Framing" },
              { to: "/framing/inspiration", label: "Inspiration" },
              { to: "/events", label: "Events" },
              { to: "/about", label: "About" },
              { to: "/visit", label: "Visit" },
            ].map(p => (
              <button key={p.to} onClick={() => navigate(p.to)} style={{ padding: "8px 10px", fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", border: "1px solid #d8d2c4", background: route === p.to || (p.to !== "/" && route.startsWith(p.to)) ? "#1A1612" : "transparent", color: route === p.to || (p.to !== "/" && route.startsWith(p.to)) ? "#f6efde" : "#1A1612", cursor: "pointer", fontFamily: "Inter" }}>{p.label}</button>
            ))}
          </div>
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

// Shade helper for accent dark
function shade(hex, amt) {
  const c = hex.replace("#", "");
  const r = parseInt(c.slice(0, 2), 16);
  const g = parseInt(c.slice(2, 4), 16);
  const b = parseInt(c.slice(4, 6), 16);
  const adj = (v) => Math.max(0, Math.min(255, Math.round(v + v * amt)));
  return "#" + [adj(r), adj(g), adj(b)].map(v => v.toString(16).padStart(2, "0")).join("");
}

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