// App entry

const { useState: useStateApp, useEffect: useEffectApp } = React;

function App() {
  const [active, setActive] = useStateApp('intro');
  const [project, setProject] = useStateApp(null);

  useEffectApp(() => {
    const sections = ['intro', 'about', 'experience', 'education', 'skills', 'portfolio'];
    const onScroll = () => {
      // find the section closest to viewport top (with small offset)
      let best = { id: 'intro', delta: -Infinity };
      const y = 120;
      for (const id of sections) {
        const el = document.getElementById(id);
        if (!el) continue;
        const top = el.getBoundingClientRect().top;
        if (top <= y && top > best.delta) {
          best = { id, delta: top };
        }
      }
      setActive(best.id);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const nav = (id) => {
    const el = document.getElementById(id);
    if (!el) return;
    const top = el.getBoundingClientRect().top + window.scrollY - 20;
    window.scrollTo({ top, behavior: 'smooth' });
  };

  return (
    <>
      <div className="page">
        <Sidebar active={active} onNav={nav} />
        <main className="main">
          <Hero />
          <About />
          <Experience />
          <Education />
          <Skills />
          <Portfolio onOpen={setProject} />
        </main>
      </div>
      <Modal project={project} onClose={() => setProject(null)} />
      <PrintBtn />
      <Chat />
      <Tweaks />
    </>
  );
}

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