// CyberX Battle Pass — Web Dashboard (1440×900)

function WebFrame({ children, width = 1440, height = 900 }) {
  return (
    <div style={{
      width, height, borderRadius: 12, overflow: 'hidden',
      background: '#0a0c11', position: 'relative',
      boxShadow: '0 30px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05)',
      fontFamily: FONT_BODY, color: CX.white,
    }}>
      {/* Chrome bar */}
      <div style={{
        height: 36, background: '#1a1d24',
        display: 'flex', alignItems: 'center', padding: '0 14px',
        borderBottom: `1px solid ${CX.line}`,
      }}>
        <div style={{ display: 'flex', gap: 6, marginRight: 14 }}>
          <div style={{ width: 11, height: 11, borderRadius: '50%', background: '#ff5f57' }}/>
          <div style={{ width: 11, height: 11, borderRadius: '50%', background: '#febc2e' }}/>
          <div style={{ width: 11, height: 11, borderRadius: '50%', background: '#28c840' }}/>
        </div>
        <div style={{
          flex: 1, maxWidth: 540, height: 22, borderRadius: 4,
          background: '#0d0f14', border: `1px solid ${CX.line}`,
          display: 'flex', alignItems: 'center', padding: '0 10px', gap: 6,
          fontFamily: FONT_MONO, fontSize: 11, color: CX.textSec,
        }}>
          <svg width="10" height="10" viewBox="0 0 10 10"><path d="M3 1 L3 9 M7 1 L7 9 M1 3 L9 3 M1 7 L9 7" stroke={CX.green} strokeWidth="1"/></svg>
          cyberx.club/pass
        </div>
      </div>
      <div style={{ height: height - 36 }}>{children}</div>
    </div>
  );
}

function WebDashboard() {
  return (
    <WebFrame>
      <div style={{ position: 'absolute', inset: '36px 0 0 0', overflow: 'hidden' }}>
        <CXBackground accent={CX.red}/>
      </div>
      <div style={{ display: 'flex', height: '100%', position: 'relative' }}>
        {/* LEFT COLUMN — Profile + nav */}
        <div style={{
          width: 280, padding: 24, background: 'rgba(13,15,20,0.6)',
          borderRight: `1px solid ${CX.line}`, display: 'flex', flexDirection: 'column',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <CXMark size={32} color={CX.red} glow/>
            <div>
              <div style={{ fontFamily: FONT_DISPLAY, fontSize: 16, color: CX.white, letterSpacing: '0.06em' }}>
                CYBER<span style={{ color: CX.red }}>X</span>
              </div>
              <div style={{ fontFamily: FONT_DISPLAY, fontSize: 9, color: CX.textMute, letterSpacing: '0.24em' }}>BATTLE PASS</div>
            </div>
          </div>

          {/* Profile */}
          <div style={{
            marginTop: 24, padding: 16, borderRadius: 12,
            background: `linear-gradient(160deg, ${CX.card}, ${CX.black})`,
            border: `1px solid ${CX.line}`,
            display: 'flex', flexDirection: 'column', alignItems: 'center',
            position: 'relative', overflow: 'hidden',
          }}>
            <div style={{
              position: 'absolute', top: -30, right: -30, width: 120, height: 120,
              background: `radial-gradient(circle, ${CX.silverHi}22, transparent 70%)`,
            }}/>
            <Avatar size={72} tier={TIERS.knight} initials="TZ"/>
            <div style={{ marginTop: 10, fontFamily: FONT_DISPLAY, fontSize: 16, color: CX.white, letterSpacing: '0.06em' }}>TENZ_RU</div>
            <div style={{ marginTop: 2, fontFamily: FONT_DISPLAY, fontSize: 11, color: CX.silverHi, letterSpacing: '0.2em' }}>KNIGHT • УР. 15</div>
            <div style={{ marginTop: 10, width: '100%' }}>
              <XPBar value={3500} max={5000} color={CX.amber} label="До ур. 16" height={6}/>
            </div>
          </div>

          {/* Stats */}
          <div style={{ marginTop: 14, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6 }}>
            {[
              { l: 'Часов в клубе', v: '42' },
              { l: 'Заданий', v: '23' },
              { l: 'Рефералов', v: '4' },
              { l: 'Турниров', v: '2' },
            ].map(s => (
              <div key={s.l} style={{ padding: 8, borderRadius: 8, background: CX.card, border: `1px solid ${CX.line}` }}>
                <div style={{ fontFamily: FONT_MONO, fontSize: 16, color: CX.white, fontWeight: 600 }}>{s.v}</div>
                <div style={{ fontFamily: FONT_BODY, fontSize: 10, color: CX.textMute, letterSpacing: 0.3 }}>{s.l}</div>
              </div>
            ))}
          </div>

          {/* Nav */}
          <div style={{ marginTop: 18, display: 'flex', flexDirection: 'column', gap: 2 }}>
            {[
              { id: 'pass', label: 'Battle Pass', active: true, icon: <path d="M12 2 L4 6 L4 13 Q4 19 12 22 Q20 19 20 13 L20 6 Z"/> },
              { id: 'tasks', label: 'Задания', icon: <path d="M5 4 L19 4 L19 20 L5 20 Z M8 8 L16 8 M8 12 L16 12 M8 16 L14 16"/> },
              { id: 'top', label: 'Лидеры', icon: <path d="M5 4 L19 4 L19 9 Q19 13 12 13 Q5 13 5 9 Z M12 13 L12 17 M8 21 L16 21"/> },
              { id: 'shop', label: 'Магазин бонусов', icon: <path d="M4 7 L20 7 L18 19 L6 19 Z M8 7 L8 4 Q8 2 12 2 Q16 2 16 4 L16 7"/> },
              { id: 'club', label: 'Клуб', icon: <path d="M3 21 L3 9 L12 3 L21 9 L21 21 M9 21 L9 14 L15 14 L15 21"/> },
              { id: 'profile', label: 'Настройки', icon: <circle cx="12" cy="12" r="3"/> },
            ].map(it => (
              <div key={it.id} style={{
                padding: '10px 12px', borderRadius: 8,
                display: 'flex', alignItems: 'center', gap: 12,
                background: it.active ? `${CX.red}22` : 'transparent',
                border: it.active ? `1px solid ${CX.red}55` : '1px solid transparent',
                color: it.active ? CX.white : CX.textSec,
                fontFamily: FONT_BODY, fontSize: 13, fontWeight: it.active ? 600 : 500,
              }}>
                <svg width="18" height="18" viewBox="0 0 24 24" stroke={it.active ? CX.red : CX.textSec} strokeWidth="1.8" fill="none" strokeLinejoin="round" strokeLinecap="round">{it.icon}</svg>
                {it.label}
                {it.active && <div style={{ marginLeft: 'auto', width: 6, height: 6, borderRadius: '50%', background: CX.red, boxShadow: `0 0 6px ${CX.red}` }}/>}
              </div>
            ))}
          </div>

          <div style={{ marginTop: 'auto', fontFamily: FONT_MONO, fontSize: 10, color: CX.textMute, letterSpacing: 0.3 }}>
            CyberX Копейск • v0.4.2-beta
          </div>
        </div>

        {/* CENTER COLUMN */}
        <div style={{ flex: 1, padding: '24px 28px', overflow: 'auto' }}>
          {/* Top season strip */}
          <div style={{
            padding: 18, borderRadius: 14,
            background: `linear-gradient(135deg, ${CX.red}22 0%, ${CX.card} 50%, ${CX.bronze}22 100%)`,
            border: `1px solid ${CX.red}44`,
            display: 'flex', alignItems: 'center', gap: 20,
            position: 'relative', overflow: 'hidden',
          }}>
            <div style={{
              position: 'absolute', right: -20, top: -40, width: 220, height: 220,
              background: `radial-gradient(circle, ${CX.red}55, transparent 70%)`,
              filter: 'blur(40px)',
            }}/>
            <div style={{
              width: 64, height: 64, borderRadius: 12, flexShrink: 0,
              background: `linear-gradient(135deg, ${CX.bronze}, ${CX.bronzeHi})`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              boxShadow: `0 0 24px ${CX.bronze}77`,
            }}>
              <Display size={28} color="#3a1f00">S1</Display>
            </div>
            <div style={{ flex: 1, position: 'relative' }}>
              <Display size={11} color={CX.bronzeHi} tracking={0.32}>СЕЗОН 1 • 90 ДНЕЙ • 30 УРОВНЕЙ</Display>
              <div style={{ fontFamily: FONT_DISPLAY, fontSize: 28, color: CX.white, letterSpacing: '0.06em', marginTop: 4 }}>
                ОПЕРАЦИЯ COPPER
              </div>
              <div style={{ fontFamily: FONT_BODY, fontSize: 12.5, color: CX.textSec, marginTop: 4 }}>
                Стартовый сезон CyberX Battle Pass. Зарабатывай XP за часы, задания, турниры и Steam-челленджи.
              </div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div style={{ fontFamily: FONT_BODY, fontSize: 11, color: CX.textMute, letterSpacing: 0.4, textTransform: 'uppercase' }}>Завершится</div>
              <div style={{ fontFamily: FONT_DISPLAY, fontSize: 22, color: CX.white, marginTop: 2 }}>47 ДНЕЙ</div>
              <div style={{ fontFamily: FONT_MONO, fontSize: 11, color: CX.textMute }}>12.08.2026 23:59 МСК</div>
            </div>
          </div>

          {/* Section title */}
          <div style={{ marginTop: 22, display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
            <Display size={16} color={CX.white} tracking={0.16}>ДОРОЖКА НАГРАД</Display>
            <div style={{ display: 'flex', gap: 14, fontFamily: FONT_BODY, fontSize: 11, color: CX.textSec }}>
              <span style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
                <span style={{ width: 8, height: 8, borderRadius: '50%', background: CX.silver }}/> Free
              </span>
              <span style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
                <span style={{ width: 8, height: 8, borderRadius: '50%', background: CX.premiumGold, boxShadow: `0 0 6px ${CX.premiumGold}` }}/> Premium
              </span>
              <span style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
                <div style={{ width: 14, height: 14, borderRadius: 3, border: `1.5px solid ${CX.red}`, boxShadow: `0 0 6px ${CX.red}`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 8, color: CX.red, fontFamily: FONT_DISPLAY, fontWeight: 700 }}>15</div> Сейчас
              </span>
            </div>
          </div>

          {/* Reward track */}
          <WebRewardTrack/>

          {/* Tasks bottom */}
          <div style={{ marginTop: 22 }}>
            <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 10 }}>
              <Display size={16} color={CX.white} tracking={0.16}>АКТИВНЫЕ ЗАДАНИЯ</Display>
              <span style={{ fontFamily: FONT_BODY, fontSize: 12, color: CX.red, fontWeight: 600 }}>Все задания →</span>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
              {SAMPLE_TASKS.map((t, i) => <TaskCard key={i} {...t}/>)}
            </div>
          </div>
        </div>

        {/* RIGHT COLUMN */}
        <div style={{
          width: 290, padding: 20, background: 'rgba(13,15,20,0.4)',
          borderLeft: `1px solid ${CX.line}`, overflow: 'auto',
        }}>
          {/* Mini leaderboard */}
          <div style={{ marginBottom: 10, display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
            <Display size={13} color={CX.white} tracking={0.16}>ТОП КЛУБА</Display>
            <span style={{ fontFamily: FONT_BODY, fontSize: 11, color: CX.textMute }}>сезон 1</span>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
            {[
              { r: 1, n: 'WRAITH_42', l: 30, xp: 30000, p: true, i: 'WR' },
              { r: 2, n: 'NEON_K', l: 29, xp: 27450, p: true, i: 'NK' },
              { r: 3, n: 'ZED_HVH', l: 28, xp: 25800, p: false, i: 'ZD' },
              { r: 4, n: 'CHRONIC', l: 27, xp: 24100, p: true, i: 'CH' },
              { r: 5, n: 'BOMBL4', l: 26, xp: 22950, p: true, i: 'BL' },
            ].map(p => {
              const t = tierFor(p.l);
              const pc = p.r === 1 ? CX.premiumGold : p.r === 2 ? CX.silver : p.r === 3 ? CX.bronze : CX.textMute;
              return (
                <div key={p.r} style={{
                  display: 'flex', alignItems: 'center', gap: 8, padding: '8px 10px',
                  borderRadius: 8, background: CX.card, border: `1px solid ${CX.line}`,
                }}>
                  <div style={{ width: 20, fontFamily: FONT_DISPLAY, fontSize: 13, color: pc, textAlign: 'center', letterSpacing: '0.02em' }}>{p.r}</div>
                  <Avatar size={28} tier={t} initials={p.i}/>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontFamily: FONT_DISPLAY, fontSize: 11, color: CX.white, letterSpacing: '0.04em' }}>{p.n} {p.p && <PremiumStar size={8}/>}</div>
                    <div style={{ fontFamily: FONT_MONO, fontSize: 9.5, color: CX.textSec, marginTop: 1 }}><MonoNum n={p.xp}/> XP</div>
                  </div>
                </div>
              );
            })}
            <div style={{
              marginTop: 4, padding: '8px 10px', borderRadius: 8,
              background: `linear-gradient(180deg, ${CX.red}22, transparent)`,
              border: `1px solid ${CX.red}77`,
              display: 'flex', alignItems: 'center', gap: 8,
            }}>
              <div style={{ width: 20, fontFamily: FONT_DISPLAY, fontSize: 13, color: CX.red, textAlign: 'center' }}>34</div>
              <Avatar size={28} tier={TIERS.knight} initials="TZ"/>
              <div style={{ flex: 1 }}>
                <div style={{ fontFamily: FONT_DISPLAY, fontSize: 11, color: CX.white, letterSpacing: '0.04em' }}>ТЫ • TENZ_RU</div>
                <div style={{ fontFamily: FONT_MONO, fontSize: 9.5, color: CX.textSec, marginTop: 1 }}><MonoNum n={3500}/> XP</div>
              </div>
            </div>
          </div>

          {/* Premium promo */}
          <div style={{
            marginTop: 18, padding: 16, borderRadius: 12,
            background: `linear-gradient(160deg, ${CX.premiumGold}22, ${CX.card})`,
            border: `1.5px solid ${CX.premiumGold}77`,
            boxShadow: `0 0 20px ${CX.premiumGold}33`,
            position: 'relative', overflow: 'hidden',
          }}>
            <div style={{ position: 'absolute', top: -30, right: -30, width: 100, height: 100,
              background: `radial-gradient(circle, ${CX.premiumGold}55, transparent)`,
              filter: 'blur(20px)',
            }}/>
            <div style={{ position: 'relative' }}>
              <PremiumStar size={32}/>
              <div style={{ marginTop: 8, fontFamily: FONT_DISPLAY, fontSize: 18, color: CX.premiumGold, letterSpacing: '0.06em' }}>PREMIUM PASS</div>
              <div style={{ fontFamily: FONT_BODY, fontSize: 12, color: CX.textSec, lineHeight: 1.4, marginTop: 6 }}>
                +50% XP, эксклюзивные награды, ДР под ключ на 30 ур.
              </div>
              <div style={{ marginTop: 10, display: 'flex', alignItems: 'baseline', gap: 5 }}>
                <span style={{ fontFamily: FONT_DISPLAY, fontSize: 28, color: CX.white }}>1 490</span>
                <span style={{ fontFamily: FONT_DISPLAY, fontSize: 16, color: CX.premiumGold }}>₽</span>
                <span style={{ fontFamily: FONT_BODY, fontSize: 11, color: CX.textMute }}>/ сезон</span>
              </div>
              <div style={{
                marginTop: 12, padding: '10px', borderRadius: 8,
                background: `linear-gradient(135deg, ${CX.gold}, ${CX.premiumGold} 60%, #B8860B)`,
                boxShadow: `0 4px 16px ${CX.premiumGold}55`,
                fontFamily: FONT_DISPLAY, fontSize: 13, letterSpacing: '0.14em',
                color: '#3a2700', fontWeight: 700, textAlign: 'center',
              }}>АКТИВИРОВАТЬ</div>
              <div style={{ marginTop: 6, fontFamily: FONT_BODY, fontSize: 10.5, color: CX.textMute, textAlign: 'center' }}>
                купили 67 игроков клуба
              </div>
            </div>
          </div>

          {/* Stat */}
          <div style={{
            marginTop: 18, padding: 12, borderRadius: 10, background: CX.card, border: `1px solid ${CX.line}`,
          }}>
            <div style={{ fontFamily: FONT_DISPLAY, fontSize: 11, color: CX.textMute, letterSpacing: 0.32 }}>СЛЕДУЮЩИЙ ТИР</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 6 }}>
              <TierBadge tier="champion" size={40} label={false}/>
              <div style={{ flex: 1 }}>
                <div style={{ fontFamily: FONT_DISPLAY, fontSize: 14, color: CX.gold, letterSpacing: '0.12em' }}>CHAMPION</div>
                <div style={{ fontFamily: FONT_BODY, fontSize: 11, color: CX.textSec }}>с ур. 21</div>
              </div>
            </div>
            <div style={{ marginTop: 10 }}>
              <XPBar value={15} max={21} color={CX.gold} height={5}/>
              <div style={{ marginTop: 4, fontFamily: FONT_MONO, fontSize: 10, color: CX.textMute }}>
                <MonoNum n={30000}/> XP до CHAMPION
              </div>
            </div>
          </div>
        </div>
      </div>
    </WebFrame>
  );
}

// ─────────────────────────────────────────────────────────────
// Web reward track — wide horizontal grid
// ─────────────────────────────────────────────────────────────
function WebRewardTrack() {
  const tracks = [
    { lvl: 11, free: 'sticker', freeN: 'Стикер #1', prem: 'mousepad', premN: 'Коврик S1' },
    { lvl: 12, free: 'coins', freeN: '300 XP', prem: 'cup', premN: 'Кружка CX' },
    { lvl: 13, free: 'hours', freeN: '+30 мин', prem: 'sticker', premN: 'Стикерпак' },
    { lvl: 14, free: 'sticker', freeN: 'Аватар', prem: 'avatar', premN: 'Рамка S1' },
    { lvl: 15, free: 'coins', freeN: '300 ₽', prem: 'boost', premN: 'XP boost ×2' },
    { lvl: 16, free: 'hours', freeN: '+30 мин', prem: 'mousepad', premN: 'Коврик XL' },
    { lvl: 17, free: 'sticker', freeN: 'Стикер #4', prem: 'cup', premN: 'Термокружка' },
    { lvl: 18, free: 'coins', freeN: '500 XP', prem: 'boost', premN: '+50% XP' },
    { lvl: 19, free: 'avatar', freeN: 'Бейдж', prem: 'tshirt', premN: 'Футболка' },
    { lvl: 20, free: 'coins', freeN: '800 ₽', prem: 'hoodie', premN: 'Худи CyberX' },
  ];

  return (
    <div style={{
      marginTop: 10, padding: '16px 0', borderRadius: 14,
      background: `linear-gradient(180deg, ${CX.card}, ${CX.black})`,
      border: `1px solid ${CX.line}`,
      position: 'relative', overflow: 'hidden',
    }}>
      {/* Center divider line */}
      <div style={{
        position: 'absolute', left: 0, right: 0, top: '50%', height: 2,
        background: `linear-gradient(90deg, transparent, ${CX.red}66, transparent)`,
        transform: 'translateY(-50%)',
      }}/>

      <div style={{ display: 'flex', gap: 4, padding: '0 16px', overflowX: 'auto', scrollbarWidth: 'none' }}>
        {tracks.map(r => {
          const t = tierFor(r.lvl);
          const cur = r.lvl === 15;
          const locked = r.lvl > 15;
          const claimed = r.lvl < 15;
          return (
            <div key={r.lvl} style={{ display: 'flex', flexDirection: 'column', gap: 4, flexShrink: 0 }}>
              {/* FREE */}
              <RewardNode level={r.lvl} tier={t} current={cur} locked={locked} claimed={claimed}
                rewardKind={r.free} rewardName={r.freeN} scale={0.85}/>
              {/* Level Marker */}
              <div style={{
                height: 32, borderRadius: 6,
                background: cur ? `linear-gradient(180deg, ${CX.red}, ${CX.redDeep})` : CX.cardHi,
                border: `1px solid ${cur ? CX.red : CX.line}`,
                boxShadow: cur ? `0 0 14px ${CX.red}99` : 'none',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <Display size={16} color={cur ? CX.white : t.hi} tracking={0.04}>{r.lvl}</Display>
              </div>
              {/* PREMIUM */}
              <RewardNode level={r.lvl} tier={t} current={cur} locked={locked} claimed={claimed} isPremium
                rewardKind={r.prem} rewardName={r.premN} scale={0.85}/>
            </div>
          );
        })}
      </div>
    </div>
  );
}

Object.assign(window, { WebFrame, WebDashboard, WebRewardTrack });