const DSA = window.LakshayKumarDesignSystem_3ad00d;
const { NavBar } = DSA;

const NAV = [
  { id: "about", label: "About", href: "#about" },
  { id: "services", label: "Services", href: "#services" },
  { id: "work", label: "Work", href: "#work" },
  { id: "content", label: "Content", href: "#content" },
  { id: "skills", label: "Skills", href: "#skills" },
  { id: "journey", label: "Journey", href: "#journey" },
  { id: "blog", label: "Writing", href: "#blog" }
];

function ScrollProgress() {
  const [p, setP] = React.useState(0);
  React.useEffect(() => {
    const on = () => {
      const h = document.documentElement.scrollHeight - window.innerHeight;
      setP(h > 0 ? window.scrollY / h : 0);
    };
    on();
    window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, []);
  return <div aria-hidden="true" style={{ position: "fixed", top: 0, left: 0, height: 2, width: `${p * 100}%`, background: "var(--accent)", zIndex: 60, transition: "width .1s linear" }}></div>;
}

function App() {
  const [active, setActive] = React.useState("about");
  React.useEffect(() => {
    const ids = NAV.map((n) => n.id);
    const io = new IntersectionObserver((es) => {
      es.forEach((e) => { if (e.isIntersecting) setActive(e.target.id); });
    }, { rootMargin: "-45% 0px -50% 0px" });
    ids.forEach((id) => { const el = document.getElementById(id); if (el) io.observe(el); });
    return () => io.disconnect();
  }, []);
  const go = (id) => {
    if (id === "home") { window.scrollTo({ top: 0, behavior: "smooth" }); return; }
    const el = document.getElementById(id);
    if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 62, behavior: "smooth" });
  };
  return (
    <React.Fragment>
      <ScrollProgress />
      <CursorGlow />
      <NavBar name="Lakshay Kumar" links={NAV} active={active} onNavigate={go} cta={{ label: "Say hi", onClick: () => go("contact") }} />
      <main>
        <Hero />
        <Marquee />
        <About />
        <Services />
        <Projects />
        <Creator />
        <Skills />
        <Journey />
        <Learning />
        <Blog />
        <Contact />
      </main>
      <Footer />
    </React.Fragment>
  );
}

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