const Nav = ({ active, onNav }) => {
  const links = [
    { id: "research", label: "Research" },
    { id: "people", label: "People" },
    { id: "papers", label: "Papers" },
    { id: "projects", label: "Projects" },
    { id: "contact", label: "Contact" },
  ];
  const [mode, setMode] = React.useState(() => document.documentElement.getAttribute("data-mode") || "day");
  const toggleMode = () => {
    const next = mode === "day" ? "night" : "day";
    document.documentElement.setAttribute("data-mode", next);
    setMode(next);
    try { localStorage.setItem("netdb-mode", next); } catch(e){}
  };
  return (
    <nav className="nav" aria-label="Primary">
      <a href="#top" className="nav-brand" onClick={(e)=>{e.preventDefault(); onNav("top");}}>
        <div className="nav-logo">ND</div>
        <div className="nav-brand-text">
          <div className="lab">NetDB Lab</div>
          <div className="sub">NCKU · CSIE</div>
        </div>
      </a>
      <div className="nav-links">
        {links.map(l => (
          <a key={l.id} href={`#${l.id}`}
             className={"nav-link" + (active === l.id ? " active" : "")}
             onClick={(e)=>{e.preventDefault(); onNav(l.id);}}>{l.label}</a>
        ))}
      </div>
      <div className="nav-tools">
        <button className="nav-iconbtn" onClick={toggleMode} aria-label="Toggle day/night">
          <Icon name={mode === "night" ? "sun" : "moon"} size={18}/>
        </button>
      </div>
    </nav>
  );
};
window.Nav = Nav;