/* ============================================================
   3DAX — Top navigation
   ============================================================ */
function Nav({ cartCount, user, onOpenCart, onAccount, onLogin }){
  const [solid, setSolid] = useState(false);
  useEffect(() => {
    const onScroll = () => setSolid(window.scrollY > 40);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive:true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const links = [
    ["Colección", "#coleccion"],
    ["Tienda", "tienda.html"],
    ["La deckbox", "#story"],
    ["360°", "#movimiento"],
    ["Taller", "#proceso"],
    ["Guías", "guias.html"],
  ];

  return (
    <header className={"nav" + (solid ? " nav--solid" : "")}>
      <div className="nav__inner wrap">
        <a href="#top" className="brand" aria-label="3DAX inicio">
          <span className="brand__mark">3<span>D</span>AX</span>
          <span className="brand__sub">deckboxes 3D</span>
        </a>

        <nav className="nav__links">
          {links.map(([label, href]) => (
            <a key={href} href={href} className="nav__link">{label}</a>
          ))}
        </nav>

        <div className="nav__right">
          <a href="tienda.html" className="nav__link nav__shop">Tienda</a>
          {user ? (
            <button className="acct-btn" onClick={onAccount} aria-label="Mi cuenta" title={user.name}>
              <span className="acct-btn__ini">{user.name[0].toUpperCase()}</span>
            </button>
          ) : (
            <button className="nav__link nav__login" onClick={onLogin}>Entrar</button>
          )}
          <button className="cart-btn" onClick={onOpenCart} aria-label="Abrir carrito">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
              <path d="M3 4h2l2.4 12.3a1 1 0 0 0 1 .8h8.7a1 1 0 0 0 1-.78L21 8H6"/>
              <circle cx="9" cy="20" r="1.3" fill="currentColor" stroke="none"/>
              <circle cx="18" cy="20" r="1.3" fill="currentColor" stroke="none"/>
            </svg>
            {cartCount > 0 && <span className="cart-btn__count">{cartCount}</span>}
          </button>
        </div>
      </div>
    </header>
  );
}
window.Nav = Nav;