/* Celestia Pictures — main app */

const { useState: useStt, useEffect: useEft, useMemo: useMm } = React;

function App() {
  const sectionIds = useMm(() => [
    'home', 'studio', 'services', 'work', 'vision', 'team', 'partners', 'investors', 'careers', 'contact',
  ], []);
  const { scrolled, active } = useNav(sectionIds);
  const [drawer, setDrawer] = useStt(false);
  useReveal();

  const onNav = (id) => {
    setDrawer(false);
    scrollToSection(id);
  };

  return (
    <>
      <div className="grain" />
      <Nav scrolled={scrolled} active={active} onNav={onNav} onOpenDrawer={() => setDrawer(true)} />
      <Drawer open={drawer} onClose={() => setDrawer(false)} onNav={onNav} />

      <main>
        <Hero onNav={onNav} />
        <Marquee />
        <Studio />
        <Services />
        <Work />
        <Vision />
        <Team />
        <Partners />
        <Investors />
        <Careers />
        <Contact />
      </main>
      <Footer />
    </>
  );
}

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