// ZION Header — slim dark header with social rail + Z STAY LIT lockup
// Mobile: the desktop nav collapses into a hamburger that opens a full-screen menu.
function Header({ cartCount, onOpenCart, onGoHome, onNavigate, onSearch, bagPulse }) {
  const [menuOpen, setMenuOpen] = React.useState(false);

  // Lock background scroll while the mobile menu is open
  React.useEffect(() => {
    document.body.style.overflow = menuOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [menuOpen]);

  const goTo = (target) => { setMenuOpen(false); onNavigate(target); };
  const openSearch = () => { setMenuOpen(false); onSearch(); };

  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'rgba(10,10,10,0.92)',
      backdropFilter: 'blur(20px)',
      borderBottom: '1px solid rgba(255,255,255,0.06)',
      color: '#fff',
    }}>
      <div style={{
        display: 'grid', gridTemplateColumns: '1fr auto 1fr',
        alignItems: 'center', padding: '12px 32px', maxWidth: 1440, margin: '0 auto'
      }}>
        {/* LEFT — hamburger (mobile) + nav (desktop) */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 28 }}>
          <button
            className="z-burger"
            onClick={() => setMenuOpen(true)}
            aria-label="Open menu"
            style={{
              flexDirection: 'column', justifyContent: 'center', alignItems: 'flex-start',
              gap: 5, width: 34, height: 34, padding: 0,
              background: 'transparent', border: 'none', cursor: 'pointer',
            }}>
            <span style={burgerBar} />
            <span style={{ ...burgerBar, width: 16 }} />
            <span style={burgerBar} />
          </button>

          <nav className="z-desk-nav" style={{ display: 'flex', gap: 28 }}>
            <NavLink onClick={() => onNavigate('shop')}>SHOP</NavLink>
            <NavLink onClick={() => onNavigate('events')}>EVENTS</NavLink>
            <NavLink onClick={() => onNavigate('content')}>COLLABORATIONS</NavLink>
            <NavLink onClick={() => onNavigate('story')}>STORY</NavLink>
          </nav>
        </div>

        {/* CENTER — logo (full page reload) */}
        <a onClick={() => window.location.reload()} style={{
          cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 4
        }}>
          <img src="../../assets/logo-z-mark.png" alt="ZION" style={{ height: 34 }} />
        </a>

        {/* RIGHT — search (desktop) + bag */}
        <div style={{ display: 'flex', gap: 22, justifyContent: 'flex-end', alignItems: 'center' }}>
          <span className="z-desk-only" style={{ display: 'inline-flex' }}>
            <NavLink onClick={onSearch}>SEARCH</NavLink>
          </span>
          <button onClick={onOpenCart} style={{
            fontFamily: 'Poppins', fontWeight: 800, fontSize: 12, letterSpacing: '0.14em',
            textTransform: 'uppercase', background: 'transparent', border: 'none', color: '#fff',
            cursor: 'pointer', display: 'flex', gap: 6, alignItems: 'center', padding: 0
          }}>
            BAG
            <span style={{
              background: '#F7591F', color: '#fff', fontFamily: 'JetBrains Mono',
              fontSize: 11, fontWeight: 700, padding: '2px 7px', borderRadius: 2, minWidth: 18, textAlign: 'center',
              transform: bagPulse ? 'scale(1.4)' : 'scale(1)',
              transition: 'transform 200ms cubic-bezier(0.5,1.6,0.4,1)',
            }}>{cartCount}</span>
          </button>
        </div>
      </div>

      <MobileMenu open={menuOpen} onClose={() => setMenuOpen(false)} onNavigate={goTo} onSearch={openSearch} />
    </header>
  );
}

const burgerBar = {
  display: 'block', width: 24, height: 2, borderRadius: 2,
  background: '#fff', transition: 'background 140ms',
};

// Full-screen mobile menu. Fades + drops in. Big italic links, ZION-style.
function MobileMenu({ open, onClose, onNavigate, onSearch }) {
  const links = [
    { t: 'shop',    label: 'SHOP' },
    { t: 'events',  label: 'EVENTS' },
    { t: 'content', label: 'COLLABORATIONS' },
    { t: 'story',   label: 'STORY' },
  ];
  // Render through a portal to <body> — the header uses backdrop-filter, which
  // would otherwise trap this fixed overlay inside the (short) header box.
  return ReactDOM.createPortal((
    <div style={{
      position: 'fixed', inset: 0, zIndex: 150,
      background: 'radial-gradient(ellipse 100% 55% at 50% 0%, #2A0B05 0%, #120505 45%, #0A0A0A 100%)',
      display: 'flex', flexDirection: 'column',
      opacity: open ? 1 : 0,
      visibility: open ? 'visible' : 'hidden',
      transform: open ? 'translateY(0)' : 'translateY(-12px)',
      transition: 'opacity 240ms ease, transform 340ms cubic-bezier(0.16,1,0.3,1), visibility 240ms',
    }}>
      {/* Top bar: logo + close */}
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '16px 20px', borderBottom: '1px solid rgba(255,255,255,0.08)',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
          <img src="../../assets/logo-z-staylit.png" alt="ZION Stay Lit" style={{ height: 46 }} />
        </div>
        <button onClick={onClose} aria-label="Close menu" style={{
          background: 'transparent', border: 'none', color: '#fff', cursor: 'pointer',
          fontFamily: 'Poppins', fontWeight: 800, fontSize: 24, lineHeight: 1, padding: 4,
        }}>✕</button>
      </div>

      {/* Links */}
      <nav style={{ display: 'flex', flexDirection: 'column', padding: '20px 24px', flex: 1 }}>
        {links.map((l) => (
          <a key={l.t} onClick={() => onNavigate(l.t)} style={menuLinkStyle}>{l.label}</a>
        ))}
        <a onClick={onSearch} style={{ ...menuLinkStyle, color: '#F7591F' }}>SEARCH</a>
      </nav>

      {/* Socials */}
      <div style={{
        display: 'flex', gap: 14, alignItems: 'center',
        padding: '20px 24px 32px', borderTop: '1px solid rgba(255,255,255,0.08)',
      }}>
        <MenuSocial href="https://www.instagram.com/thefireballguyy/" label="Instagram">IG</MenuSocial>
        <MenuSocial href="https://www.tiktok.com/@thefireballguy" label="TikTok">TT</MenuSocial>
        <MenuSocial href="https://www.youtube.com/@thefireballguyy" label="YouTube">YT</MenuSocial>
      </div>
    </div>
  ), document.body);
}

const menuLinkStyle = {
  fontFamily: 'Poppins, sans-serif', fontWeight: 900, fontStyle: 'italic',
  textTransform: 'uppercase', letterSpacing: '-0.02em',
  fontSize: 'clamp(24px, 7.5vw, 44px)', lineHeight: 1.05,
  color: '#fff', cursor: 'pointer',
  padding: '14px 0', borderBottom: '1px solid rgba(255,255,255,0.08)',
};

function MenuSocial({ children, href, label }) {
  return (
    <a href={href} target="_blank" rel="noopener noreferrer" aria-label={label} style={{
      width: 40, height: 40, borderRadius: '50%',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      border: '1px solid rgba(255,255,255,0.25)',
      fontFamily: 'Poppins', fontSize: 11, fontWeight: 800, letterSpacing: '0.08em',
      color: '#fff', textDecoration: 'none',
    }}>{children}</a>
  );
}

function NavLink({ children, onClick }) {
  const [hover, setHover] = React.useState(false);
  return (
    <a onClick={onClick} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        fontFamily: 'Poppins', fontWeight: 700, fontSize: 12, letterSpacing: '0.14em',
        textTransform: 'uppercase', color: hover ? '#F7591F' : '#fff', cursor: 'pointer',
        textDecoration: 'none',
        textShadow: hover ? '0 0 14px rgba(247,89,31,0.7), 0 0 32px rgba(247,89,31,0.35)' : 'none',
        transition: 'color 140ms, text-shadow 200ms',
      }}>{children}</a>
  );
}

window.Header = Header;