// SCREEN 4 — League / Leaderboard
function ScreenLeague({ accent, accentDeep }) {
  const entries = [
    { rank: 1, name: 'Rina Wulandari', meta: 'UI/UX · Jakarta', xp: 4820, trend: 'up', medal: 'gold' },
    { rank: 2, name: 'Budi Prasetyo', meta: 'Growth · Bandung', xp: 4230, trend: 'up', medal: 'silver' },
    { rank: 3, name: 'Citra Mahendra', meta: 'Content · Surabaya', xp: 3980, trend: 'same', medal: 'bronze' },
    { rank: 4, name: 'Aditya Nugroho', meta: 'PM · Jakarta', xp: 3540, trend: 'up' },
    { rank: 5, name: 'Fajar Hidayat', meta: 'Data · Tangerang', xp: 3210, trend: 'down' },
    { rank: 6, name: 'Sarah Putri', meta: 'Marketing · Depok', xp: 2890, trend: 'up' },
    { rank: 7, name: 'Dewi Wijaya', meta: 'Lu', xp: 2340, trend: 'up', you: true },
    { rank: 8, name: 'Randi Kusuma', meta: 'SEO · Jakarta', xp: 2180, trend: 'down' },
    { rank: 9, name: 'Tika Handayani', meta: 'Ops · Semarang', xp: 1950, trend: 'same' },
    { rank: 10, name: 'Yoga Pratama', meta: 'BD · Medan', xp: 1720, trend: 'down' },
  ];

  const medalColor = {
    gold: '#FFC400',
    silver: '#B8C0CC',
    bronze: '#D48556',
  };

  return (
    <div style={{
      flex: 1, display: 'flex', flexDirection: 'column',
      color: '#EAEEF3',
      fontFamily: "'Inter', sans-serif",
      overflow: 'hidden',
    }}>
      {/* Hero header */}
      <div style={{
        position: 'relative',
        padding: '12px 16px 14px',
        background: `linear-gradient(180deg, ${accent}18, transparent 90%)`,
        borderBottom: '1px solid rgba(255,255,255,0.04)',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          {/* Silver league trophy */}
          <div style={{
            width: 48, height: 48, borderRadius: 14,
            background: 'linear-gradient(135deg, #B8C0CC, #6B7280)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: '0 4px 12px rgba(184, 192, 204, 0.3), inset 0 1px 0 rgba(255,255,255,0.3)',
          }}>
            {Icon.trophy(26, '#0B0F14')}
          </div>
          <div style={{ flex: 1 }}>
            <div style={{
              fontFamily: "'Space Grotesk', sans-serif",
              fontSize: 17, fontWeight: 700, letterSpacing: -0.3, lineHeight: 1,
            }}>Liga Perak</div>
            <div style={{ fontSize: 11, color: '#8A93A0', marginTop: 3, display: 'flex', alignItems: 'center', gap: 4 }}>
              {Icon.clock(11, '#8A93A0')}
              <span>3 hari 4 jam tersisa</span>
            </div>
          </div>
          {/* Week indicator dots */}
          <div style={{ display: 'flex', gap: 3 }}>
            {[1,2,3,4,5,6,7].map(i => (
              <div key={i} style={{
                width: 5, height: 5, borderRadius: 5,
                background: i <= 4 ? accent : '#2A3442',
                boxShadow: i <= 4 ? `0 0 4px ${accent}` : 'none',
              }} />
            ))}
          </div>
        </div>

        {/* Zone indicator */}
        <div style={{
          marginTop: 12,
          display: 'flex', gap: 6,
          fontSize: 10,
          fontFamily: "'Space Grotesk', sans-serif", fontWeight: 600,
        }}>
          <div style={{
            flex: 1, padding: '6px 8px', borderRadius: 8,
            background: 'rgba(123, 237, 111, 0.1)',
            border: '1px solid rgba(123, 237, 111, 0.25)',
            color: '#7BED6F',
            display: 'flex', alignItems: 'center', gap: 4,
          }}>
            {Icon.arrow_up(10, '#7BED6F')}
            <span>Top 5 → Liga Emas</span>
          </div>
          <div style={{
            padding: '6px 8px', borderRadius: 8,
            background: 'rgba(255, 75, 145, 0.08)',
            border: '1px solid rgba(255, 75, 145, 0.2)',
            color: '#FF4B91',
            display: 'flex', alignItems: 'center', gap: 4,
          }}>
            {Icon.arrow_down(10, '#FF4B91')}
            <span>Btm 3</span>
          </div>
        </div>
      </div>

      {/* Leaderboard list */}
      <div style={{ flex: 1, overflowY: 'auto', padding: '8px 10px 10px' }}>
        {entries.map((e, i) => {
          const inPromo = e.rank <= 5;
          const inDemo = e.rank >= 8;
          return (
            <div key={e.rank} style={{
              display: 'flex', alignItems: 'center', gap: 10,
              padding: '8px 10px',
              margin: '2px 0',
              borderRadius: 12,
              background: e.you ? `${accent}10` : 'transparent',
              border: e.you ? `1px solid ${accent}44` : '1px solid transparent',
              boxShadow: e.you ? `0 0 16px ${accent}22` : 'none',
              position: 'relative',
            }}>
              {/* separator after promo zone */}
              {e.rank === 5 && (
                <div style={{
                  position: 'absolute', bottom: -3, left: 8, right: 8,
                  height: 1, borderTop: '1px dashed rgba(123, 237, 111, 0.3)',
                }} />
              )}
              {e.rank === 7 && (
                <div style={{
                  position: 'absolute', top: -3, left: 8, right: 8,
                  height: 1, borderTop: '1px dashed rgba(255, 75, 145, 0.25)',
                }} />
              )}

              {/* rank */}
              <div style={{
                width: 24, textAlign: 'center',
                fontFamily: "'Space Grotesk', sans-serif",
                fontWeight: 700, fontSize: 14,
                color: e.medal ? medalColor[e.medal] : (e.you ? accent : '#5A6472'),
              }}>
                {e.medal ? (
                  <div style={{
                    width: 22, height: 22, borderRadius: 22,
                    margin: '0 auto',
                    background: `linear-gradient(135deg, ${medalColor[e.medal]}, ${medalColor[e.medal]}99)`,
                    color: '#0B0F14',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 11, fontWeight: 800,
                    boxShadow: `0 2px 6px ${medalColor[e.medal]}55, inset 0 1px 0 rgba(255,255,255,0.4)`,
                  }}>{e.rank}</div>
                ) : e.rank}
              </div>

              {/* Avatar — gradient initial */}
              <div style={{
                width: 30, height: 30, borderRadius: 999,
                background: e.you
                  ? 'linear-gradient(135deg, #FF4B91, #FFC400)'
                  : `linear-gradient(135deg, hsl(${e.rank * 37 % 360}, 60%, 55%), hsl(${(e.rank * 37 + 40) % 360}, 55%, 45%))`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: "'Space Grotesk', sans-serif",
                fontWeight: 700, fontSize: 11, color: '#0B0F14',
                flexShrink: 0,
              }}>{e.name.split(' ').map(n => n[0]).slice(0, 2).join('')}</div>

              {/* Name + meta */}
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{
                  fontSize: 12, fontWeight: 600,
                  color: e.you ? accent : '#EAEEF3',
                  overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
                  fontFamily: e.you ? "'Space Grotesk', sans-serif" : "'Inter', sans-serif",
                  letterSpacing: e.you ? -0.2 : 0,
                }}>{e.you ? 'Lu' : e.name}</div>
                <div style={{
                  fontSize: 10, color: '#8A93A0', marginTop: 1,
                  overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
                }}>{e.meta}</div>
              </div>

              {/* trend arrow */}
              {e.trend === 'up' && Icon.arrow_up(11, '#7BED6F')}
              {e.trend === 'down' && Icon.arrow_down(11, '#FF4B91')}
              {e.trend === 'same' && (
                <div style={{ width: 11, height: 2, borderRadius: 2, background: '#5A6472' }} />
              )}

              {/* XP */}
              <div style={{
                fontFamily: "'Space Grotesk', sans-serif",
                fontWeight: 700, fontSize: 12,
                color: e.you ? accent : '#EAEEF3',
                minWidth: 52, textAlign: 'right',
              }}>{e.xp.toLocaleString()}<span style={{
                fontSize: 9, color: '#5A6472', marginLeft: 2, fontWeight: 500,
              }}>XP</span></div>
            </div>
          );
        })}

        {/* CTA banner under your row */}
        <div style={{
          margin: '12px 4px 4px',
          padding: '10px 12px',
          borderRadius: 12,
          background: `linear-gradient(135deg, ${accent}15, transparent)`,
          border: `1px dashed ${accent}44`,
          display: 'flex', alignItems: 'center', gap: 8,
        }}>
          <div style={{ fontSize: 18 }}>🚀</div>
          <div style={{ flex: 1, fontSize: 11, lineHeight: 1.4 }}>
            <b style={{ color: accent, fontFamily: "'Space Grotesk', sans-serif" }}>Naik 3 liga</b>
            <span style={{ color: '#8A93A0' }}> kalo lu masuk Top 5 minggu ini. Tinggal 870 XP lagi!</span>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ScreenLeague });