// Top navigation — sticky, glass, logo left + links centre + actions right.
function Nav({ cartCount = 0, onCart, onNav }) {
  const { IconButton } = window.ShoyuzukeDesignSystem_1a4266;
  const Icon = window.Icon;
  const links = [
    { id: 'products', label: 'Products' },
    { id: 'ingredients', label: 'Ingredients' },
    { id: 'reviews', label: 'Reviews' },
    { id: 'how', label: 'How it Works' },
  ];
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'rgba(14,7,4,0.72)', backdropFilter: 'blur(var(--blur-nav))',
      WebkitBackdropFilter: 'blur(var(--blur-nav))', borderBottom: '1px solid var(--border)',
    }}>
      <div style={{ position: 'relative', display: 'flex', alignItems: 'center', height: 84, paddingInline: '28px' }}>

        {/* LEFT — logo */}
        <a href="#top" onClick={(e) => { e.preventDefault(); onNav && onNav('top'); }}
          style={{ display: 'flex', alignItems: 'center', flexShrink: 0 }}>
          <img src="assets/logo-white.png" alt="Shoyuzuke" style={{ height: 58, width: 'auto' }} />
        </a>

        {/* CENTER — nav links */}
        <nav style={{ display: 'flex', gap: 4, position: 'absolute', left: '50%', transform: 'translateX(-50%)' }} className="sz-navlinks">
          {links.map((l) => (
            <button key={l.id} onClick={() => onNav && onNav(l.id)} style={{
              background: 'none', border: 'none', cursor: 'pointer', padding: '8px 14px',
              fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 14.5, color: 'var(--text-muted)',
              borderRadius: 'var(--radius-pill)', transition: 'color var(--dur-fast) var(--ease-out)',
            }}
              onMouseEnter={(e) => e.currentTarget.style.color = 'var(--text-strong)'}
              onMouseLeave={(e) => e.currentTarget.style.color = 'var(--text-muted)'}
            >{l.label}</button>
          ))}
        </nav>

        {/* RIGHT — actions */}
        <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 10 }}>
          <button onClick={() => onNav && onNav('products')} className="sz-order-btn" style={{
            display: 'inline-flex', alignItems: 'center', height: 42, padding: '0 22px',
            background: 'var(--primary)', color: 'var(--on-primary)', border: 'none',
            borderRadius: 'var(--radius-pill)', fontFamily: 'var(--font-head)', fontWeight: 800,
            fontSize: 14.5, cursor: 'pointer', boxShadow: 'var(--glow-orange-soft)',
          }}>Order Now</button>
          <div style={{ position: 'relative' }}>
            <IconButton label="Open cart" variant="outline" onClick={onCart}>
              <Icon name="ShoppingBag" size={19} />
            </IconButton>
            {cartCount > 0 && (
              <span style={{
                position: 'absolute', top: -6, right: -6, minWidth: 20, height: 20, padding: '0 5px',
                background: 'var(--shoyu-orange)', color: 'var(--soy-black)', borderRadius: 999,
                fontFamily: 'var(--font-head)', fontWeight: 800, fontSize: 11.5,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                border: '2px solid var(--soy-ink)',
              }}>{cartCount}</span>
            )}
          </div>
        </div>
      </div>
    </header>
  );
}
window.Nav = Nav;