// screens-gameday-radio.jsx — Live Radio mode + shared in-game engagement
// primitives: ReactionRail (floating emoji), LiveChatStack (scrolling chat).
// Tenant-aware: every station, host, show, and color comes from RADIO.

// ─────────────────────────────────────────────────────────────────────
// REACTION RAIL — floating emojis up the right edge
// Used in Watch (broadcast) AND Radio mode.
// Props: rate (ms between emojis), pool (override default emoji set)
// ─────────────────────────────────────────────────────────────────────
const DEFAULT_REACTIONS = ['🔥', '👏', '⚡', '🎯', '💛', '🙌', '😱', '🏆', '🚀'];

function ReactionRail({ rate = 900, pool = DEFAULT_REACTIONS, manualEmoji, manualKey }) {
  const [items, setItems] = React.useState([]);
  const idRef = React.useRef(0);

  // Auto-spawn reactions on interval
  React.useEffect(() => {
    const tick = () => {
      const emoji = pool[Math.floor(Math.random() * pool.length)];
      const id = ++idRef.current;
      // Slight horizontal jitter so they don't all stack
      const x = 4 + Math.floor(Math.random() * 22);
      setItems(prev => [...prev, { id, emoji, x }].slice(-12));
      setTimeout(() => setItems(p => p.filter(it => it.id !== id)), 2800);
    };
    const iv = setInterval(tick, rate + Math.random() * 400);
    return () => clearInterval(iv);
  }, [rate, pool]);

  // Manual emoji push (when user taps a reaction button)
  React.useEffect(() => {
    if (!manualEmoji) return;
    const id = ++idRef.current;
    setItems(prev => [...prev, { id, emoji: manualEmoji, x: 14, manual: true }].slice(-14));
    setTimeout(() => setItems(p => p.filter(it => it.id !== id)), 2800);
  }, [manualKey]);

  return (
    <div style={{
      position: 'absolute', right: 0, bottom: 0, top: 0, width: 72,
      pointerEvents: 'none', zIndex: 5,
      overflow: 'hidden',
    }}>
      <style>{`
        @keyframes mtnReactFloat {
          0%   { transform: translateY(0) scale(0.6); opacity: 0; }
          14%  { transform: translateY(-16px) scale(1.1); opacity: 1; }
          24%  { transform: translateY(-40px) scale(1); opacity: 1; }
          70%  { transform: translateY(-220px) scale(1); opacity: 0.95; }
          100% { transform: translateY(-340px) scale(0.85); opacity: 0; }
        }
        @keyframes mtnReactWobble {
          0%, 100% { margin-left: 0; }
          25%      { margin-left: 6px; }
          75%      { margin-left: -4px; }
        }
      `}</style>
      {items.map(it => (
        <div key={it.id} style={{
          position: 'absolute',
          right: it.x, bottom: 16,
          fontSize: it.manual ? 28 : 22,
          animation: `mtnReactFloat 2.8s ease-out forwards, mtnReactWobble 2.4s ease-in-out infinite`,
          textShadow: '0 2px 12px rgba(0,0,0,0.6)',
          willChange: 'transform, opacity',
        }}>{it.emoji}</div>
      ))}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────
// LIVE CHAT STACK — scrolling chat at bottom-left of a live surface
// Auto-adds messages on an interval. Compact "tickered" feel.
// ─────────────────────────────────────────────────────────────────────
const RADIO_CHAT_SEEDS = [
  { h: '@trent_w', body: 'We need more Greene! 🔥' },
  { h: '@maria_l', body: 'Defense looking solid' },
  { h: '@kyle.r',  body: 'Section 108 is electric' },
  { h: '@asha_b',  body: 'Listening from Charleston ✊' },
  { h: '@gus_p',   body: 'Caridi calling it best as always' },
  { h: '@nia_m',   body: 'GO MOUNTAINEERS' },
  { h: '@drew_k',  body: 'Need a stop here' },
  { h: '@sam_c',   body: 'Big drive coming' },
  { h: '@ruben_a', body: 'Pull through here' },
  { h: '@emily.t', body: 'Riley always knows ⚡' },
];

const RADIO_CHAT_BY_TENANT = {
  utah: [
    { h: '@u_fan_red',  body: 'Bill called it perfect 🔥' },
    { h: '@drew.utes',  body: 'BRING IT HOME UTES' },
    { h: '@maria_slc',  body: 'Defense holding strong' },
    { h: '@gus_park',   body: 'Section 28 chant going crazy' },
    { h: '@kael.b',     body: 'Best radio call in the country' },
    { h: '@hannahP',    body: 'Listening from Provo (don\'t tell)' },
    { h: '@trent.w',    body: 'Need a 3rd-down stop here' },
    { h: '@asha.b',     body: 'Crimson stays winning ⚡' },
  ],
  osu: [
    { h: '@scarlet_fan', body: 'KEELS IS MONEY 🔥' },
    { h: '@buckeye_22',  body: 'O—H—' },
    { h: '@cbus_kev',    body: 'Defense looking elite' },
    { h: '@maria.l',     body: 'Listening from Toledo' },
    { h: '@gus_p',       body: 'Big drive needed here' },
  ],
  kentucky: [
    { h: '@bbn_4ever',  body: 'TOM ALWAYS DELIVERS 🔥' },
    { h: '@asha.lex',   body: 'Defense looking solid' },
    { h: '@cole_b',     body: 'Listening from Louisville' },
    { h: '@blue_22',    body: 'Need a stop here' },
  ],
  rsl: [
    { h: '@claret_22', body: 'BELIEVE 🔥' },
    { h: '@asha.slc',  body: 'David sees the game perfectly' },
    { h: '@gus_p',     body: 'Need to press higher up' },
    { h: '@trent.w',   body: 'GO RSL ⚡' },
    { h: '@nia_m',     body: 'Defense holding' },
  ],
  royals: [
    { h: '@royal_22',  body: 'ROYALS WAY 🔥' },
    { h: '@asha.slc',  body: 'Erin\'s calls are gold' },
    { h: '@trent.w',   body: 'Build it up' },
    { h: '@nia_m',     body: 'GO ROYALS ⚡' },
  ],
};

function LiveChatStack({ tenantId, mode = 'radio' }) {
  const seeds = (RADIO_CHAT_BY_TENANT[tenantId] && RADIO_CHAT_BY_TENANT[tenantId].length)
    ? RADIO_CHAT_BY_TENANT[tenantId]
    : RADIO_CHAT_SEEDS;
  const [msgs, setMsgs] = React.useState(() => seeds.slice(0, 3).map((m, i) => ({ ...m, id: i })));
  const cursor = React.useRef(3);
  const idRef = React.useRef(3);

  React.useEffect(() => {
    const iv = setInterval(() => {
      const next = seeds[cursor.current % seeds.length];
      cursor.current++;
      idRef.current++;
      setMsgs(prev => [...prev, { ...next, id: idRef.current }].slice(-5));
    }, 2200);
    return () => clearInterval(iv);
  }, [seeds]);

  return (
    <div style={{
      position: 'absolute', left: 14, bottom: 80, right: 80,
      display: 'flex', flexDirection: 'column-reverse',
      maxHeight: 220, overflow: 'hidden',
      pointerEvents: 'none', zIndex: 4,
    }}>
      <style>{`
        @keyframes mtnChatIn {
          from { opacity: 0; transform: translateY(8px); }
          to   { opacity: 1; transform: translateY(0); }
        }
      `}</style>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
        {msgs.map((m, i) => {
          const fadeIdx = msgs.length - 1 - i;
          const opacity = Math.max(0.3, 1 - fadeIdx * 0.18);
          return (
            <div key={m.id} style={{
              opacity,
              animation: 'mtnChatIn 320ms ease-out',
              padding: '6px 10px',
              borderRadius: 10,
              background: 'rgba(0,0,0,0.58)',
              backdropFilter: 'blur(8px)',
              WebkitBackdropFilter: 'blur(8px)',
              border: '0.5px solid rgba(255,255,255,0.1)',
              maxWidth: '92%',
              alignSelf: 'flex-start',
              fontFamily: DS.sans,
              color: WVU.cream,
              fontSize: 12.5,
              lineHeight: 1.3,
              display: 'flex', gap: 8, alignItems: 'baseline',
            }}>
              <span style={{
                fontFamily: DS.mono, fontSize: 11, fontWeight: 600,
                color: WVU.gold, letterSpacing: '0.02em', flexShrink: 0,
              }}>{m.h}</span>
              <span style={{ fontWeight: 500 }}>{m.body}</span>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────
// RADIO MODE — full-bleed radio broadcast surface
// Replaces the watch video feed when the user taps the "Radio" angle.
// Props:
//   onClose          → exits radio mode (returns to angle picker)
//   onQuestComplete  → fires when 3s dwell timer hits (awards points)
// ─────────────────────────────────────────────────────────────────────
function RadioMode({ onClose, onQuestComplete }) {
  const r = (typeof RADIO !== 'undefined' && RADIO) ? RADIO : {};
  const station = r.station || 'ESPN 700';
  const callSign = r.callSign || r.stationShort || 'ESPN';
  const brandBg = r.brandBg || '#CC0000';
  const brandFg = r.brandFg || '#FFFFFF';

  // 3-second dwell timer that completes the "Listen to radio broadcast" quest
  const [dwell, setDwell] = React.useState(0);
  const [completed, setCompleted] = React.useState(false);
  const [questDismissed, setQuestDismissed] = React.useState(false);
  const [reactionKey, setReactionKey] = React.useState(0);
  const [manualEmoji, setManualEmoji] = React.useState(null);

  React.useEffect(() => {
    if (completed) return;
    const start = performance.now();
    let raf;
    const tick = (now) => {
      const t = Math.min(1, (now - start) / 3000);
      setDwell(t);
      if (t < 1) raf = requestAnimationFrame(tick);
      else {
        setCompleted(true);
        if (onQuestComplete) onQuestComplete();
        setTimeout(() => setQuestDismissed(true), 5000);
      }
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [completed, onQuestComplete]);

  const fireReaction = (emoji) => {
    setManualEmoji(emoji);
    setReactionKey(k => k + 1);
  };

  // ── Ask-a-question / join-the-chat flow ──
  // User types a question → it posts → after a beat the host "picks" it and
  // a banner appears ("Tony is answering your question") + bonus points fire.
  const [question, setQuestion] = React.useState('');
  const [questionState, setQuestionState] = React.useState('idle'); // idle | submitted | picked
  const submitQuestion = () => {
    if (!question.trim() || questionState !== 'idle') return;
    setQuestionState('submitted');
    // Host picks it after a short suspense (prototype: always picks)
    setTimeout(() => {
      setQuestionState('picked');
      if (onQuestComplete) onQuestComplete();
      if (window.fireRewardEvent) window.fireRewardEvent({ pts: 150, reason: 'Your question went on air', label: '+150 · On-air bonus' });
    }, 2600);
  };

  // Host photo with graceful fallback to initials block
  const [imgOk, setImgOk] = React.useState(true);

  return (
    <div style={{
      position: 'absolute', inset: 0, zIndex: 50,
      background: '#000',
      overflow: 'hidden',
    }}>
      {/* ─── Host portrait full-bleed ─── */}
      {imgOk && r.hostPhoto ? (
        <img
          src={r.hostPhoto}
          alt={r.hostName || 'Host'}
          onError={() => setImgOk(false)}
          style={{
            position: 'absolute', inset: 0,
            width: '100%', height: '100%',
            objectFit: 'cover',
            objectPosition: 'center 28%',
          }}
        />
      ) : (
        // Fallback: tenant-colored portrait with host initials
        <div style={{
          position: 'absolute', inset: 0,
          background: `
            radial-gradient(ellipse 80% 60% at 50% 30%, ${hexA(WVU.gold, 0.25)}, transparent 60%),
            radial-gradient(ellipse 90% 70% at 50% 90%, ${hexA(WVU.blue, 0.65)}, transparent 60%),
            linear-gradient(180deg, ${WVU.ink2}, #000)
          `,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <div style={{
            width: 220, height: 220, borderRadius: '50%',
            background: `linear-gradient(145deg, ${WVU.gold}, ${WVU.goldDim})`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: DS.display, fontSize: 96, fontWeight: 900,
            color: WVU.blueDim, letterSpacing: '-0.04em',
            boxShadow: `0 24px 60px ${hexA(WVU.gold, 0.5)}, inset 0 2px 0 rgba(255,255,255,0.3)`,
          }}>{r.hostInitials || 'BR'}</div>
        </div>
      )}

      {/* ─── Vignette + bottom darkening for content legibility ─── */}
      <div style={{
        position: 'absolute', inset: 0,
        background: `
          linear-gradient(180deg, rgba(0,0,0,0.55) 0%, transparent 22%, transparent 50%, rgba(0,0,0,0.5) 78%, rgba(0,0,0,0.92) 100%)
        `,
        pointerEvents: 'none',
      }} />

      {/* ─── Status bar safe area ─── */}
      <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 54 }} />

      {/* ─── Top bar: close + LIVE + station ─── */}
      <div style={{
        position: 'absolute', top: 58, left: 14, right: 14, zIndex: 6,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10,
      }}>
        <button onClick={onClose} style={{
          width: 36, height: 36, borderRadius: 18,
          background: 'rgba(0,0,0,0.55)', backdropFilter: 'blur(12px)',
          border: '0.5px solid rgba(255,255,255,0.18)',
          color: WVU.cream, cursor: 'pointer', padding: 0,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <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>

        {/* Station brand chip — tenant-styled like a real call-letters logo */}
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 0,
          borderRadius: 6, overflow: 'hidden',
          boxShadow: '0 4px 16px rgba(0,0,0,0.55), 0',
        }}>
          <div style={{
            padding: '7px 11px',
            background: brandBg, color: brandFg,
            fontFamily: '"Inter", "Helvetica Neue", Helvetica, Arial, sans-serif',
            fontSize: 13, fontWeight: 900, letterSpacing: '0.03em',
            textTransform: 'uppercase',
          }}>{callSign}</div>
          <div style={{
            padding: '7px 11px',
            background: 'rgba(0,0,0,0.7)', color: WVU.cream,
            fontFamily: '"Inter", -apple-system, sans-serif',
            fontSize: 12, fontWeight: 700, letterSpacing: '0.02em',
          }}>{station.replace(callSign, '').replace(/^[\s·]+/, '') || 'SPORTS'}</div>
        </div>

        {/* Live pulse */}
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 6,
          padding: '6px 10px', borderRadius: 14,
          background: 'rgba(220,30,30,0.85)',
          boxShadow: '0 4px 12px rgba(220,30,30,0.45)',
          fontFamily: DS.sans, fontSize: 11.5, fontWeight: 800,
          color: '#fff', letterSpacing: '0.16em',
        }}>
          <div style={{
            width: 7, height: 7, borderRadius: 4, background: '#fff',
            animation: 'mtnPulse 1.4s ease-in-out infinite',
          }} />
          ON AIR
        </div>
      </div>

      {/* ─── Host identity block (left side, mid) ─── */}
      <div style={{
        position: 'absolute', left: 18, top: 124, right: 18, zIndex: 5,
      }}>
        <div style={{
          fontFamily: DS.mono, fontSize: 11.5, fontWeight: 700,
          color: brandFg === '#FFFFFF' ? hexA(brandBg === '#0a1f3d' ? '#FFD700' : '#FFFFFF', 0.95) : hexA(brandFg, 0.95),
          letterSpacing: '0.18em', textTransform: 'uppercase',
          textShadow: '0 2px 8px rgba(0,0,0,0.6)',
          marginBottom: 6,
        }}>{r.role || 'On Air Now'}</div>
        <div style={{
          fontFamily: DS.display, fontSize: 34, fontWeight: 900,
          color: WVU.cream, lineHeight: 0.98, letterSpacing: '-0.025em',
          textShadow: '0 4px 24px rgba(0,0,0,0.7)',
        }}>{r.hostName || 'Bill Riley'}</div>
        <div style={{
          fontFamily: DS.sans, fontSize: 14, fontWeight: 600,
          color: WVU.cream, opacity: 0.92,
          marginTop: 6, letterSpacing: '-0.005em',
          textShadow: '0 2px 8px rgba(0,0,0,0.7)',
        }}>{r.showName || 'The Bill Riley Show'}</div>
        <div style={{
          fontFamily: DS.sans, fontSize: 12.5, fontWeight: 600,
          color: WVU.creamDim, marginTop: 4,
          textShadow: '0 1px 4px rgba(0,0,0,0.7)',
        }}>{r.timeRange || 'Live until 7pm MT'} · {r.frequency || ''}</div>
      </div>

      {/* ─── Waveform / now-playing affordance ─── */}
      <div style={{
        position: 'absolute', left: 18, top: 248, zIndex: 5,
        display: 'flex', alignItems: 'flex-end', gap: 3, height: 26,
      }}>
        <style>{`
          @keyframes mtnWave {
            0%, 100% { height: 28%; }
            50%      { height: 100%; }
          }
          @keyframes mtnSpinnerRing { to { transform: rotate(360deg); } }
        `}</style>
        {[0,1,2,3,4,5,6,7,8,9,10,11].map(i => (
          <div key={i} style={{
            width: 3, height: '40%', borderRadius: 1.5,
            background: `linear-gradient(180deg, ${WVU.gold}, ${WVU.goldLite})`,
            animation: `mtnWave ${0.6 + (i % 5) * 0.15}s ease-in-out ${i * 0.07}s infinite`,
            boxShadow: 'none',
          }} />
        ))}
      </div>

      {/* ─── Live chat stack ─── */}
      <LiveChatStack tenantId={WVU.id} mode="radio" />

      {/* ─── Reaction rail ─── */}
      <ReactionRail rate={950} manualEmoji={manualEmoji} manualKey={reactionKey} />

      {/* ─── Quest dwell indicator (positioned near host info, above chat) ─── */}
      {!completed && (
        <div style={{
          position: 'absolute', left: 18, right: 18, top: 286, zIndex: 6,
          padding: '10px 14px',
          background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(10px)',
          border: `0.5px solid ${hexA(WVU.gold, 0.5)}`,
          borderRadius: 12,
          display: 'flex', alignItems: 'center', gap: 12,
          maxWidth: 320,
        }}>
          <div style={{
            width: 30, height: 30, borderRadius: 15,
            background: `linear-gradient(135deg, ${WVU.gold}, ${WVU.goldDim})`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            flexShrink: 0,
          }}>
            <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
              <circle cx="8" cy="8" r="1.6" fill={WVU.blueDim}/>
              <path d="M5 5q-2 3 0 6M11 5q2 3 0 6" stroke={WVU.blueDim} strokeWidth="1.4" strokeLinecap="round" fill="none"/>
            </svg>
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{
              fontFamily: DS.sans, fontSize: 12.5, fontWeight: 700,
              color: WVU.cream, letterSpacing: '-0.005em',
            }}>Listening to the broadcast</div>
            <div style={{
              height: 4, marginTop: 5, borderRadius: 2,
              background: 'rgba(255,255,255,0.18)', overflow: 'hidden',
            }}>
              <div style={{
                width: `${dwell * 100}%`, height: '100%',
                background: `linear-gradient(90deg, ${WVU.goldDim}, ${WVU.gold})`,
                boxShadow: 'none',
                transition: 'width 60ms linear',
              }} />
            </div>
          </div>
          <div style={{
            fontFamily: DS.mono, fontSize: 12, fontWeight: 700,
            color: WVU.gold, letterSpacing: '0.04em',
          }}>+200</div>
        </div>
      )}
      {completed && !questDismissed && (
        <div style={{
          position: 'absolute', left: 18, right: 18, top: 286, zIndex: 6,
          padding: '10px 14px',
          background: `linear-gradient(90deg, ${hexA(WVU.gold, 0.22)}, rgba(0,0,0,0.65))`,
          backdropFilter: 'blur(10px)',
          border: `0.5px solid ${hexA(WVU.gold, 0.6)}`,
          borderRadius: 12,
          display: 'flex', alignItems: 'center', gap: 12,
          maxWidth: 320,
          animation: 'mtnFade 280ms ease-out',
          boxShadow: `0 8px 32px ${hexA(WVU.gold, 0.25)}`,
        }}>
          <div style={{
            width: 30, height: 30, borderRadius: 15,
            background: `linear-gradient(135deg, ${WVU.gold}, ${WVU.goldDim})`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            flexShrink: 0,
            boxShadow: `0 4px 12px ${hexA(WVU.gold, 0.45)}`,
          }}>
            <svg width="16" height="16" viewBox="0 0 18 18" fill="none">
              <path d="M3 9.5l4 4 8-9" stroke={WVU.blueDim} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{
              fontFamily: DS.sans, fontSize: 12.5, fontWeight: 700,
              color: WVU.cream, letterSpacing: '-0.005em',
            }}>Quest complete · Listening to the broadcast</div>
            <div style={{
              fontFamily: DS.mono, fontSize: 11, fontWeight: 600,
              color: WVU.gold, letterSpacing: '0.08em', marginTop: 2,
              textTransform: 'uppercase',
            }}>+200 pts added to your account</div>
          </div>
        </div>
      )}

      {/* ─── Reaction buttons (bottom-right) ─── */}
      <div style={{
        position: 'absolute', right: 12, bottom: 78, zIndex: 7,
        display: 'flex', flexDirection: 'column', gap: 8,
      }}>
        {['🔥', '👏', '⚡'].map(em => (
          <button key={em} onClick={() => fireReaction(em)} style={{
            width: 44, height: 44, borderRadius: 22,
            background: 'rgba(0,0,0,0.55)', backdropFilter: 'blur(10px)',
            border: '0.5px solid rgba(255,255,255,0.16)',
            fontSize: 20, cursor: 'pointer', padding: 0,
            transition: 'transform 120ms ease',
          }}
          onMouseDown={(e) => { e.currentTarget.style.transform = 'scale(0.88)'; }}
          onMouseUp={(e) => { e.currentTarget.style.transform = 'scale(1)'; }}
          onMouseLeave={(e) => { e.currentTarget.style.transform = 'scale(1)'; }}
          >{em}</button>
        ))}
      </div>

      {/* ─── "Host is replying to you" banner ─── */}
      {questionState === 'picked' && (
        <div style={{
          position: 'absolute', left: 14, right: 14, bottom: 92, zIndex: 8,
          padding: '12px 14px', borderRadius: 14,
          background: `linear-gradient(135deg, ${brandBg}, ${_radioDarken(brandBg)})`,
          border: '0.5px solid rgba(255,255,255,0.25)',
          boxShadow: `0 12px 36px rgba(0,0,0,0.5)`,
          display: 'flex', alignItems: 'center', gap: 12,
          animation: 'mtnFade 320ms ease-out',
        }}>
          <div style={{
            width: 40, height: 40, borderRadius: 20, flexShrink: 0, overflow: 'hidden',
            background: '#000', border: '1.5px solid rgba(255,255,255,0.4)',
          }}>
            {imgOk && r.hostPhoto
              ? <img src={r.hostPhoto} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 25%' }} />
              : <div style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: DS.display, fontWeight: 900, color: '#fff', fontSize: 16 }}>{r.hostInitials || 'BR'}</div>}
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 5,
              fontFamily: DS.mono, fontSize: 10.5, fontWeight: 800,
              color: '#fff', letterSpacing: '0.14em', textTransform: 'uppercase',
              padding: '2px 6px', borderRadius: 3, background: 'rgba(0,0,0,0.3)',
              marginBottom: 4,
            }}>
              <span style={{ width: 5, height: 5, borderRadius: 3, background: '#fff', animation: 'mtnPulse 1.4s ease-in-out infinite' }} />
              On Air
            </div>
            <div style={{
              fontFamily: DS.sans, fontSize: 13.5, fontWeight: 800,
              color: '#fff', letterSpacing: '-0.005em', lineHeight: 1.2,
            }}>{(r.hostName || 'The host').split(' ')[0]} is answering your question</div>
            <div style={{
              fontFamily: DS.sans, fontSize: 12, color: 'rgba(255,255,255,0.85)',
              marginTop: 2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
            }}>"{question}"</div>
          </div>
          <div style={{
            fontFamily: DS.mono, fontSize: 12, fontWeight: 800, color: '#fff',
            background: 'rgba(0,0,0,0.28)', padding: '5px 9px', borderRadius: 8,
            flexShrink: 0, letterSpacing: '0.02em',
          }}>+150</div>
        </div>
      )}

      {/* ─── Ask-a-question / join chat bar (bottom) ─── */}
      <div style={{
        position: 'absolute', left: 14, right: 14, bottom: 24, zIndex: 7,
      }}>
        {questionState === 'submitted' ? (
          <div style={{
            padding: '13px 16px', borderRadius: 999,
            background: 'rgba(0,0,0,0.7)', backdropFilter: 'blur(14px)',
            border: `0.5px solid ${hexA(WVU.gold, 0.4)}`,
            display: 'flex', alignItems: 'center', gap: 10,
            fontFamily: DS.sans, fontSize: 13, fontWeight: 600, color: WVU.cream,
          }}>
            <div style={{ width: 16, height: 16, borderRadius: 8, border: `2px solid ${hexA(WVU.gold,0.3)}`, borderTopColor: WVU.gold, animation: 'mtnSpinnerRing 0.9s linear infinite' }} />
            Question sent to the booth…
          </div>
        ) : (
          <div style={{
            display: 'flex', alignItems: 'center', gap: 8,
            padding: '6px 6px 6px 16px', borderRadius: 999,
            background: 'rgba(0,0,0,0.62)', backdropFilter: 'blur(14px)',
            border: '0.5px solid rgba(255,255,255,0.16)',
          }}>
            <input
              value={question}
              onChange={(e) => setQuestion(e.target.value)}
              onKeyDown={(e) => { if (e.key === 'Enter') submitQuestion(); }}
              placeholder="Ask the booth a question…"
              style={{
                flex: 1, minWidth: 0, background: 'transparent', border: 'none', outline: 'none',
                fontFamily: DS.sans, fontSize: 14, color: WVU.cream,
              }}
            />
            <button onClick={submitQuestion} disabled={!question.trim()} style={{
              width: 38, height: 38, borderRadius: 19, flexShrink: 0,
              background: question.trim() ? `linear-gradient(135deg, ${WVU.gold}, ${WVU.goldDim})` : 'rgba(255,255,255,0.08)',
              border: 'none', cursor: question.trim() ? 'pointer' : 'default', padding: 0,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              boxShadow: question.trim() ? `0 2px 10px ${hexA(WVU.gold, 0.5)}` : 'none',
              transition: 'all 160ms ease',
            }}>
              <svg width="17" height="17" viewBox="0 0 18 18" fill="none">
                <path d="M2 9l14-7-5 16-2-7-7-2z" stroke={question.trim() ? WVU.blueDim : 'rgba(255,255,255,0.5)'} strokeWidth="1.6" strokeLinejoin="round" fill="none"/>
              </svg>
            </button>
          </div>
        )}
      </div>
    </div>
  );
}

// darken a hex for the radio banner gradient
function _radioDarken(hex) {
  const h = (hex || '#CC0000').replace('#','');
  const n = parseInt(h, 16);
  const r = ((n>>16)&255)*0.55, g = ((n>>8)&255)*0.55, b = (n&255)*0.55;
  return `rgb(${Math.round(r)},${Math.round(g)},${Math.round(b)})`;
}

Object.assign(window, { RadioMode, ReactionRail, LiveChatStack });