/* App shell + routing. */
const { useState: useS, useEffect: useE } = React;

const ACCENTS = {
  "oklch(0.62 0.13 230)": { ink: "oklch(0.45 0.12 235)", soft: "oklch(0.62 0.13 230 / 0.10)" }, // signal blue
  "oklch(0.66 0.115 195)": { ink: "oklch(0.47 0.10 200)", soft: "oklch(0.66 0.115 195 / 0.12)" }, // teal
  "oklch(0.55 0.15 285)": { ink: "oklch(0.47 0.15 285)", soft: "oklch(0.55 0.15 285 / 0.10)" }, // indigo
  "oklch(0.58 0.07 250)": { ink: "oklch(0.44 0.06 250)", soft: "oklch(0.58 0.07 250 / 0.12)" }, // steel
};
const FONTS = {
  Editorial: { display: '"Newsreader", Georgia, serif', sans: '"Libre Franklin", system-ui, sans-serif' },
  Modern:    { display: '"Space Grotesk", system-ui, sans-serif', sans: '"Libre Franklin", system-ui, sans-serif' },
  Classic:   { display: '"Source Serif 4", Georgia, serif', sans: '"IBM Plex Sans", system-ui, sans-serif' },
};
const HOMES = { Editorial: "HomeEditorial", Command: "HomeCommand", Structured: "HomeGrid" };

const SETTINGS = {
  homeStyle: "Command",
  voice: "Blended",
  accent: "oklch(0.62 0.13 230)",
  fontPair: "Classic",
};

function App() {
  const t = SETTINGS;

  // routing
  const [route, setRoute] = useS(() => {
    try { return JSON.parse(localStorage.getItem("rv_route")) || { page: "home", id: null }; }
    catch (e) { return { page: "home", id: null }; }
  });
  const go = (page, id = null) => { const r = { page, id }; setRoute(r); try { localStorage.setItem("rv_route", JSON.stringify(r)); } catch (e) {} };

  // apply tweak vars
  useE(() => {
    const root = document.documentElement.style;
    const acc = ACCENTS[t.accent] || ACCENTS["oklch(0.62 0.13 230)"];
    root.setProperty("--accent", t.accent);
    root.setProperty("--accent-ink", acc.ink);
    root.setProperty("--accent-soft", acc.soft);
    const f = FONTS[t.fontPair] || FONTS.Editorial;
    root.setProperty("--font-display", f.display);
    root.setProperty("--font-sans", f.sans);
  }, [t.accent, t.fontPair]);

  let page;
  const voice = (SITE.voices && SITE.voices[t.voice]) || SITE.voices.Blended;
  window.__voice = voice;
  if (route.page === "about") page = <AboutPage go={go} />;
  else if (route.page === "notes") page = <NotesPage go={go} />;
  else if (route.page === "article") page = <ArticlePage id={route.id} go={go} />;
  else if (route.page === "contact") page = <ContactPage go={go} />;
  else {
    const Home = window[HOMES[t.homeStyle] || "HomeEditorial"];
    page = <Home go={go} v={voice} />;
  }

  return (
    <React.Fragment>
      <Nav route={route.page} go={go} dark={false} tagline={voice.tagline} />
      <main key={route.page + (route.id || "")}>{page}</main>
      <Footer go={go} />
    </React.Fragment>
  );
}

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