// screens-commerce.jsx — Three commerce moments: Tickets, Merch, NIL.
// Each one short but shows the breadth of the spine-driven experience.

// ══════════════════════════════════════════════════════════════
// TICKETS — Derek's seats for Saturday, add-ons, upgrades
// ══════════════════════════════════════════════════════════════
function ScreenTickets({ onBack }) {
  const t = TICKET_OFFER;
  const g = NEXT_MOMENT;
  return (
    <div style={{
      position: 'absolute', inset: 0, overflow: 'auto',
      background: WVU.ink, color: WVU.cream,
      paddingTop: 60, paddingBottom: 120,
    }} className="mtn-scrollbar">

      {/* Hero */}
      <div style={{ position: 'relative' }}>
        <WarmHero
          h={240}
          variant="dusk"
          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
          }
        />
        <div style={{
          position: 'absolute', left: 0, right: 0, bottom: 0, height: '70%',
          background: 'linear-gradient(180deg, transparent, rgba(0,0,0,0.75))',
          pointerEvents: 'none',
        }} />
        <div style={{ position: 'absolute', left: 20, right: 20, bottom: 20 }}>
          <div style={{ fontFamily: DS.sans, fontSize: 10, fontWeight: 600, color: WVU.gold, letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 8 }}>
            YOUR SEATS · SATURDAY
          </div>
          <div style={{
            fontFamily: DS.display, fontSize: 26, fontWeight: 800,
            letterSpacing: '-0.025em', lineHeight: 1.02, color: WVU.cream,
          }}>
            {g.matchup}
          </div>
          <div style={{ fontFamily: DS.sans, fontSize: 12, color: WVU.creamDim, marginTop: 6, lineHeight: 1.4 }}>
            {g.date} · {g.kickoff}<br/>{g.venue}
          </div>
        </div>
      </div>

      {/* Ticket card — mobile wallet style */}
      <div style={{ padding: '16px 16px 0' }}>
        <div style={{
          background: `linear-gradient(150deg, ${WVU.blueDim}, ${WVU.blue} 60%, #001830)`,
          borderRadius: DS.r.lg, overflow: 'hidden',
          boxShadow: WVU.sh2,
          border: `0.5px solid ${WVU.blueLite}44`,
        }}>
          <div style={{
            padding: '16px 18px 14px',
            borderBottom: `0.5px dashed ${WVU.gold}44`,
            display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start',
          }}>
            <div>
              <FlyingWV size={22} color={WVU.gold} />
              <div style={{ fontFamily: DS.sans, fontSize: 10, fontWeight: 600, color: WVU.gold, letterSpacing: '0.12em', textTransform: 'uppercase', marginTop: 8 }}>
                SEASON TICKET HOLDER · YEAR {DEREK.seasonTickets.yearsHeld}
              </div>
              <div style={{ fontFamily: DS.display, fontSize: 16, fontWeight: 800, color: WVU.cream, marginTop: 4, letterSpacing: '-0.01em' }}>
                {DEREK.firstName} {DEREK.lastName}
              </div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div style={{ fontFamily: DS.sans, fontSize: 10, fontWeight: 600, color: WVU.goldLite, letterSpacing: '0.12em', textTransform: 'uppercase' }}>GATE</div>
              <div style={{ fontFamily: DS.display, fontSize: 22, fontWeight: 900, color: WVU.cream, letterSpacing: '-0.02em' }}>
                {t.mySeats.gate.replace('Gate ', '')}
              </div>
            </div>
          </div>
          <div style={{
            padding: '14px 18px', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10,
          }}>
            {[
              ['SECTION', t.mySeats.section],
              ['ROW',     t.mySeats.row],
              ['SEAT 1',  '3'],
              ['SEAT 2',  '4'],
            ].map(([l, v]) => (
              <div key={l}>
                <div style={{ fontFamily: DS.mono, fontSize: 8, color: WVU.goldLite, letterSpacing: '0.14em' }}>{l.replace(/\s\d+$/, '')}</div>
                <div style={{ fontFamily: DS.display, fontSize: 20, fontWeight: 800, color: WVU.cream, marginTop: 3, letterSpacing: '-0.02em' }}>{v}</div>
              </div>
            ))}
          </div>
          {/* Barcode strip */}
          <div style={{
            padding: '0 18px 16px',
          }}>
            <div style={{
              height: 38, borderRadius: 4,
              background: `repeating-linear-gradient(90deg, ${WVU.cream} 0 2px, transparent 2px 4px, ${WVU.cream} 4px 5px, transparent 5px 8px, ${WVU.cream} 8px 9px, transparent 9px 11px)`,
              opacity: 0.92,
            }} />
            <div style={{ fontFamily: DS.mono, fontSize: 8, color: WVU.goldLite, letterSpacing: '0.2em', textAlign: 'center', marginTop: 8 }}>
              SCAN AT GATE · TAP & GO
            </div>
          </div>
        </div>
      </div>

      {/* Share · Tailgate */}
      <div style={{ padding: '16px 16px 0' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
          <MtnButton variant="ghost" full size="md" icon={
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
              <path d="M7 1v8m0-8l-3 3m3-3l3 3M2 10v2a1 1 0 001 1h8a1 1 0 001-1v-2" stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round"/>
            </svg>
          }>Share seat 4</MtnButton>
          <MtnButton variant="ghost" full size="md" icon={
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
              <circle cx="7" cy="7" r="5.5" stroke="currentColor" strokeWidth="1.4" fill="none"/>
              <path d="M7 4v3l2 2" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
            </svg>
          }>Blue Lot tailgate</MtnButton>
        </div>
      </div>

      {/* Upgrade offer */}
      <div style={{ padding: '16px 16px 0' }}>
        <MtnCard warm padding={0}>
          <div style={{ display: 'flex', gap: 12, padding: 14 }}>
            <WarmTile h={72} w={72} variant="gold" label={null} style={{ borderRadius: DS.r.md, overflow: 'hidden', flexShrink: 0 }} />
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: DS.sans, fontSize: 10, fontWeight: 600, color: WVU.gold, letterSpacing: '0.12em', textTransform: 'uppercase' }}>
                ONE-GAME UPGRADE · $65
              </div>
              <div style={{ fontFamily: DS.sans, fontSize: 14, fontWeight: 700, color: WVU.cream, marginTop: 4, letterSpacing: '-0.005em', lineHeight: 1.2 }}>
                Try the Mountaineer Club
              </div>
              <div style={{ fontFamily: DS.sans, fontSize: 11, color: WVU.creamDim, marginTop: 3, lineHeight: 1.4 }}>
                Indoor, plated meal, private entry. Move both of your seats Saturday only.
              </div>
            </div>
          </div>
          <div style={{ padding: '0 14px 14px' }}>
            <MtnButton full size="md" variant="primary">Preview & upgrade</MtnButton>
          </div>
        </MtnCard>
      </div>

      {/* Parking / arrival */}
      <div style={{ padding: '16px 16px 0' }}>
        <div style={{ fontFamily: DS.sans, fontSize: 10, fontWeight: 600, color: WVU.gold, letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 8, paddingLeft: 2 }}>
          YOUR ARRIVAL · INCLUDED
        </div>
        <MtnCard padding={0}>
          <div style={{
            padding: 14, display: 'flex', alignItems: 'center', gap: 12,
            borderBottom: `0.5px solid ${WVU.line}`,
          }}>
            <div style={{ width: 36, height: 36, borderRadius: DS.r.sm, background: WVU.blue, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <svg width="16" height="16" viewBox="0 0 16 16"><rect x="3" y="5" width="10" height="7" rx="1" fill={WVU.gold}/><circle cx="5" cy="13" r="1.5" fill={WVU.cream}/><circle cx="11" cy="13" r="1.5" fill={WVU.cream}/></svg>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: DS.sans, fontSize: 13, fontWeight: 700, color: WVU.cream }}>Blue Lot parking</div>
              <div style={{ fontFamily: DS.sans, fontSize: 11, color: WVU.creamDim, marginTop: 2 }}>Included · opens 11am · 0.4 mi to Gate 3</div>
            </div>
            <div style={{ fontFamily: DS.sans, fontSize: 11, fontWeight: 600, color: WVU.gold, letterSpacing: '0.1em', textTransform: 'uppercase' }}>QR</div>
          </div>
          <div style={{ padding: 14, display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ width: 36, height: 36, borderRadius: DS.r.sm, background: WVU.ink3, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                <path d="M3 13V7l5-4 5 4v6M6 13V9h4v4" stroke={WVU.gold} strokeWidth="1.4" fill="none" strokeLinejoin="round"/>
              </svg>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: DS.sans, fontSize: 13, fontWeight: 700, color: WVU.cream }}>Host a tailgate</div>
              <div style={{ fontFamily: DS.sans, fontSize: 11, color: WVU.creamDim, marginTop: 2 }}>14 friends already RSVP'd to Blue Lot · 11am</div>
            </div>
            <svg width="8" height="14" viewBox="0 0 8 14" style={{ opacity: 0.5 }}>
              <path d="M1 1l6 6-6 6" stroke={WVU.cream} strokeWidth="1.6" fill="none" strokeLinecap="round"/>
            </svg>
          </div>
        </MtnCard>
      </div>
    </div>
  );
}

// ══════════════════════════════════════════════════════════════
// MERCH — Personalized drop, Derek's size pre-loaded
// ══════════════════════════════════════════════════════════════
function ScreenMerch({ onBack }) {
  const hero = MERCH_FEATURED.hero;
  return (
    <div style={{
      position: 'absolute', inset: 0, overflow: 'auto',
      background: WVU.ink, color: WVU.cream,
      paddingTop: 60, paddingBottom: 120,
    }} className="mtn-scrollbar">

      {/* Hero merch card */}
      <div style={{ position: 'relative' }}>
        <WarmHero h={260} variant="gold" caption={null} />
        <div style={{
          position: 'absolute', left: 0, right: 0, bottom: 0, padding: '16px 20px 20px',
          background: 'linear-gradient(180deg, transparent, rgba(0,0,0,0.55))',
        }}>
          <div style={{ fontFamily: DS.sans, fontSize: 10, fontWeight: 600, color: WVU.gold, letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 6 }}>
            SATURDAY DROP · LIVE TIL KICKOFF
          </div>
          <div style={{
            fontFamily: DS.display, fontSize: 28, fontWeight: 800,
            letterSpacing: '-0.025em', lineHeight: 1.02, color: WVU.cream,
          }}>
            {hero.title}
          </div>
          <div style={{ fontFamily: DS.sans, fontSize: 12, color: WVU.creamDim, marginTop: 4 }}>
            {hero.sub} · {hero.stock} left
          </div>
        </div>
      </div>

      {/* Size prefill row — the spine, visible */}
      <div style={{ padding: '18px 16px 0' }}>
        <div style={{
          padding: '12px 14px',
          background: 'linear-gradient(90deg, rgba(234,170,0,0.10), rgba(20,17,12,0.3))',
          border: `0.5px solid ${WVU.gold}44`, borderRadius: DS.r.lg,
          display: 'flex', alignItems: 'center', gap: 10,
        }}>
          <div style={{
            width: 36, height: 36, borderRadius: 18,
            background: WVU.gold, color: WVU.blueDim,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: DS.display, fontSize: 16, fontWeight: 900,
            flexShrink: 0,
          }}>{hero.size}</div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontFamily: DS.sans, fontSize: 12, fontWeight: 700, color: WVU.cream }}>
              Size {hero.size} · {hero.colorway}
            </div>
            <div style={{ fontFamily: DS.sans, fontSize: 10, color: WVU.creamDim, marginTop: 2 }}>
              From your last order, Oct 19
            </div>
          </div>
          <MtnButton size="sm" variant="ghost" style={{ flexShrink: 0 }}>Change</MtnButton>
        </div>
      </div>

      {/* Price + buy */}
      <div style={{ padding: '14px 16px 0', display: 'flex', alignItems: 'center', gap: 12 }}>
        <div style={{
          fontFamily: DS.display, fontSize: 32, fontWeight: 900, color: WVU.cream,
          letterSpacing: '-0.03em', fontVariantNumeric: 'tabular-nums',
        }}>{hero.price}</div>
        <div style={{ flex: 1 }} />
        <MtnButton size="lg">Add to cart</MtnButton>
      </div>
      <div style={{ padding: '10px 18px 0', fontFamily: DS.mono, fontSize: 10, color: WVU.creamDim, letterSpacing: '0.08em' }}>
        VISA •••• 4242 · SHIPS TO MORGANTOWN · FREE
      </div>

      {/* Because you follow */}
      <div style={{ padding: '22px 16px 0' }}>
        <div style={{ fontFamily: DS.sans, fontSize: 10, fontWeight: 600, color: WVU.gold, letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 10, paddingLeft: 2 }}>
          PICKED FOR YOU · DEREK
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          {MERCH_ITEMS.map(item => (
            <MerchTile key={item.id} item={item} />
          ))}
        </div>
      </div>

      {/* Last order strip */}
      <div style={{ padding: '22px 16px 0' }}>
        <MtnCard padding={14}>
          <div style={{ fontFamily: DS.sans, fontSize: 10, fontWeight: 600, color: WVU.creamDim, letterSpacing: '0.12em', marginBottom: 4, textTransform: 'uppercase' }}>
            YOUR LAST ORDER · DELIVERED OCT 22
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <WarmTile w={44} h={44} variant="gold" label={null} style={{ borderRadius: DS.r.sm, overflow: 'hidden', flexShrink: 0 }} />
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: DS.sans, fontSize: 13, fontWeight: 700, color: WVU.cream }}>
                {LAST_ORDER.item}
              </div>
              <div style={{ fontFamily: DS.sans, fontSize: 11, color: WVU.creamDim, marginTop: 2 }}>
                {LAST_ORDER.size} · {LAST_ORDER.color}
              </div>
            </div>
            <MtnButton size="sm" variant="ghost">Reorder</MtnButton>
          </div>
        </MtnCard>
      </div>
    </div>
  );
}

function MerchTile({ item }) {
  return (
    <div style={{
      borderRadius: DS.r.md, overflow: 'hidden', border: `0.5px solid ${WVU.line}`,
      background: WVU.ink2, cursor: 'pointer',
    }}>
      <div style={{ position: 'relative' }}>
        <WarmTile h={150} variant={item.img} label={null} />
        {item.tag && (
          <div style={{
            position: 'absolute', top: 8, left: 8,
            padding: '3px 7px', borderRadius: 3,
            background: 'rgba(20,17,12,0.85)', backdropFilter: 'blur(6px)',
            fontFamily: DS.mono, fontSize: 8, fontWeight: 700, color: WVU.gold,
            letterSpacing: '0.1em',
          }}>{item.tag}</div>
        )}
      </div>
      <div style={{ padding: 10 }}>
        <div style={{ fontFamily: DS.sans, fontSize: 12, fontWeight: 700, color: WVU.cream, lineHeight: 1.25, overflow: 'hidden', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical' }}>
          {item.title}
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginTop: 6 }}>
          <div style={{ fontFamily: DS.sans, fontSize: 13, fontWeight: 800, color: WVU.cream, fontVariantNumeric: 'tabular-nums' }}>
            {item.price}
          </div>
          {item.size !== '—' && (
            <div style={{ fontFamily: DS.sans, fontSize: 10, fontWeight: 600, color: WVU.gold, letterSpacing: '0.1em', textTransform: 'uppercase' }}>
              {item.size}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

// ══════════════════════════════════════════════════════════════
// NIL — Follow / tip / subscribe / shop athlete drops
// ══════════════════════════════════════════════════════════════
function ScreenNIL({ onBack }) {
  const a = NIL_ATHLETES[0];
  const [tipIdx, setTipIdx] = React.useState(2); // $50 selected
  return (
    <div style={{
      position: 'absolute', inset: 0, overflow: 'auto',
      background: WVU.ink, color: WVU.cream,
      paddingTop: 60, paddingBottom: 120,
    }} className="mtn-scrollbar">

      {/* Hero */}
      <div style={{ position: 'relative', height: 300, overflow: 'hidden', background: '#0e0c06' }}>
        <img
          src="mountaineer/assets/briscoe.png"
          alt={`${a.firstName} ${a.lastName}`}
          style={{
            position: 'absolute', inset: 0,
            width: '100%', height: '100%',
            objectFit: 'cover', objectPosition: '35% 18%',
          }}
        />
        {/* warm glow tint to match WVU palette */}
        <div style={{
          position: 'absolute', inset: 0,
          background: `radial-gradient(120% 80% at 0% 30%, rgba(234,170,0,0.22), transparent 55%)`,
          pointerEvents: 'none',
        }} />
        {/* Big #7 anchored top-right, decorative, behind text */}
        <div style={{
          position: 'absolute', top: 70, right: 10,
          fontFamily: DS.display, fontSize: 110, fontWeight: 900,
          color: WVU.gold, lineHeight: 0.85, letterSpacing: '-0.05em',
          opacity: 0.32, pointerEvents: 'none',
          textShadow: '0 4px 18px rgba(0,0,0,0.5)',
        }}>#{a.num}</div>
        <div style={{
          position: 'absolute', left: 0, right: 0, bottom: 0, padding: '0 20px 22px',
          background: 'linear-gradient(180deg, transparent, rgba(0,0,0,0.85))',
          paddingTop: 80,
        }}>
          <div style={{ fontFamily: DS.sans, fontSize: 10, fontWeight: 600, color: WVU.gold, letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 4 }}>
            NIL · WVU FOOTBALL
          </div>
          <div style={{
            fontFamily: DS.display, fontSize: 32, fontWeight: 900,
            letterSpacing: '-0.03em', lineHeight: 0.95, color: WVU.cream,
            textShadow: '0 2px 8px rgba(0,0,0,0.6)',
          }}>{a.firstName}<br/>{a.lastName}</div>
          <div style={{ fontFamily: DS.sans, fontSize: 11, color: WVU.creamDim, marginTop: 6 }}>
            #{a.num} · {a.pos} · {a.cls} · {a.home}
          </div>
        </div>
      </div>

      {/* Tier strip + supporter status */}
      <div style={{ padding: '14px 16px 0' }}>
        <div style={{
          padding: 14, background: 'linear-gradient(90deg, rgba(234,170,0,0.12), rgba(0,40,85,0.25))',
          border: `0.5px solid ${WVU.gold}44`, borderRadius: DS.r.lg,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
            <div style={{
              width: 24, height: 24, borderRadius: 12,
              background: WVU.gold, color: WVU.blueDim,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: DS.sans, fontSize: 11, fontWeight: 900,
            }}>✓</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: DS.sans, fontSize: 13, fontWeight: 700, color: WVU.cream }}>
                You're a Gold Tier supporter
              </div>
              <div style={{ fontFamily: DS.sans, fontSize: 11, color: WVU.creamDim, marginTop: 2 }}>
                Since Sep 2024 · $15/mo · next charge Nov 11
              </div>
            </div>
          </div>
          <div style={{ display: 'flex', gap: 12, paddingTop: 10, borderTop: `0.5px solid ${WVU.lineWarm}` }}>
            <TS n={a.supporters.toLocaleString()} l="SUPPORTERS" />
            <TS n="842" l="GOLD TIER" />
            <TS n={`$${(DEREK.memberSince ? 180 : 0)}`} l="YOU'VE GIVEN" hi />
          </div>
        </div>
      </div>

      {/* Tip */}
      <div style={{ padding: '16px 16px 0' }}>
        <div style={{ fontFamily: DS.sans, fontSize: 10, fontWeight: 600, color: WVU.gold, letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 10, paddingLeft: 2 }}>
          ONE-TIME TIP · DIRECT TO ATHLETE
        </div>
        <div style={{ display: 'flex', gap: 8, marginBottom: 10 }}>
          {a.tips.map((amt, i) => (
            <button key={amt} onClick={() => setTipIdx(i)} style={{
              flex: 1, height: 52, borderRadius: DS.r.md,
              background: i === tipIdx ? WVU.gold : WVU.ink2,
              color: i === tipIdx ? WVU.blueDim : WVU.cream,
              border: i === tipIdx ? 'none' : `0.5px solid ${WVU.line}`,
              fontFamily: DS.display, fontSize: 18, fontWeight: 800,
              letterSpacing: '-0.02em', cursor: 'pointer',
            }}>${amt}</button>
          ))}
        </div>
        <MtnButton full size="md">Send ${a.tips[tipIdx]} to Briscoe</MtnButton>
      </div>

      {/* Athlete drops */}
      <div style={{ padding: '22px 0 0' }}>
        <div style={{ padding: '0 18px 10px' }}>
          <div style={{ fontFamily: DS.sans, fontSize: 10, fontWeight: 600, color: WVU.gold, letterSpacing: '0.12em', textTransform: 'uppercase' }}>
            BRISCOE DROPS · EXCLUSIVE
          </div>
        </div>
        <div style={{ display: 'flex', gap: 10, overflowX: 'auto', padding: '0 16px 4px' }} className="mtn-scrollbar">
          {a.drops.map((d, i) => (
            <div key={i} style={{
              width: 168, flexShrink: 0, borderRadius: DS.r.md, overflow: 'hidden',
              background: WVU.ink2, border: `0.5px solid ${WVU.line}`,
            }}>
              <div style={{ position: 'relative' }}>
                <WarmTile h={160} variant={d.img} label={null} />
                <div style={{
                  position: 'absolute', top: 8, left: 8,
                  padding: '3px 7px', borderRadius: 3,
                  background: 'rgba(20,17,12,0.85)', backdropFilter: 'blur(6px)',
                  fontFamily: DS.mono, fontSize: 8, fontWeight: 700, color: WVU.gold,
                  letterSpacing: '0.12em',
                }}>{d.tag}</div>
              </div>
              <div style={{ padding: 10 }}>
                <div style={{
                  fontFamily: DS.sans, fontSize: 12, fontWeight: 700, color: WVU.cream,
                  lineHeight: 1.25, letterSpacing: '-0.005em',
                  overflow: 'hidden', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical',
                }}>{d.title}</div>
                <div style={{
                  fontFamily: DS.sans, fontSize: 13, fontWeight: 800, color: WVU.cream,
                  marginTop: 6, fontVariantNumeric: 'tabular-nums',
                }}>{d.price}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Tier ladder */}
      <div style={{ padding: '22px 16px 0' }}>
        <div style={{ fontFamily: DS.sans, fontSize: 10, fontWeight: 600, color: WVU.gold, letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 10, paddingLeft: 2 }}>
          SUPPORTER TIERS
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {a.supporterTiers.map(tier => (
            <div key={tier.id} style={{
              padding: 14,
              background: tier.current ? 'linear-gradient(90deg, rgba(234,170,0,0.12), rgba(20,17,12,0.3))' : WVU.ink2,
              border: `0.5px solid ${tier.current ? WVU.gold + '55' : WVU.line}`,
              borderRadius: DS.r.lg,
            }}>
              <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
                  <div style={{
                    fontFamily: DS.sans, fontSize: 13, fontWeight: 700,
                    color: tier.current ? WVU.gold : WVU.cream,
                  }}>{tier.name}</div>
                  {tier.current && (
                    <div style={{
                      fontFamily: DS.mono, fontSize: 8, fontWeight: 700,
                      color: WVU.gold, letterSpacing: '0.12em',
                      padding: '2px 6px', borderRadius: 3,
                      background: 'rgba(234,170,0,0.15)',
                    }}>YOU</div>
                  )}
                </div>
                <div style={{
                  fontFamily: DS.sans, fontSize: 13, fontWeight: 800, color: WVU.cream,
                  fontVariantNumeric: 'tabular-nums',
                }}>{tier.price}</div>
              </div>
              <div style={{
                fontFamily: DS.sans, fontSize: 11, color: WVU.creamDim, marginTop: 6, lineHeight: 1.4,
              }}>
                {tier.perks.join(' · ')}
              </div>
              <div style={{
                fontFamily: DS.mono, fontSize: 9, color: WVU.creamDim, letterSpacing: '0.1em', marginTop: 4,
              }}>{tier.subs.toLocaleString()} SUBSCRIBED</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

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

Object.assign(window, { ScreenTickets, ScreenMerch, ScreenNIL });