// shell.jsx — Mountaineer 360 chrome: top bar, tab bar, account chip

function MtnTopBar({ showBack = false, onBack, avatar = true, onAvatar, title, solid = false }) {
  return (
    <div style={{
      position: 'absolute', top: 0, left: 0, right: 0, zIndex: 20,
      paddingTop: 54, paddingBottom: 10, paddingLeft: 14, paddingRight: 14,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      background: solid
        ? WVU.ink
        : 'linear-gradient(180deg, rgba(20,17,12,0.95) 0%, rgba(20,17,12,0.55) 70%, transparent)',
      backdropFilter: 'blur(10px)',
    }}>
      {showBack ? (
        <button onClick={onBack} style={{
          width: 34, height: 34, borderRadius: 17,
          background: 'rgba(245,236,217,0.08)',
          border: `0.5px solid ${WVU.lineBold}`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          cursor: 'pointer', color: WVU.cream, padding: 0,
        }}>
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
            <path d="M9 2L4 7l5 5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </button>
      ) : <div style={{ width: 34 }} />}

      <div style={{ flex: 1, display: 'flex', justifyContent: 'center' }}>
        {title ? (
          <div style={{
            fontFamily: DS.sans, fontSize: 14, fontWeight: 600,
            color: WVU.cream, letterSpacing: '-0.01em',
          }}>{title}</div>
        ) : (
          <WVUMark size={13} />
        )}
      </div>

      {avatar ? (
        <div onClick={onAvatar} style={{
          width: 34, height: 34, borderRadius: 17,
          background: `linear-gradient(135deg, ${WVU.goldDim}, ${WVU.gold})`,
          border: `0.5px solid ${WVU.lineBold}`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: DS.sans, fontWeight: 700, fontSize: 12, color: WVU.blueDim,
          letterSpacing: '-0.02em', cursor: 'pointer',
        }}>{DEREK.initials}</div>
      ) : <div style={{ width: 34 }} />}
    </div>
  );
}

function MtnTabBar({ active = 'home', onTab = () => {} }) {
  const tabs = [
    { id: 'home', label: 'Home', icon: (
      <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
        <path d="M3 10L11 3l8 7v9a1 1 0 01-1 1h-4v-6H8v6H4a1 1 0 01-1-1v-9z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/>
      </svg>
    )},
    { id: 'sports', label: 'Sports', icon: (
      <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
        {/* American football — pointed ellipse with laces */}
        <path d="M3.5 11c0-3 3.5-6.5 7.5-6.5s7.5 3.5 7.5 6.5-3.5 6.5-7.5 6.5S3.5 14 3.5 11z"
              stroke="currentColor" strokeWidth="1.6" fill="none" strokeLinecap="round"/>
        <path d="M8.5 11h5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
        <path d="M9.5 9.5v3M11 9.2v3.6M12.5 9.5v3" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
      </svg>
    )},
    { id: 'rewards', label: 'Rewards', isTrophy: true },
    { id: 'shop', label: 'Shop', icon: (
      <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
        <path d="M4 7h14l-1 11a2 2 0 01-2 2H7a2 2 0 01-2-2L4 7z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/>
        <path d="M8 7V5a3 3 0 016 0v2" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
      </svg>
    )},
    { id: 'me', label: 'Me', icon: (
      <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
        <circle cx="11" cy="8" r="4" stroke="currentColor" strokeWidth="1.6"/>
        <path d="M3 20c1.5-4 4.5-6 8-6s6.5 2 8 6" stroke="currentColor" strokeWidth="1.6" fill="none" strokeLinecap="round"/>
      </svg>
    )},
  ];

  // Trophy is ALWAYS filled in tenant primary — it's the call-to-action tab.
  const trophyIcon = (on) => (
    <svg width="24" height="24" viewBox="0 0 22 24" fill="none">
      {/* handles */}
      <path d="M5 4H2.5a2.5 2.5 0 002.5 2.5" stroke={WVU.gold} strokeWidth="1.4" fill="none" strokeLinecap="round"/>
      <path d="M17 4h2.5a2.5 2.5 0 01-2.5 2.5" stroke={WVU.gold} strokeWidth="1.4" fill="none" strokeLinecap="round"/>
      {/* cup body */}
      <path d="M5 2h12v6a6 6 0 01-12 0V2z" fill={WVU.gold} strokeLinejoin="round"/>
      {/* stem */}
      <rect x="9.5" y="14" width="3" height="3.5" fill={WVU.goldDim}/>
      {/* base */}
      <rect x="6" y="17.5" width="10" height="2.2" rx="0.6" fill={WVU.gold}/>
    </svg>
  );

  const tabBtn = (tab) => {
    const on = tab.id === active;
    // Trophy tab: label always gold to match the always-filled icon, brighter when active.
    const labelColor = tab.isTrophy
      ? (on ? WVU.gold : WVU.goldDim)
      : (on ? WVU.gold : WVU.creamDim);
    return (
      <button key={tab.id} onClick={() => onTab(tab.id)}
        style={{
          flex: 1, border: 'none', background: 'transparent',
          display: 'flex', flexDirection: 'column', alignItems: 'center',
          justifyContent: 'center', gap: 3, height: '100%',
          color: on ? WVU.gold : WVU.creamDim,
          cursor: 'pointer', padding: 0,
          transition: 'color 160ms ease',
        }}>
        <div style={{ height: 24, display: 'flex', alignItems: 'center' }}>
          {tab.isTrophy ? trophyIcon(on) : tab.icon}
        </div>
        <div style={{
          fontFamily: DS.sans, fontSize: 10, fontWeight: 600,
          letterSpacing: '0.04em',
          color: labelColor,
        }}>{tab.label}</div>
      </button>
    );
  };

  return (
    <div style={{
      position: 'absolute', left: 0, right: 0, bottom: 0,
      paddingBottom: 28, paddingTop: 18, paddingLeft: 14, paddingRight: 14,
      background: 'linear-gradient(180deg, transparent, rgba(10,9,5,0.92) 35%)',
      zIndex: 30, pointerEvents: 'none',
    }}>
      <div style={{
        position: 'relative', pointerEvents: 'auto',
        display: 'flex', height: 58,
        background: 'rgba(30,26,19,0.92)',
        backdropFilter: 'blur(24px) saturate(180%)',
        WebkitBackdropFilter: 'blur(24px) saturate(180%)',
        border: `0.5px solid ${WVU.lineBold}`,
        borderRadius: DS.r.pill,
        boxShadow: `0 4px 14px rgba(0,0,0,0.45)`,
      }}>
        {tabs.map(tabBtn)}
      </div>

      <style>{`
        @keyframes mtnLivePulse {
          0%, 100% { opacity: 1; transform: scale(1); }
          50%      { opacity: 0.55; transform: scale(0.85); }
        }
      `}</style>
    </div>
  );
}

// Pill button
function MtnButton({ children, variant = 'primary', full, size = 'md', onClick, icon, style = {} }) {
  const sizes = {
    sm: { h: 36, padX: 14, fs: 12 },
    md: { h: 48, padX: 20, fs: 14 },
    lg: { h: 56, padX: 24, fs: 15 },
  };
  const s = sizes[size];
  const variants = {
    primary: {
      background: WVU.gold,
      color: WVU.blueDim,
      border: 'none',
      boxShadow: `0 2px 10px rgba(234,170,0,0.28), 0 1px 0 rgba(255,255,255,0.25) inset`,
    },
    blue: {
      background: WVU.blue,
      color: WVU.cream,
      border: 'none',
      boxShadow: `0 2px 10px rgba(0,40,85,0.35)`,
    },
    ghost: {
      background: 'rgba(245,236,217,0.06)',
      color: WVU.cream,
      border: `0.5px solid ${WVU.lineBold}`,
    },
    solid: {
      background: WVU.ink3,
      color: WVU.cream,
      border: `0.5px solid ${WVU.line}`,
    },
  };
  return (
    <button onClick={onClick} style={{
      height: s.h, padding: `0 ${s.padX}px`, width: full ? '100%' : undefined,
      fontFamily: DS.sans, fontSize: s.fs, fontWeight: 700,
      letterSpacing: '0.01em', borderRadius: DS.r.pill,
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
      cursor: 'pointer', transition: 'all 140ms ease',
      ...variants[variant], ...style,
    }}>
      {icon}
      {children}
    </button>
  );
}

// Card
function MtnCard({ children, padding = 16, raised = false, warm = false, onClick, style = {} }) {
  return (
    <div onClick={onClick} style={{
      background: warm ? 'linear-gradient(180deg, #231d12, #1b160d)' : (raised ? WVU.ink2 : WVU.ink2),
      borderRadius: DS.r.lg,
      border: `0.5px solid ${warm ? WVU.lineWarm : WVU.line}`,
      padding,
      cursor: onClick ? 'pointer' : undefined,
      ...style,
    }}>{children}</div>
  );
}

function MtnChip({ children, accent = false, style = {} }) {
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 5,
      padding: '4px 9px', borderRadius: DS.r.pill,
      fontFamily: DS.sans, fontSize: 10, fontWeight: 700,
      letterSpacing: '0.06em', textTransform: 'uppercase',
      background: accent ? WVU.gold : 'rgba(245,236,217,0.06)',
      color: accent ? WVU.blueDim : WVU.cream,
      border: accent ? 'none' : `0.5px solid ${WVU.line}`,
      ...style,
    }}>{children}</div>
  );
}

function MtnSection({ title, kicker, more, children, padded = true }) {
  return (
    <div style={{ marginBottom: 20 }}>
      <div style={{
        display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
        padding: padded ? '0 16px' : 0, marginBottom: 10,
      }}>
        <div>
          {kicker && (
            <div style={{
              fontFamily: DS.sans, fontSize: 10, fontWeight: 600, color: WVU.gold, letterSpacing: '0.12em', textTransform: 'uppercase', textTransform: 'uppercase', marginBottom: 3,
            }}>{kicker}</div>
          )}
          <div style={{
            fontFamily: DS.sans, fontSize: 14, fontWeight: 700,
            letterSpacing: '-0.01em', color: WVU.cream,
          }}>{title}</div>
        </div>
        {more && (
          <div style={{ fontFamily: DS.sans, fontSize: 11, color: WVU.creamDim, cursor: 'pointer' }}>
            See all →
          </div>
        )}
      </div>
      {children}
    </div>
  );
}

// Spine whisper — small inline personalization tag ("because you X")
function Whisper({ children, icon = '·' }) {
  return (
    <div style={{
      fontFamily: DS.mono, fontSize: 9, color: WVU.gold,
      letterSpacing: '0.1em', textTransform: 'uppercase',
      display: 'inline-flex', alignItems: 'center', gap: 4,
    }}>
      <span style={{ opacity: 0.65 }}>{icon}</span> {children}
    </div>
  );
}

function LivePulse({ label = 'LIVE' }) {
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      fontFamily: DS.sans, fontSize: 10, fontWeight: 700,
      letterSpacing: '0.16em', color: WVU.cream,
    }}>
      <div style={{
        width: 6, height: 6, borderRadius: '50%',
        background: WVU.gold,
        animation: 'mtnPulse 1.4s ease-in-out infinite',
      }} />
      {label}
    </div>
  );
}

Object.assign(window, {
  MtnTopBar, MtnTabBar, MtnButton, MtnCard, MtnChip, MtnSection, Whisper, LivePulse,
});