// ui_kits/site/App.jsx — top-level orchestrator.
const App = () => {
  const [mode, setModeRaw] = React.useState(() => document.documentElement.getAttribute('data-mode') || 'lava');
  const [route, setRouteRaw] = React.useState(() => location.hash.replace(/^#/, '') || '/');

  const setMode = React.useCallback((m) => {
    setModeRaw(m);
    document.documentElement.setAttribute('data-mode', m);
  }, []);

  const setRoute = React.useCallback((next) => {
    if (next === route) return;
    if (document.startViewTransition) {
      document.startViewTransition(() => {
        setRouteRaw(next);
        location.hash = next;
      });
    } else {
      setRouteRaw(next);
      location.hash = next;
    }
  }, [route]);

  React.useEffect(() => {
    const onHash = () => setRouteRaw(location.hash.replace(/^#/, '') || '/');
    addEventListener('hashchange', onHash);
    return () => removeEventListener('hashchange', onHash);
  }, []);

  const isHome = route === '/' || route === '';
  // For this kit, only the home route is built out. Every other route falls to 404
  // (intentional — the landing's three doors lead to "coming soon" 404s with custom copy).

  return (
    <div className="page">
      <Cursor />
      <CommandPalette setRoute={setRoute} setMode={setMode} />
      {!isHome && <Nav route={route} setRoute={setRoute} mode={mode} setMode={setMode} />}
      <main>
        {isHome
          ? <Landing setRoute={setRoute} mode={mode} />
          : <NotFound setRoute={setRoute} route={route} />}
      </main>
    </div>
  );
};

window.App = App;