// screens-gameday.jsx — Game Day hub (Utah 360 style, Mountaineer-tuned)
// Unified surface for LIVE game: video + stats + check-in + concessions + chat.
// This is the "content & engagement layer" from the brief.

function ScreenGameDay({ onBack }) {
  const [tab, setTab] = React.useState('watch'); // watch | stats | order | chat
  const g = LIVE_GAME;

  return (
    <div style={{
      position: 'absolute', inset: 0, overflow: 'auto',
      background: WVU.ink, color: WVU.cream,
      paddingTop: 104, paddingBottom: 120,
    }} className="mtn-scrollbar">
      {/* ─── STAGE (always the video) ─────────── */}
      <div style={{
        position: 'relative', width: '100%', aspectRatio: '16 / 9',
        background: '#000',
      }}>
        <WarmHero
          h="100%"
          variant="dusk"
          caption={null}
          photo={
            WVU.id === 'osu'  ? 'mountaineer/assets/home-osu-psu.png' :
            WVU.id === 'utah' ? 'mountaineer/assets/home-utah-next.png' :
            WVU.id === 'wvu'  ? 'mountaineer/assets/home-wvu-next.png' :
            undefined
          }
        />

        {/* Field overlay */}
        <div style={{
          position: 'absolute', inset: 0,
          background: `
            radial-gradient(ellipse 75% 60% at 50% 85%, ${WVU.goldDim}33, transparent 70%),
            linear-gradient(180deg, transparent, rgba(0,0,0,0.5))
          `,
        }} />

        {/* Play button */}
        <div style={{
          position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
          width: 60, height: 60, borderRadius: 30,
          background: 'rgba(20,17,12,0.65)', backdropFilter: 'blur(12px)',
          border: `0.5px solid ${WVU.lineBold}`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <svg width="18" height="22" viewBox="0 0 18 22"><path d="M2 2v18l14-9L2 2z" fill={WVU.gold}/></svg>
        </div>

        {/* Top strip: LIVE + QC — pushed below iOS status bar */}
        <div style={{
          position: 'absolute', top: 72, left: 14, right: 14,
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        }}>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 6,
            padding: '4px 9px', borderRadius: 4,
            background: 'rgba(234,170,0,0.9)',
          }}>
            <div style={{
              width: 6, height: 6, borderRadius: 3, background: WVU.blueDim,
              animation: 'mtnPulse 1.4s ease-in-out infinite',
            }} />
            <div style={{ fontFamily: DS.sans, fontSize: 10, fontWeight: 800, letterSpacing: '0.14em', color: WVU.blueDim }}>
              LIVE · MULTI-ANGLE
            </div>
          </div>
          <div style={{
            fontFamily: DS.mono, fontSize: 9, color: WVU.cream,
            padding: '4px 8px', borderRadius: 4,
            background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(6px)',
            letterSpacing: '0.08em',
          }}>
            GATE 3 · CHECKED IN
          </div>
        </div>

        {/* Bottom: scoreboard */}
        <div style={{
          position: 'absolute', left: 0, right: 0, bottom: 0,
          padding: '14px 16px 12px',
          background: 'linear-gradient(180deg, transparent, rgba(0,0,0,0.7))',
          display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 12,
        }}>
          <div>
            <div style={{ fontFamily: DS.sans, fontSize: 10, fontWeight: 600, color: WVU.gold, letterSpacing: '0.12em', textTransform: 'uppercase' }}>
              {g.clock}
            </div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginTop: 4 }}>
              <div>
                <div style={{ fontFamily: DS.sans, fontSize: 10, color: WVU.creamDim, letterSpacing: '0.1em' }}>WVU</div>
                <div style={{ fontFamily: DS.display, fontSize: 28, fontWeight: 900, color: WVU.gold, lineHeight: 1, fontVariantNumeric: 'tabular-nums' }}>
                  {g.score.us}
                </div>
              </div>
              <div style={{ fontFamily: DS.mono, fontSize: 12, color: WVU.creamDim }}>—</div>
              <div>
                <div style={{ fontFamily: DS.sans, fontSize: 10, color: WVU.creamDim, letterSpacing: '0.1em' }}>KSU</div>
                <div style={{ fontFamily: DS.display, fontSize: 28, fontWeight: 900, color: WVU.cream, lineHeight: 1, fontVariantNumeric: 'tabular-nums' }}>
                  {g.score.them}
                </div>
              </div>
            </div>
          </div>
          <div style={{
            fontFamily: DS.sans, fontSize: 10, color: WVU.creamDim, letterSpacing: '0.06em',
            textAlign: 'right', maxWidth: 160,
          }}>
            {g.down}<br/>
            <span style={{ color: WVU.cream }}>{g.lastPlay}</span>
          </div>
        </div>
      </div>

      {/* ─── TAB STRIP ────────────── */}
      <div style={{
        display: 'flex', padding: '14px 16px 0',
        borderBottom: `0.5px solid ${WVU.line}`,
      }}>
        {[
          { id: 'watch', label: 'Watch' },
          { id: 'stats', label: 'Stats' },
          { id: 'order', label: 'Order' },
          { id: 'chat',  label: 'Chat' },
        ].map(t => {
          const on = t.id === tab;
          return (
            <button key={t.id} onClick={() => setTab(t.id)} style={{
              flex: 1, padding: '10px 0 12px', border: 'none',
              background: 'transparent', cursor: 'pointer',
              fontFamily: DS.sans, fontSize: 13, fontWeight: 700,
              color: on ? WVU.gold : WVU.creamDim,
              letterSpacing: '-0.01em',
              borderBottom: on ? `2px solid ${WVU.gold}` : '2px solid transparent',
              marginBottom: -0.5,
            }}>{t.label}</button>
          );
        })}
      </div>

      {/* ─── TAB BODY ────────────── */}
      <div style={{ padding: '16px 16px 0' }}>
        {tab === 'watch' && <WatchTab />}
        {tab === 'stats' && <StatsTab g={g} />}
        {tab === 'order' && <OrderTab />}
        {tab === 'chat'  && <ChatTab />}
      </div>
    </div>
  );
}

function WatchTab() {
  const angles = [
    { id: 'broadcast', label: 'Broadcast', sub: 'ESPN+ · HD', variant: 'stadium' },
    { id: 'sideline',  label: 'Sideline',  sub: 'Near Tunnel', variant: 'gold' },
    { id: 'sky',       label: 'Sky Cam',   sub: 'End zone',    variant: 'dusk' },
    { id: 'briscoe',   label: 'Briscoe',   sub: 'Mic\'d up',   variant: 'ember' },
  ];
  return (
    <div>
      <div style={{ fontFamily: DS.sans, fontSize: 10, fontWeight: 600, color: WVU.gold, letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 10 }}>
        MULTI-ANGLE · 4 FEEDS
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
        {angles.map(a => (
          <div key={a.id} style={{
            borderRadius: DS.r.md, overflow: 'hidden', border: `0.5px solid ${WVU.line}`,
            cursor: 'pointer', position: 'relative',
          }}>
            <WarmHero h={110} variant={a.variant} caption={null} />
            <div style={{
              position: 'absolute', inset: 0,
              display: 'flex', flexDirection: 'column', justifyContent: 'flex-end',
              padding: 10, background: 'linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.75))',
            }}>
              <div style={{ fontFamily: DS.sans, fontSize: 12, fontWeight: 700, color: WVU.cream }}>
                {a.label}
              </div>
              <div style={{ fontFamily: DS.mono, fontSize: 9, color: WVU.creamDim, letterSpacing: '0.08em', marginTop: 2 }}>
                {a.sub}
              </div>
            </div>
          </div>
        ))}
      </div>

      <div style={{
        marginTop: 18, padding: 14,
        background: `linear-gradient(145deg, ${WVU.ink2}, ${WVU.ink3})`,
        border: `0.5px solid ${WVU.lineWarm}`, borderRadius: DS.r.lg,
      }}>
        <div style={{ fontFamily: DS.sans, fontSize: 10, fontWeight: 600, color: WVU.gold, letterSpacing: '0.12em', textTransform: 'uppercase' }}>
          AT THE GAME · CHECKED IN
        </div>
        <div style={{ fontFamily: DS.sans, fontSize: 14, fontWeight: 700, color: WVU.cream, marginTop: 6 }}>
          Your seat cam
        </div>
        <div style={{ fontFamily: DS.sans, fontSize: 11, color: WVU.creamDim, marginTop: 3, lineHeight: 1.4 }}>
          Sec 108 Row 14 · Mute announcer, keep radio call, auto replay on big plays.
        </div>
        <div style={{ display: 'flex', gap: 6, marginTop: 10 }}>
          <MtnButton size="sm" variant="primary">Start seat cam</MtnButton>
          <MtnButton size="sm" variant="ghost">Radio call</MtnButton>
        </div>
      </div>
    </div>
  );
}

function StatsTab({ g }) {
  const rows = [
    ['Total yards', g.stats.home.totYds, g.stats.away.totYds],
    ['Passing',     g.stats.home.pass,   g.stats.away.pass],
    ['Rushing',     g.stats.home.rush,   g.stats.away.rush],
    ['Turnovers',   g.stats.home.to,     g.stats.away.to],
    ['3rd down',    g.stats.home.third,  g.stats.away.third],
    ['Possession',  g.stats.home.poss,   g.stats.away.poss],
  ];
  return (
    <div>
      <div style={{ fontFamily: DS.sans, fontSize: 10, fontWeight: 600, color: WVU.gold, letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 10 }}>
        LIVE STATS · BOX SCORE
      </div>
      {/* Column headers */}
      <div style={{
        display: 'grid', gridTemplateColumns: '1fr 50px 50px', gap: 8,
        padding: '0 4px 8px', borderBottom: `0.5px solid ${WVU.line}`,
      }}>
        <div />
        <div style={{ fontFamily: DS.sans, fontSize: 12, fontWeight: 800, color: WVU.gold, textAlign: 'right' }}>WVU</div>
        <div style={{ fontFamily: DS.sans, fontSize: 12, fontWeight: 800, color: WVU.creamDim, textAlign: 'right' }}>KSU</div>
      </div>
      {rows.map((r, i) => (
        <div key={i} style={{
          display: 'grid', gridTemplateColumns: '1fr 50px 50px', gap: 8, alignItems: 'center',
          padding: '10px 4px', borderBottom: `0.5px solid ${WVU.line}`,
        }}>
          <div style={{ fontFamily: DS.sans, fontSize: 12, color: WVU.creamDim, letterSpacing: '-0.01em' }}>{r[0]}</div>
          <div style={{ fontFamily: DS.sans, fontSize: 13, fontWeight: 700, color: WVU.cream, textAlign: 'right', fontVariantNumeric: 'tabular-nums' }}>{r[1]}</div>
          <div style={{ fontFamily: DS.sans, fontSize: 13, fontWeight: 700, color: WVU.creamDim, textAlign: 'right', fontVariantNumeric: 'tabular-nums' }}>{r[2]}</div>
        </div>
      ))}

      {/* Briscoe spotlight — NIL athlete Derek follows */}
      <div style={{
        marginTop: 18, padding: 14,
        background: `linear-gradient(145deg, rgba(234,170,0,0.10), ${WVU.ink2})`,
        border: `0.5px solid ${WVU.gold}33`, borderRadius: DS.r.lg,
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 8 }}>
          <div style={{ fontFamily: DS.sans, fontSize: 10, fontWeight: 600, color: WVU.gold, letterSpacing: '0.12em', textTransform: 'uppercase' }}>
            YOUR ATHLETE · LIVE
          </div>
          <div style={{ fontFamily: DS.sans, fontSize: 11, color: WVU.cream, fontWeight: 700 }}>#7 Briscoe</div>
        </div>
        <div style={{ display: 'flex', gap: 14 }}>
          <GDStat n="241" l="PASS YDS" big />
          <GDStat n="2" l="PASS TD" />
          <GDStat n="18/24" l="CMP" />
          <GDStat n="0" l="INT" />
        </div>
      </div>
    </div>
  );
}

function GDStat({ n, l, big }) {
  return (
    <div style={{ flex: 1 }}>
      <div style={{
        fontFamily: DS.display, fontSize: big ? 22 : 18, fontWeight: 800,
        color: WVU.cream, fontVariantNumeric: 'tabular-nums', letterSpacing: '-0.02em',
      }}>{n}</div>
      <div style={{ fontFamily: DS.mono, fontSize: 8, color: WVU.creamDim, letterSpacing: '0.1em', marginTop: 2 }}>{l}</div>
    </div>
  );
}

function OrderTab() {
  const [cart, setCart] = React.useState(2);
  const items = [
    { name: 'Mountaineer Dog',        price: '$8',  sub: 'All-beef + kraut',      pop: '★ Most ordered here' },
    { name: 'WV Pepperoni Roll',      price: '$11', sub: 'Classic · 2 pack',      pop: null },
    { name: 'Stadium Burger',         price: '$13', sub: 'Single + fries',        pop: null },
    { name: 'Pretzel · Cheese',       price: '$8',  sub: 'Bavarian',              pop: null },
    { name: 'Bottled Water',          price: '$5',  sub: '20 oz',                 pop: null },
    { name: 'Draft Beer · Local',     price: '$14', sub: '21+ only',              pop: null },
  ];
  return (
    <div>
      <div style={{
        padding: 12, marginBottom: 12,
        background: 'rgba(245,236,217,0.05)',
        border: `0.5px solid ${WVU.line}`, borderRadius: DS.r.md,
        display: 'flex', alignItems: 'center', gap: 10,
      }}>
        <div style={{ width: 6, height: 6, borderRadius: 3, background: WVU.gold }} />
        <div style={{ flex: 1 }}>
          <div style={{ fontFamily: DS.sans, fontSize: 12, fontWeight: 600, color: WVU.cream }}>
            Deliver to Sec 108 · Row 14 · Seat 3
          </div>
          <div style={{ fontFamily: DS.mono, fontSize: 9, color: WVU.creamDim, letterSpacing: '0.08em', marginTop: 2 }}>
            18 MIN AVG · VISA •••• 4242
          </div>
        </div>
      </div>

      <div style={{ fontFamily: DS.sans, fontSize: 10, fontWeight: 600, color: WVU.gold, letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 10 }}>
        CONCESSIONS · NEAR YOU
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {items.map((it, i) => (
          <div key={i} style={{
            display: 'flex', alignItems: 'center', gap: 12,
            padding: 12, background: WVU.ink2,
            border: `0.5px solid ${WVU.line}`, borderRadius: DS.r.md,
          }}>
            <div style={{
              width: 44, height: 44, borderRadius: DS.r.sm,
              background: `linear-gradient(135deg, ${WVU.ink3}, ${WVU.blueDim})`,
              flexShrink: 0,
            }} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontFamily: DS.sans, fontSize: 13, fontWeight: 700, color: WVU.cream }}>{it.name}</div>
              <div style={{ fontFamily: DS.sans, fontSize: 11, color: WVU.creamDim, marginTop: 2 }}>{it.sub}</div>
              {it.pop && (
                <div style={{ fontFamily: DS.sans, fontSize: 10, fontWeight: 600, color: WVU.gold, letterSpacing: '0.1em', textTransform: 'uppercase', marginTop: 4 }}>
                  {it.pop}
                </div>
              )}
            </div>
            <div style={{ fontFamily: DS.sans, fontSize: 14, fontWeight: 800, color: WVU.cream, fontVariantNumeric: 'tabular-nums' }}>
              {it.price}
            </div>
            <button onClick={() => setCart(c => c + 1)} style={{
              width: 28, height: 28, borderRadius: 14,
              background: WVU.gold, border: 'none', cursor: 'pointer',
              fontFamily: DS.sans, fontSize: 18, fontWeight: 700, color: WVU.blueDim,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              paddingBottom: 2,
            }}>+</button>
          </div>
        ))}
      </div>

      {/* sticky checkout */}
      <div style={{
        position: 'sticky', bottom: 80, marginTop: 14,
        padding: 12, background: 'rgba(20,17,12,0.88)', backdropFilter: 'blur(16px)',
        border: `0.5px solid ${WVU.gold}44`, borderRadius: DS.r.pill,
        display: 'flex', alignItems: 'center', gap: 12,
      }}>
        <div style={{
          width: 28, height: 28, borderRadius: 14,
          background: WVU.gold, color: WVU.blueDim,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: DS.sans, fontSize: 12, fontWeight: 800,
        }}>{cart}</div>
        <div style={{ flex: 1, fontFamily: DS.sans, fontSize: 13, fontWeight: 600, color: WVU.cream }}>
          ${cart * 11} · 18 min delivery
        </div>
        <MtnButton size="sm">Checkout</MtnButton>
      </div>
    </div>
  );
}

function ChatTab() {
  const msgs = [
    { h: '@rachm_77',   t: 'now', body: 'WHAT A THROW. Let\'s go!!!' },
    { h: '@blueinsec107',t: '8s',  body: 'Right in front of me. He was WIDE open.' },
    { h: DEREK.handle,  t: '12s', body: 'Called it. Told my wife "fade top shelf".',  mine: true },
    { h: '@ee_morgy',   t: '22s', body: 'Defense gotta get back on the field sharp' },
    { h: '@goldlot_mike',t:'35s', body: 'Tailgate had chili beans. We\'re ready.' },
    { h: '@seat12c',    t: '1m',  body: 'Announcer gave Briscoe "country roads" line 😂' },
  ];
  return (
    <div>
      <div style={{ fontFamily: DS.sans, fontSize: 10, fontWeight: 600, color: WVU.gold, letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 10 }}>
        IN-GAME CHAT · SECTION 108 · 214 FANS
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 14 }}>
        {msgs.map((m, i) => (
          <div key={i} style={{
            padding: 10,
            background: m.mine ? 'rgba(234,170,0,0.10)' : WVU.ink2,
            border: `0.5px solid ${m.mine ? WVU.gold + '44' : WVU.line}`,
            borderRadius: DS.r.md,
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 4 }}>
              <div style={{
                fontFamily: DS.sans, fontSize: 11, fontWeight: 700,
                color: m.mine ? WVU.gold : WVU.cream,
              }}>{m.h}</div>
              <div style={{ fontFamily: DS.mono, fontSize: 9, color: WVU.creamDim, letterSpacing: '0.08em' }}>{m.t}</div>
            </div>
            <div style={{ fontFamily: DS.sans, fontSize: 12, color: WVU.cream, lineHeight: 1.4, letterSpacing: '-0.005em' }}>{m.body}</div>
          </div>
        ))}
      </div>

      {/* Compose */}
      <div style={{
        display: 'flex', gap: 8, alignItems: 'center',
        padding: 10, background: WVU.ink2, borderRadius: DS.r.pill,
        border: `0.5px solid ${WVU.line}`,
      }}>
        <div style={{
          width: 26, height: 26, borderRadius: 13,
          background: `linear-gradient(135deg, ${WVU.goldDim}, ${WVU.gold})`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: DS.sans, fontSize: 10, fontWeight: 800, color: WVU.blueDim, flexShrink: 0,
        }}>DC</div>
        <div style={{ flex: 1, fontFamily: DS.sans, fontSize: 12, color: WVU.creamDim }}>
          Say something, Derek…
        </div>
        <div style={{
          padding: '4px 10px', borderRadius: 10,
          background: WVU.gold, color: WVU.blueDim,
          fontFamily: DS.sans, fontSize: 11, fontWeight: 700,
        }}>Post</div>
      </div>
    </div>
  );
}

Object.assign(window, { ScreenGameDay });