const Nav = ({ cartCount, route, navigate, user, onLogin, onAccount, openCart, onSearch }) => (
  <header className="ib-nav">
    <a href="/" onClick={(e) => { e.preventDefault(); navigate('home'); }} className="ib-nav-logo" aria-label="itsbroken.ai">
      <img src="assets/images/taribai-logo.png" alt="" width="36" height="36" />
    </a>

    <nav className="ib-nav-menu" aria-label="Primary">
      <ul className="nav">
        <li><a href="https://forge.itsbroken.ai/">F.O.R.G.E.</a></li>
        <li><a href="/cheatsheet" onClick={(e) => { e.preventDefault(); navigate('cheatsheet'); }}>AI Security Cheat Sheet</a></li>
        <li><a href="/shop" onClick={(e) => { e.preventDefault(); navigate('shop'); }} style={{ color: route === 'shop' ? 'var(--amber)' : undefined }}>Store</a></li>
        <li><a href="/about" onClick={(e) => { e.preventDefault(); navigate('about'); }}>About</a></li>
      </ul>
    </nav>

    <div className="ib-nav-actions">
      <button className="ib-search-btn" onClick={onSearch} aria-label="Search">
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.6"><circle cx="7" cy="7" r="5"/><path d="m11 11 4 4"/></svg>
        <span>$ search</span>
      </button>
      <span className="ib-nav-signin" onClick={() => user ? onAccount() : onLogin()}>
        {user ? user.handle : 'Sign in'}
      </span>
      <button className="ib-nav-subscribe-btn" onClick={() => {
        var el = document.querySelector('.ib-cta');
        if (el) el.scrollIntoView({ behavior: 'smooth' });
        else navigate('blog');
      }}>Subscribe</button>
    </div>
  </header>
);

window.Nav = Nav;