// Play screen
function PlayScreen({ onOpenDraft, onOpenXi }) {
  const T = window.T;

  const Mode = ({ icon, color, title, desc, cost }) => (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 14,
      background: T.card, borderRadius: 16, padding: 16,
      marginBottom: 10, cursor: 'pointer',
    }}>
      <div style={{
        width: 48, height: 48, borderRadius: 12,
        background: T.navy700,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontSize: 22, color: color || T.gold400, flexShrink: 0,
      }}>{icon}</div>
      <div style={{ flex: 1 }}>
        <div style={{
          fontFamily: 'Bakbak One, sans-serif', fontSize: 16,
          letterSpacing: '0.03em', color: T.text, marginBottom: 2,
        }}>{title}</div>
        <div style={{ fontSize: 11.5, color: T.textMute }}>{desc}</div>
      </div>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 4,
        background: 'rgba(232,184,32,0.10)', borderRadius: 100,
        padding: '4px 10px',
        fontSize: 11, fontWeight: 700, color: T.gold400,
      }}>
        <HexIcon size={11} /> {cost}
      </div>
    </div>
  );

  return (
    <Content>
      <AppHeader left={<PageWordmark text="PLAY" />} />
      <PageTitleBlock title="Choose Your Mode" sub="Each mode costs tokens to play" />

      {/* Hero */}
      <div style={{
        background: 'linear-gradient(135deg, #172340 0%, #0D1828 100%)',
        borderRadius: 20, padding: 24, marginBottom: 16,
        position: 'relative', overflow: 'hidden',
        border: `1px solid ${T.border}`,
      }}>
        <div style={{
          position: 'absolute', top: -40, right: -40, width: 180, height: 180,
          background: 'radial-gradient(circle, rgba(232,184,32,0.15) 0%, transparent 70%)',
          pointerEvents: 'none',
        }} />
        <div style={{
          fontFamily: 'DM Sans', fontSize: 10, letterSpacing: '0.2em',
          color: T.gold400, textTransform: 'uppercase', marginBottom: 8,
          position: 'relative',
        }}>Featured · Today</div>
        <div style={{
          fontFamily: 'Bakbak One, sans-serif', fontSize: 26, letterSpacing: '0.02em',
          marginBottom: 6, color: T.text, position: 'relative',
        }}>DRAFT MODE</div>
        <div style={{
          fontSize: 13, color: T.textSec, marginBottom: 16, position: 'relative',
        }}>
          Random year. 3 picks per position. Compete for the best rated squad.
        </div>
        <button onClick={onOpenDraft} style={{
          background: T.gold500, color: T.navy950,
          border: 'none', borderRadius: 100, padding: '10px 22px',
          fontSize: 13, fontWeight: 700, fontFamily: 'DM Sans',
          cursor: 'pointer', position: 'relative',
          display: 'inline-flex', alignItems: 'center', gap: 6,
        }}>Play Now <span style={{ fontSize: 14 }}>→</span></button>
      </div>

      <SectionLabel>All Modes</SectionLabel>

      <div onClick={onOpenDraft}>
        <Mode icon="⚡" title="DRAFT MODE"    desc="Build the highest rated team"   cost={3} />
      </div>
      <div onClick={onOpenXi}>
        <Mode icon="📋" title="NAME THE XI"   desc="Iconic match lineups"           cost={2} />
      </div>
      <div style={{opacity: 0.45, pointerEvents:'none'}}>
        <Mode icon="🏆" color={T.greenLt} title="ROAD TO GLORY" desc="Coming soon — Swipe through 32 teams" cost={5} />
      </div>

      <div style={{
        marginTop: 20, padding: 16, background: T.card,
        borderRadius: 16, border: `1px dashed ${T.border}`,
        textAlign: 'center',
      }}>
        <div style={{
          fontFamily: 'DM Sans', fontSize: 10, letterSpacing: '0.2em',
          color: T.gold400, textTransform: 'uppercase', marginBottom: 4,
        }}>Coming Soon</div>
        <div style={{ fontSize: 13, color: T.textSec }}>New modes dropping every season</div>
      </div>
    </Content>
  );
}
window.PlayScreen = PlayScreen;