// Header.jsx — top nav with chrome wordmark
function Header({ onCta }) {
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 60,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '14px 28px',
      background: 'rgba(6,6,6,0.85)',
      backdropFilter: 'blur(10px)',
      borderBottom: '1px solid rgba(255,255,255,0.08)',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
        <img src="assets/logos/v_mark_white.svg" alt="Vipers"
          style={{
            width: 42,
            height: 42,
            objectFit: 'contain',
            filter: 'drop-shadow(0 3px 10px rgba(255,255,255,0.16))',
          }} />
        <div>
          <div style={{
            fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 18,
            textTransform: 'uppercase', letterSpacing: '0.04em', lineHeight: 1,
            background: 'var(--chrome-gradient-light)', WebkitBackgroundClip: 'text',
            backgroundClip: 'text', color: 'transparent',
          }}>Vipers Basketball</div>
          <div style={{
            fontFamily: 'var(--font-heading)', fontWeight: 600, fontSize: 10,
            textTransform: 'uppercase', letterSpacing: '0.22em', color: 'var(--fg-3)',
            marginTop: 3,
          }}>Booster Club · Sponsorship</div>
        </div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 24 }}>
        <div style={{
          fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: 11,
          textTransform: 'uppercase', letterSpacing: '0.24em', color: 'var(--fg-3)',
        }} className="hide-mobile">#RELENTLESS</div>
        <button className="viper-btn-chrome" style={{ padding: '10px 18px', fontSize: 11 }} onClick={onCta}>
          View Tiers ↓
        </button>
      </div>
    </header>
  );
}