/* Nav.jsx — top navigation (dark, solid, sharp) */
const { useState: useNavState } = React;

function Nav({ active, onNav, onResume }) {
  const links = [
    { id: "work", label: "Work" },
    { id: "code", label: "Code" },
    { id: "photography", label: "Photography" },
    { id: "reflections", label: "Reflections" },
    { id: "about", label: "About" },
  ];
  return (
    <nav className="site-nav" style={{ position: "sticky", top: 0, zIndex: 50, background: "var(--bg)", borderBottom: "1px solid var(--border)" }}>
      <div className="nav-shell" style={{ maxWidth: "var(--maxw)", margin: "0 auto", padding: "0 24px", height: 64, display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <a className="nav-brand" onClick={() => onNav("top")} style={{ fontFamily: "var(--font-mono)", fontWeight: 500, fontSize: 14, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--fg)", cursor: "pointer" }}>
          Neel Satyavolu
        </a>
        <div className="nav-links" style={{ display: "flex", gap: 30, alignItems: "center" }}>
          {links.map((l) => <NavLink key={l.id} label={l.label} active={active === l.id} onClick={() => onNav(l.id)} />)}
          <Button variant="primary" icon="download" onClick={onResume} style={{ padding: "10px 16px", fontSize: 12.5 }}>Resume</Button>
        </div>
      </div>
    </nav>
  );
}

function NavLink({ label, active, onClick }) {
  const [h, setH] = useNavState(false);
  return (
    <a onClick={onClick} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ fontFamily: "var(--font-sans)", fontWeight: 400, fontSize: 14, cursor: "pointer", color: active ? "var(--fg)" : h ? "var(--fg)" : "var(--fg-3)", position: "relative", paddingBottom: 4, transition: "color var(--dur) var(--ease)" }}>
      {label}
      <span style={{ position: "absolute", left: 0, bottom: 0, height: 1, background: "var(--blue)", width: active ? "100%" : 0, transition: "width var(--dur) var(--ease)" }} />
    </a>
  );
}

Object.assign(window, { Nav });