// App shell: hash routing, theme, layout state.
const { useState: useStateA, useEffect: useEffectA } = React;

function parseRoute() {
  const h = window.location.hash || '#/';
  if (h.startsWith('#/p/')) return { name: 'project', id: decodeURIComponent(h.slice(4)) };
  if (h === '#/gear' || h.startsWith('#/gear')) return { name: 'gear' };
  return { name: 'home' };
}

function App() {
  const [theme, toggleTheme] = useTheme();
  const [route, setRoute] = useStateA(parseRoute());
  // Site-wide config (gallery layout, density, cover treatment, landing layout).
  // Defaults come from window.STUDIOS_TWEAKS in studios.html.
  const [t, setT] = useStateA(window.STUDIOS_TWEAKS);
  const setTweak = (k, v) => setT((prev) => ({ ...prev, [k]: v }));

  useEffectA(() => {
    const onHash = () => setRoute(parseRoute());
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  useEffectA(() => {
    document.documentElement.setAttribute('data-density', t.density);
  }, [t.density]);

  const openProject = (id) => { window.location.hash = `#/p/${id}`; };
  const goHome = (e) => { if (e) e.preventDefault(); window.location.hash = '#/'; };

  return (
    <>
      <SiteHeader theme={theme} toggleTheme={toggleTheme} route={route} />
      {route.name === 'project'
        ? <Lookbook projectId={route.id} tweaks={t} onBack={goHome} />
        : route.name === 'gear'
          ? <Gear />
          : <Landing tweaks={t} onOpenProject={openProject} setTweak={setTweak} />
      }
      <SiteFooter />
    </>
  );
}

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