// Top nav with theme toggle, logo mark, and section links

const Nav = ({ theme, setTheme, openPalette }) => {
  const toggle = () => setTheme(theme === "dark" ? "light" : "dark");
  return (
    <nav className="nav" aria-label="Primary">
      <a href="#top" className="nav-brand" aria-label="Home">
        <span className="brand-mark">N</span>
        <span>noah</span>
      </a>
      <div className="nav-links">
        <a href="#about" className="nav-link">About</a>
        <a href="#experience" className="nav-link">Experience</a>
        <a href="#skills" className="nav-link">Skills</a>
        <a href="#contact" className="nav-link contact-link">Contact</a>
        <button
          className="theme-toggle"
          onClick={openPalette}
          aria-label="Open command palette"
          title="Press / to search"
          style={{ marginLeft: 4 }}
        >
          <Icon name="search" />
        </button>
        <button
          className="theme-toggle"
          onClick={toggle}
          aria-label={`Switch to ${theme === "dark" ? "light" : "dark"} theme`}
        >
          <Icon name={theme === "dark" ? "sun" : "moon"} />
        </button>
      </div>
    </nav>
  );
};

window.Nav = Nav;