function Nav() {
  const [active, setActive] = React.useState("home");
  const links = [
    { id: "about", label: "About" },
    { id: "specializations", label: "Capabilities" },
    { id: "experience", label: "Experience" },
    { id: "stack", label: "Stack" },
    { id: "projects", label: "Projects" },
    { id: "contact", label: "Contact" },
  ];

  React.useEffect(() => {
    const ids = ["home", ...links.map((l) => l.id)];
    const obs = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) setActive(e.target.id);
        });
      },
      { rootMargin: "-40% 0px -55% 0px", threshold: 0 }
    );
    ids.forEach((id) => {
      const el = document.getElementById(id);
      if (el) obs.observe(el);
    });
    return () => obs.disconnect();
  }, []);

  return (
    <nav className="nav" aria-label="Primary">
      <a href="#home" className="nav-brand">
        <span className="dot"></span>
        <span>~/portfolio</span>
      </a>
      {links.map((l) => (
        <a
          key={l.id}
          href={`#${l.id}`}
          className={`nav-link ${active === l.id ? "active" : ""}`}
        >
          {l.label}
        </a>
      ))}
    </nav>
  );
}

function App() {
  React.useEffect(() => {
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            e.target.classList.add("in");
            io.unobserve(e.target);
          }
        });
      },
      { threshold: 0.12, rootMargin: "0px 0px -8% 0px" }
    );

    const scan = () => {
      document.querySelectorAll(".reveal:not(.in)").forEach((el) => {
        if (!el.dataset.revealObserved) {
          el.dataset.revealObserved = "1";
          io.observe(el);
        }
      });
    };

    scan();
    const mo = new MutationObserver(scan);
    mo.observe(document.body, { childList: true, subtree: true });

    return () => {
      io.disconnect();
      mo.disconnect();
    };
  }, []);

  return (
    <React.Fragment>
      <Background />
      <Nav />
      <main>
        <Hero />
        <About />
        <Specializations />
        <Experience />
        <TechStack />
        <Projects />
        <Philosophy />
        <Personal />
        <Contact />
      </main>
      <footer>
        <div>// crafted in vim · deployed under pressure</div>
        <div className="right">
          <span>© 2026</span>
          <span>v2026.05.17</span>
          <span style={{ color: "var(--good)" }}>● online</span>
        </div>
      </footer>
    </React.Fragment>
  );
}

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