// Top navigation
const Nav = () => {
  const scrolled = window.useScrolled(20);
  const [theme, toggleTheme] = window.useTheme();
  const [open, setOpen] = React.useState(false);
  const data = window.PORTFOLIO_DATA;

  return (
    <nav className={`nav ${scrolled ? "scrolled" : ""}`}>
      <div className="container">
        <div className="nav-inner">
          <a href="#top" className="nav-logo" onClick={() => setOpen(false)}>
            <span className="nav-logo-bracket">{"<"}</span>
            <span>eren</span>
            <span className="nav-logo-bracket">/</span>
            <span>guler</span>
            <span className="nav-logo-bracket">{">"}</span>
          </a>

          <ul className={`nav-links ${open ? "open" : ""}`}>
            {data.navItems.map((item) => (
              <li key={item.label}>
                <a href={item.href} onClick={() => setOpen(false)}>
                  <span className="num">{item.num}.</span>
                  {item.label}
                </a>
              </li>
            ))}
          </ul>

          <div className="nav-actions">
            <button
              className="theme-toggle"
              onClick={toggleTheme}
              aria-label="Toggle theme"
              title={theme === "dark" ? "Switch to light" : "Switch to dark"}
            >
              <window.Icon name={theme === "dark" ? "sun" : "moon"} size={16} />
            </button>
            <button
              className="nav-mobile-toggle"
              onClick={() => setOpen(!open)}
              aria-label="Menu"
            >
              <window.Icon name={open ? "close" : "menu"} size={18} />
            </button>
          </div>
        </div>
      </div>
    </nav>
  );
};

window.Nav = Nav;