// Nav.jsx
const Nav = ({ active, onNavigate, currentPage = 'home' }) => {
  const [open, setOpen] = React.useState(false);

  const links = [
    { label: 'Services', id: 'services',  href: null },
    { label: 'Work',     id: 'projects',  href: null },
    { label: 'Team',     id: 'team',      href: null },
    { label: 'Blog',     id: 'blog',      href: 'blog.html' },
    { label: 'Contact',  id: 'contact',   href: null },
  ];

  const handleClick = (l, e) => {
    if (l.href) { setOpen(false); return; } // let browser follow the href
    e.preventDefault();
    onNavigate && onNavigate(l.id);
    setOpen(false);
  };

  return (
    <nav className="nav">
      <div className="nav-inner">
        <a className="nav-logo" href="#home" onClick={(e) => { e.preventDefault(); onNavigate('home'); }}>
          <img src="assets/logo-stacked.png" alt="Devnity Co" />
          <span>DEVNITY</span>
        </a>

        <ul className={`nav-links${open ? ' open' : ''}`}>
          {links.map(l => (
            <li key={l.id}>
              <a
                className={(active === l.id || currentPage === l.id) ? 'active' : ''}
                href={l.href || `#${l.id}`}
                onClick={(e) => handleClick(l, e)}
              >
                {l.label}
              </a>
            </li>
          ))}
        </ul>

        <div className="nav-cta">
          <Button variant="primary" size="sm" iconRight="arrow-right" onClick={(e) => { e.preventDefault(); onNavigate('contact'); }}>
            Start a project
          </Button>
        </div>

        <button className="nav-toggle" onClick={() => setOpen(o => !o)} aria-label="Menu">
          <Icon name="menu" size={20} />
        </button>
      </div>
    </nav>
  );
};
window.Nav = Nav;