/* NeuralVault — Nav.jsx
   Sticky nav with brand, active-section tabs, theme toggle, Sign In + Connect. */

const { useState, useEffect } = React;

function useActiveSection(ids) {
  const [active, setActive] = useState(ids[0]);
  useEffect(() => {
    const elements = ids.map((id) => document.getElementById(id)).filter(Boolean);
    if (!elements.length) return;
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((en) => {
          if (en.isIntersecting) setActive(en.target.id);
        });
      },
      { rootMargin: "-40% 0px -55% 0px" }
    );
    elements.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, [ids]);
  return active;
}

function Nav() {
  const ids = NAV_ITEMS.map((n) => n.id);
  const active = useActiveSection(ids);

  return (
    <nav className="nav">
      <div className="wrap nav-inner">
        <Brand withDot href="#" />

        <div className="nav-links" role="tablist">
          {NAV_ITEMS.map((item) => (
            <a
              key={item.id}
              className={`nav-link ${active === item.id ? "active" : ""}`}
              href={`#${item.id}`}
              role="tab"
              aria-selected={active === item.id}
            >
              {item.label}
            </a>
          ))}
        </div>

        <div className="nav-right">
          <ThemeToggle />
          <Button variant="primary" arrow href="#portal">
            Get in touch
          </Button>
        </div>
      </div>
    </nav>
  );
}

Object.assign(window, { Nav, useActiveSection });