// Navbar — editorial, light-weight, fixed top
// Auto theme switches based on section under navbar: sections marked
// data-nav-theme="dark" flip the nav to white-on-navy.

const NavLinkCrayon = ({ label, href, theme }) => {
  const [hover, setHover] = React.useState(false);
  const color = theme === "dark" ? "#FDFCF8" : "var(--ocean-500)";
  return (
    <a href={href}
       onMouseEnter={()=>setHover(true)}
       onMouseLeave={()=>setHover(false)}
       style={{ position: "relative", display: "inline-block",
                color, fontSize: 15, fontWeight: 600,
                textDecoration: "none",
                whiteSpace: "nowrap", padding: "6px 2px",
                fontFamily: "var(--font-body)",
                letterSpacing: "-0.005em", lineHeight: 1,
                opacity: hover ? 1 : (theme === "dark" ? 0.82 : 0.82),
                transition: "color 260ms var(--ease-out), opacity 180ms var(--ease-out)" }}>
      {label}
      <span aria-hidden style={{
        position: "absolute", left: 2, right: 2, bottom: 0,
        height: 2, background: color,
        transformOrigin: "left center",
        transform: `scaleX(${hover ? 1 : 0})`,
        transition: "transform 240ms cubic-bezier(.45,.1,.3,1), background 260ms var(--ease-out)",
      }}/>
    </a>
  );
};

const useNavTheme = () => {
  const [theme, setTheme] = React.useState("light");
  React.useEffect(() => {
    const read = () => {
      // Sample just below the navbar's bottom edge (nav is 76px tall).
      const x = Math.round(window.innerWidth / 2);
      const y = 88;
      const el = document.elementFromPoint(x, y);
      if (!el) return;
      let n = el;
      while (n && n !== document.body) {
        const t = n.getAttribute && n.getAttribute("data-nav-theme");
        if (t === "dark" || t === "light") { setTheme(t); return; }
        n = n.parentElement;
      }
      setTheme("light");
    };
    read();
    let raf = 0;
    const onScroll = () => {
      if (raf) return;
      raf = requestAnimationFrame(() => { raf = 0; read(); });
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll);
    return () => {
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", onScroll);
    };
  }, []);
  return theme;
};

const Navbar = () => {
  const [scrolled, setScrolled] = React.useState(false);
  const theme = useNavTheme();
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const links = [
    { label: "For Students",     href: "students.html" },
    { label: "For Institutions", href: "institutions.html" },
    { label: "UniEngine",        href: "ai-engine.html" },
    { label: "About",            href: "about.html" },
  ];

  const darkMode = theme === "dark";
  const bg = darkMode
    ? (scrolled ? "rgba(12,28,53,0.85)" : "rgba(12,28,53,0.6)")
    : (scrolled ? "rgba(254,253,251,0.82)" : "transparent");
  const border = darkMode
    ? "1px solid rgba(253,252,248,0.08)"
    : (scrolled ? "1px solid var(--border)" : "1px solid transparent");

  return (
    <nav style={{
      position: "fixed", top: 0, left: 0, right: 0, zIndex: 100,
      background: bg,
      backdropFilter: (darkMode || scrolled) ? "blur(14px) saturate(1.4)" : "none",
      borderBottom: border,
      transition: "background 300ms var(--ease-out), border-color 300ms var(--ease-out)",
    }}>
      <div style={{
        maxWidth: 1360, margin: "0 auto", padding: "0 40px",
        display: "flex", alignItems: "center", justifyContent: "space-between",
        height: 76,
      }}>
        <a href="#" style={{ display: "flex", alignItems: "center", textDecoration: "none" }}>
          <Logo variant={darkMode ? "dark" : "light"} height={52}/>
        </a>
        <div style={{ display: "flex", alignItems: "center", gap: 36 }}>
          {links.map(l => <NavLinkCrayon key={l.href} {...l} theme={theme}/>)}
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
          <Button variant="primary" size="md" href="#waitlist" iconEnd={<ArrowRight size={16}/>}>
            Join the Waitlist
          </Button>
        </div>
      </div>
    </nav>
  );
};
window.Navbar = Navbar;