/* 99 Frames — app shell & router */
const { useState: useS, useEffect: useE } = React;

function App() {
  const [page, setPage] = useS(() => location.hash.replace('#', '') || 'home');

  const go = (p) => {
    setPage(p);
    history.replaceState(null, '', '#' + p);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  useE(() => {
    const onHash = () => setPage(location.hash.replace('#', '') || 'home');
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  const Page = { home: Home, about: About, event: Event, submit: Submit, apply: Application, gallery: Gallery }[page] || Home;

  // Design locked to the approved look: stretched-blob sticker buttons, cream page.
  const rootCls = 'app-root shape-blob border-sticker bg-cream' + (page === 'home' ? ' home' : '');

  return (
    <div className={rootCls}>
      <Nav page={page} go={go} />
      <main>
        <div className="shell">
          <Page go={go} />
        </div>
      </main>
      <Footer go={go} />
    </div>
  );
}

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