// ── APP ────────────────────────────────────────────────────────────────

const { useState: appUseState, useEffect: appUseEffect } = React;

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [page, setPage] = appUseState('home');
  const [menuOpen, setMenuOpen] = appUseState(false);

  // Theme class on body
  appUseEffect(() => {
    document.body.classList.remove('theme-dark', 'theme-light', 'theme-acid');
    document.body.classList.add(`theme-${tweaks.theme}`);
  }, [tweaks.theme]);

  // Texture CSS vars
  appUseEffect(() => {
    document.documentElement.style.setProperty('--grain-opacity', (tweaks.grain / 100).toString());
    document.documentElement.style.setProperty('--halftone-opacity', (tweaks.halftone / 100).toString());
  }, [tweaks.grain, tweaks.halftone]);

  // Scroll to top on page change
  appUseEffect(() => {
    window.scrollTo({ top: 0, behavior: 'auto' });
  }, [page]);

  const navigate = (p) => { setPage(p); };

  const currentLabel =
    page === 'home' ? '00 // home' :
    page === 'events' ? '02 // shows' :
    '03 // contact';

  const marqueeItems = [
    'shi o kiku // kazan · bar kool · 20.06.26',
    'submit a demo — demo@shiokiku.ru',
    'booking — book@shiokiku.ru',
    '死を聞く // internet label · krd',
  ];

  return (
    <React.Fragment>
      <div className="page-stage">
        {page === 'home' && <HomePage setPage={navigate} key="home" />}
        {page === 'events' && <EventsPage key="ev" />}
        {page === 'contact' && <ContactPage key="ct" />}
      </div>

      {page !== 'home' && <Marquee items={marqueeItems} position="top" />}
      {page === 'home' && <Marquee items={marqueeItems} position="bottom" />}

      <EdgeChrome
        page={page}
        setPage={navigate}
        openMenu={() => setMenuOpen(true)}
        currentLabel={currentLabel}
      />

      <MenuOverlay
        open={menuOpen}
        onClose={() => setMenuOpen(false)}
        page={page}
        setPage={navigate}
      />

      <Cursor enabled={!!tweaks.cursor} />

      <SOKTweaks tweaks={tweaks} setTweak={setTweak} />
    </React.Fragment>
  );
}

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