// App shell — hash routing + Tweaks panel

const { useState: useS, useEffect: useE } = React;

function parseHash() {
  const h = window.location.hash.replace(/^#\/?/, "");
  if (!h) return { page: "home" };
  const parts = h.split("/").filter(Boolean);
  if (parts[0] === "essay" && parts[1]) return { page: "essay", slug: parts[1] };
  return { page: parts[0] || "home" };
}

function App() {
  const [route, setRoute] = useS(parseHash());
  const tweakDefaults = /*EDITMODE-BEGIN*/{
    "density": "comfy"
  } /*EDITMODE-END*/;
  const [tweaks, setTweak] = useTweaks(tweakDefaults);

  useE(() => {
    const onHash = () => {
      setRoute(parseHash());
      window.scrollTo({ top: 0, behavior: 'instant' });
    };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  useE(() => {
    if (tweaks.density === "tight") {
      document.documentElement.style.setProperty('--leading', '1.45');
      document.body.style.lineHeight = '1.45';
    } else {
      document.documentElement.style.setProperty('--leading', '1.55');
      document.body.style.lineHeight = '1.55';
    }
  }, [tweaks.density]);

  const navigate = (page, params = {}) => {
    if (page === "home") window.location.hash = "/";else
    if (page === "essay") window.location.hash = `/essay/${params.slug}`;else
    window.location.hash = `/${page}`;
  };

  let body;
  switch (route.page) {
    case "home":body = <Home navigate={navigate} />;break;
    case "essays":body = <Essays navigate={navigate} />;break;
    case "essay":body = <Essay slug={route.slug} navigate={navigate} />;break;
    case "projects":body = <Projects />;break;
    case "now":body = <Now />;break;
    case "experience":body = <Experience />;break;
    case "reading":body = <Reading />;break;
    case "contact":body = <Contact />;break;
    default:body = <Home navigate={navigate} />;
  }

  // The Home page renders its own topbar (no nav). Other routes get the global topbar.
  const showGlobalTop = route.page !== "home";

  return (
    <div className="page" data-screen-label={route.page === "essay" ? `essay/${route.slug}` : route.page} key={route.page + (route.slug || '')}>
      {showGlobalTop && <Topbar route={route} navigate={navigate} />}
      {body}
      <div className="colophon">
        <span>© Oscar Marchand - 2026</span>
        <span>{SITE.domain}</span>
      </div>

      <TweaksPanel>
        <TweakSection label="Reading">
          <TweakRadio
            label="Density"
            value={tweaks.density}
            options={["comfy", "tight"]}
            onChange={(v) => setTweak('density', v)} />
          
        </TweakSection>
      </TweaksPanel>
    </div>);

}

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