// Sporda — secondary screens: News, Watch, Onboarding, Login, Profile.
// Components from components.jsx / screens-1.jsx are on window.

// ===========================================================================
// 06 — NEWS FEED
// Inspiration: Orix sports news Trending + Saudi League News chip rail.
// ===========================================================================
const ScreenNews = () => (
  <div className="phone">
    <div className="viewport">
      <StatusBar/>
      <div className="body">
        <Header
          left={<RoundBtn><I.search size={18}/></RoundBtn>}
          title="News"
          right={<RoundBtn dot><I.bell size={18}/></RoundBtn>}
        />

        {/* Category pills */}
        <div style={{ display: 'flex', gap: 8, padding: '0 20px 16px', overflowX: 'auto', scrollbarWidth: 'none' }}>
          {['Match', 'Transfers', 'Analysis', 'Predictions', 'Interviews'].map((c, i) => (
            <div key={c} className={`pill ${i === 0 ? 'active' : 'outline'}`} style={{ flex: 'none' }}>{c}</div>
          ))}
        </div>

        {/* Trending hero card */}
        <div style={{ padding: '0 20px 20px' }}>
          <div style={{
            fontSize: 11, color: 'var(--text-secondary)', fontWeight: 700,
            letterSpacing: '0.05em', textTransform: 'uppercase', marginBottom: 10,
          }}>Trending</div>
          <div style={{
            background: 'var(--bg-surface)',
            borderRadius: 'var(--r-card)',
            overflow: 'hidden',
            border: '1px solid var(--border-hairline)',
          }}>
            {/* Photo placeholder */}
            <div style={{
              aspectRatio: '16 / 9',
              background:
                'linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.7) 100%), ' +
                'linear-gradient(135deg, #294e35 0%, #1a3a2a 40%, #182320 100%)',
              position: 'relative',
              display: 'flex', alignItems: 'flex-end', padding: 16,
            }}>
              <div className="tag-micro" style={{
                position: 'absolute', top: 12, left: 12,
                background: 'var(--accent)', color: 'var(--accent-ink)',
                padding: '4px 10px', borderRadius: 'var(--r-pill)',
              }}>Partnership</div>
              {/* Suggest of crowd silhouette */}
              <svg viewBox="0 0 200 60" preserveAspectRatio="none" style={{ position: 'absolute', left: 0, bottom: 0, width: '100%', height: '60%', opacity: 0.2 }}>
                <path d="M0,40 Q20,20 40,30 T80,28 T120,32 T160,26 T200,30 L200,60 L0,60 Z" fill="white"/>
              </svg>
            </div>
            <div style={{ padding: 16 }}>
              <div style={{ fontSize: 16, fontWeight: 700, lineHeight: 1.3, textWrap: 'pretty' }}>
                Premier League and MedGulf forge multi-year broadcasting partnership.
              </div>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 12 }}>
                <div style={{ fontSize: 12, color: 'var(--text-secondary)' }}>Partnership · 15 min ago</div>
                <div style={{ display: 'flex', gap: 14, color: 'var(--text-secondary)' }}>
                  <I.heart/><I.cmt/><I.share/>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* League chip row */}
        <div style={{ padding: '0 20px 14px' }}>
          <div style={{ fontSize: 11, color: 'var(--text-secondary)', fontWeight: 700, letterSpacing: '0.05em', textTransform: 'uppercase', marginBottom: 10 }}>League News</div>
          <div style={{ display: 'flex', gap: 12, overflowX: 'auto', scrollbarWidth: 'none' }}>
            {[
              { code: 'PL', name: 'Premier', bg: '#3D5AFE' },
              { code: 'LL', name: 'La Liga', bg: '#EC4899' },
              { code: 'SA', name: 'Serie A', bg: '#22C55E' },
              { code: 'BL', name: 'Bundesliga', bg: '#FFE66D' },
              { code: 'CL', name: 'Champions', bg: '#7158E2' },
            ].map(l => (
              <div key={l.code} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, flex: 'none' }}>
                <div style={{ width: 48, height: 48, borderRadius: '50%', background: l.bg, display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 800, fontSize: 13, color: '#0A1400' }}>{l.code}</div>
                <div style={{ fontSize: 11, color: 'var(--text-secondary)', fontWeight: 600 }}>{l.name}</div>
              </div>
            ))}
          </div>
        </div>

        {/* List rows */}
        <div style={{ padding: '8px 20px 16px' }}>
          {[
            { tag: 'Transfer', title: 'Atlas FC closes deal for forward J. Suárez', meta: '2h ago' },
            { tag: 'Injury', title: 'Norse Utd captain ruled out 6 weeks after MRI', meta: '3h ago' },
            { tag: 'Analysis', title: "Why Rivermont's press is finally working", meta: '4h ago' },
          ].map((n, i) => (
            <div key={i} style={{ display: 'flex', gap: 12, padding: '12px 0', borderBottom: i < 2 ? '1px solid var(--border-hairline)' : 0 }}>
              <div style={{
                width: 64, height: 64, borderRadius: 12, flex: 'none',
                background: `linear-gradient(135deg, ${crestPalette[i*2]} 0%, ${crestPalette[i*2+1]} 100%)`,
              }}/>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div className="tag-micro" style={{ color: 'var(--accent)', marginBottom: 4 }}>{n.tag}</div>
                <div style={{ fontSize: 14, fontWeight: 600, lineHeight: 1.3, textWrap: 'pretty' }}>{n.title}</div>
                <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 6 }}>{n.meta}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <BottomNav active="news"/>
    </div>
  </div>
);

// ===========================================================================
// 07 — WATCH
// Inspiration: Bet Warrior live video block + Eleven streaming card.
// ===========================================================================
const ScreenWatch = () => (
  <div className="phone">
    <div className="viewport">
      <StatusBar/>
      <div className="body">
        <Header
          left={<RoundBtn><I.search size={18}/></RoundBtn>}
          title="Watch"
          right={<RoundBtn dot><I.bell size={18}/></RoundBtn>}
        />

        {/* Live card */}
        <div style={{ padding: '0 20px 16px' }}>
          <div className="tag-micro" style={{ color: 'var(--text-secondary)', marginBottom: 10 }}>Live now</div>
          <div style={{
            borderRadius: 'var(--r-card-lg)',
            overflow: 'hidden',
            position: 'relative',
            background: 'linear-gradient(135deg, #1A3A2A 0%, #182320 70%, #0F2218 100%)',
            aspectRatio: '16 / 10',
          }}>
            {/* Pitch suggestion */}
            <svg viewBox="0 0 200 120" preserveAspectRatio="none" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.18 }}>
              <rect x="0" y="0" width="200" height="120" fill="none" stroke="#fff" strokeWidth="0.5"/>
              <line x1="100" y1="0" x2="100" y2="120" stroke="#fff" strokeWidth="0.5"/>
              <circle cx="100" cy="60" r="14" fill="none" stroke="#fff" strokeWidth="0.5"/>
            </svg>
            {/* Live pill top-left */}
            <div className="pill live" style={{ position: 'absolute', top: 14, left: 14 }}>
              <span className="dot"/>LIVE
            </div>
            {/* Play */}
            <div style={{
              position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
              width: 64, height: 64, borderRadius: '50%', background: 'var(--accent)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              boxShadow: 'var(--shadow-fab)', color: 'var(--accent-ink)',
            }}><I.play size={28}/></div>
            {/* Score chip bottom */}
            <div style={{
              position: 'absolute', left: 14, right: 14, bottom: 14,
              background: 'rgba(0,0,0,0.55)',
              backdropFilter: 'blur(10px)',
              borderRadius: 14, padding: '10px 14px',
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <Crest name={teams.ATL.name} code="ATL"/>
                <span style={{ fontSize: 13, fontWeight: 700 }}>ATL</span>
              </div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
                <span className="score sm">2</span>
                <span style={{ color: 'var(--text-secondary)' }}>:</span>
                <span className="score sm">1</span>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <span style={{ fontSize: 13, fontWeight: 700 }}>NOR</span>
                <Crest name={teams.NOR.name} code="NOR"/>
              </div>
            </div>
          </div>
        </div>

        {/* Highlights row */}
        <div style={{ padding: '8px 0 16px' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 20px 12px' }}>
            <div className="tag-micro" style={{ color: 'var(--text-secondary)' }}>Highlights</div>
            <button style={{ color: 'var(--text-secondary)', fontSize: 12, fontWeight: 600, display: 'flex', alignItems: 'center', gap: 4 }}>See all <I.chevR size={12}/></button>
          </div>
          <div style={{ display: 'flex', gap: 12, padding: '0 20px', overflowX: 'auto', scrollbarWidth: 'none' }}>
            {[
              { score: '4-0', from: '#294e35', to: '#1a3a2a' },
              { score: '1-1', from: '#3D5AFE', to: '#182320' },
              { score: '3-2', from: '#EC4899', to: '#182320' },
            ].map((h, i) => (
              <div key={i} style={{ flex: 'none', width: 200 }}>
                <div style={{
                  borderRadius: 14, aspectRatio: '16/10', position: 'relative',
                  background: `linear-gradient(135deg, ${h.from} 0%, ${h.to} 100%)`,
                  overflow: 'hidden',
                }}>
                  <div style={{
                    position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
                    width: 40, height: 40, borderRadius: '50%', background: 'rgba(255,255,255,0.9)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#0A1400',
                  }}><I.play size={18}/></div>
                  <div style={{ position: 'absolute', bottom: 8, left: 8, fontSize: 11, fontWeight: 700, padding: '3px 8px', background: 'rgba(0,0,0,0.5)', borderRadius: 999 }}>2:14</div>
                </div>
                <div style={{ marginTop: 8, fontSize: 13, fontWeight: 600, textWrap: 'pretty' }}>
                  Atlas crush rivals {h.score} — full highlights
                </div>
                <div style={{ marginTop: 4, fontSize: 11, color: 'var(--text-muted)' }}>{12 + i}h ago · {(15 - i*3)}k views</div>
              </div>
            ))}
          </div>
        </div>

        {/* Browse categories */}
        <div style={{ padding: '8px 20px 24px' }}>
          <div className="tag-micro" style={{ color: 'var(--text-secondary)', marginBottom: 10 }}>Browse</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
            {[
              { label: 'Live matches', from: '#C8FF3E', to: '#7BB327' },
              { label: 'Replays',     from: '#3D5AFE', to: '#1D3AFE' },
              { label: 'Press conf.', from: '#EC4899', to: '#A8266A' },
              { label: 'Interviews',  from: '#FFE66D', to: '#B89D2C' },
            ].map(b => (
              <div key={b.label} style={{
                background: `linear-gradient(135deg, ${b.from}, ${b.to})`,
                borderRadius: 14, padding: '14px 14px 18px',
                fontWeight: 700, color: '#0A1400', position: 'relative', minHeight: 80,
              }}>{b.label}</div>
            ))}
          </div>
        </div>
      </div>
      <BottomNav active="home"/>
    </div>
  </div>
);

// ===========================================================================
// 08 — ONBOARDING · FOLLOW TEAMS
// Inspiration: standard onboarding step. Step 2 of 3.
// ===========================================================================
const ScreenOnboarding = () => {
  const followed = new Set(['ATL', 'VRD', 'MAR']);
  return (
    <div className="phone">
      <div className="viewport">
        <StatusBar/>
        <div className="body">
          {/* Header */}
          <div style={{ padding: '8px 20px 16px', display: 'flex', alignItems: 'center', gap: 12 }}>
            <RoundBtn><I.chevL size={18}/></RoundBtn>
            <div style={{ flex: 1 }}>
              {/* Progress */}
              <div style={{ display: 'flex', gap: 6 }}>
                <span style={{ flex: 1, height: 4, borderRadius: 2, background: 'var(--accent)' }}/>
                <span style={{ flex: 1, height: 4, borderRadius: 2, background: 'var(--accent)' }}/>
                <span style={{ flex: 1, height: 4, borderRadius: 2, background: 'var(--border-hairline)' }}/>
              </div>
            </div>
            <span style={{ fontSize: 13, color: 'var(--text-secondary)', fontWeight: 600 }}>2/3</span>
          </div>

          {/* Title */}
          <div style={{ padding: '0 20px 24px' }}>
            <h1 className="screen-title" style={{ fontSize: 26, lineHeight: 1.15, textWrap: 'balance' }}>Pick teams<br/>you support.</h1>
            <div style={{ marginTop: 8, fontSize: 14, color: 'var(--text-secondary)', textWrap: 'pretty' }}>
              We'll prioritize their matches in your feed and send you goal alerts.
            </div>
          </div>

          {/* Search */}
          <div style={{ padding: '0 20px 16px' }}>
            <div className="searchbar">
              <I.search size={18}/>
              <input placeholder="Search teams, leagues" defaultValue=""/>
            </div>
          </div>

          {/* Suggested chips */}
          <div style={{ padding: '0 20px 8px', display: 'flex', flexWrap: 'wrap', gap: 8 }}>
            {['Premier League', 'La Liga', 'MLS', 'Serie A', 'Bundesliga'].map(l => (
              <div key={l} className="pill outline" style={{ fontSize: 12, height: 28 }}>{l}</div>
            ))}
          </div>

          {/* Team grid */}
          <div style={{ padding: '16px 20px', display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12 }}>
            {Object.values(teams).slice(0, 9).map(t => {
              const on = followed.has(t.code);
              return (
                <div key={t.code} style={{
                  background: on ? 'var(--accent)' : 'var(--bg-surface)',
                  color: on ? 'var(--accent-ink)' : 'var(--text-primary)',
                  border: '1px solid ' + (on ? 'var(--accent)' : 'var(--border-hairline)'),
                  borderRadius: 14, padding: 12,
                  display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8,
                  position: 'relative',
                }}>
                  <Crest name={t.name} code={t.code} bg={on ? '#0A1400' : undefined}/>
                  <div style={{ fontSize: 11, fontWeight: 700, textAlign: 'center', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', width: '100%' }}>{t.name}</div>
                  {on && (
                    <div style={{ position: 'absolute', top: 6, right: 6, width: 18, height: 18, borderRadius: '50%', background: '#0A1400', color: 'var(--accent)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                      <I.check size={12}/>
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        </div>

        {/* Sticky bottom CTA */}
        <div style={{
          position: 'absolute', bottom: 0, left: 0, right: 0,
          padding: '16px 20px 32px',
          background: 'linear-gradient(180deg, rgba(10,15,12,0) 0%, var(--bg-base) 30%)',
        }}>
          <button style={{
            width: '100%', height: 52, borderRadius: 'var(--r-pill)',
            background: 'var(--accent)', color: 'var(--accent-ink)',
            fontWeight: 700, fontSize: 15,
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
          }}>Continue · 3 followed <I.chevR size={16}/></button>
        </div>
      </div>
    </div>
  );
};

// ===========================================================================
// 09 — LOGIN
// Inspiration: Eleven onboarding "Step into the game" hero pattern.
// ===========================================================================
const ScreenLogin = () => (
  <div className="phone">
    <div className="viewport">
      <StatusBar/>
      {/* Top half — atmospheric */}
      <div style={{
        height: 380,
        background:
          'radial-gradient(ellipse at 70% 30%, rgba(200,255,62,0.22), transparent 50%), ' +
          'radial-gradient(ellipse at 20% 80%, rgba(125,255,140,0.10), transparent 50%), ' +
          'linear-gradient(180deg, #0F2218 0%, #182320 60%, var(--bg-base) 100%)',
        position: 'relative',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'flex-end',
        padding: '40px 24px 32px',
      }}>
        {/* Logomark */}
        <div style={{ position: 'absolute', top: 70, left: 24, display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{ width: 40, height: 40, borderRadius: 10, background: 'var(--accent)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--accent-ink)' }}>
            <svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M12 2 4 7v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V7l-8-5z"/></svg>
          </div>
          <span style={{ fontSize: 22, fontWeight: 800, letterSpacing: '-0.02em' }}>Sporda</span>
        </div>
        <div style={{ fontSize: 32, fontWeight: 800, lineHeight: 1.1, letterSpacing: '-0.02em', textWrap: 'balance' }}>
          Live scores,<br/>your teams,<br/>one tap away.
        </div>
        <div style={{ marginTop: 10, fontSize: 14, color: 'var(--text-secondary)', textWrap: 'pretty' }}>
          Sign in to sync your follows, alerts, and watch history.
        </div>
      </div>

      {/* Bottom — auth */}
      <div style={{ flex: 1, padding: '24px 24px', display: 'flex', flexDirection: 'column', gap: 12 }}>
        <button style={{
          height: 52, borderRadius: 'var(--r-pill)',
          background: 'var(--accent)', color: 'var(--accent-ink)',
          fontWeight: 700, fontSize: 15,
        }}>Continue with email</button>
        <button style={{
          height: 52, borderRadius: 'var(--r-pill)',
          background: 'var(--bg-surface)', color: 'var(--text-primary)',
          border: '1px solid var(--border-strong)',
          fontWeight: 600, fontSize: 14,
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
        }}>
          <svg width="18" height="18" viewBox="0 0 24 24"><path fill="#fff" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/><path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84A11 11 0 0 0 12 23z"/><path fill="#FBBC05" d="M5.84 14.1A6.6 6.6 0 0 1 5.5 12c0-.73.13-1.44.34-2.1V7.07H2.18A11 11 0 0 0 1 12c0 1.77.42 3.45 1.18 4.93l3.66-2.83z"/><path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.65l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.83C6.71 7.31 9.14 5.38 12 5.38z"/></svg>
          Continue with Google
        </button>
        <button style={{
          height: 52, borderRadius: 'var(--r-pill)',
          background: 'var(--bg-surface)', color: 'var(--text-primary)',
          border: '1px solid var(--border-strong)',
          fontWeight: 600, fontSize: 14,
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
        }}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M17.6 12.5c0-2.7 2.2-4 2.3-4.1-1.3-1.8-3.3-2.1-4-2.1-1.7-.2-3.3 1-4.2 1-.9 0-2.2-1-3.6-.9-1.9 0-3.6 1.1-4.6 2.8-2 3.4-.5 8.4 1.4 11.2.9 1.3 2 2.8 3.5 2.7 1.4-.1 1.9-.9 3.6-.9s2.2.9 3.6.9c1.5 0 2.5-1.3 3.4-2.7.7-1 1.2-2.1 1.5-3.2-.1 0-2.9-1.1-2.9-4.7zM14.7 4.6c.8-.9 1.3-2.2 1.1-3.5-1.1.1-2.4.8-3.2 1.7-.7.8-1.4 2.1-1.2 3.3 1.3.1 2.5-.6 3.3-1.5z"/></svg>
          Continue with Apple
        </button>

        <div style={{ flex: 1 }}/>

        <div style={{ fontSize: 12, color: 'var(--text-muted)', textAlign: 'center', textWrap: 'pretty', lineHeight: 1.5 }}>
          By continuing, you agree to our <span style={{ color: 'var(--text-secondary)', textDecoration: 'underline' }}>Terms</span> and <span style={{ color: 'var(--text-secondary)', textDecoration: 'underline' }}>Privacy Policy</span>.
        </div>
      </div>
    </div>
  </div>
);

// ===========================================================================
// 10 — PROFILE
// Inspiration: standard mobile-app profile.
// ===========================================================================
const ScreenProfile = () => (
  <div className="phone">
    <div className="viewport">
      <StatusBar/>
      <div className="body">
        <Header
          left={<RoundBtn><I.chevL size={18}/></RoundBtn>}
          title="Profile"
          right={<RoundBtn><I.more/></RoundBtn>}
        />

        {/* Avatar block */}
        <div style={{ padding: '0 20px 24px', textAlign: 'center' }}>
          <div style={{
            width: 88, height: 88, borderRadius: '50%',
            background: 'linear-gradient(135deg, #7158E2, #3D5AFE)',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            fontWeight: 700, fontSize: 28, color: '#fff',
            boxShadow: '0 12px 24px rgba(57, 90, 254, 0.25)',
            margin: '0 auto 12px',
          }}>BR</div>
          <div style={{ fontWeight: 700, fontSize: 18 }}>Ben Rascals</div>
          <div style={{ fontSize: 13, color: 'var(--text-secondary)', marginTop: 2 }}>@benrascals · joined Jan 2026</div>
        </div>

        {/* Stats grid */}
        <div style={{ padding: '0 20px 20px', display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10 }}>
          {[
            { v: 8, l: 'Teams' },
            { v: 4, l: 'Leagues' },
            { v: 142, l: 'Watched' },
          ].map(s => (
            <div key={s.l} style={{ background: 'var(--bg-surface)', borderRadius: 14, padding: '14px 12px', textAlign: 'center' }}>
              <div style={{ fontSize: 22, fontWeight: 800 }}>{s.v}</div>
              <div style={{ fontSize: 11, color: 'var(--text-secondary)', fontWeight: 600, marginTop: 2, letterSpacing: '0.04em', textTransform: 'uppercase' }}>{s.l}</div>
            </div>
          ))}
        </div>

        {/* Followed teams chip row */}
        <div style={{ padding: '0 20px 16px' }}>
          <div className="tag-micro" style={{ color: 'var(--text-secondary)', marginBottom: 10 }}>Followed teams</div>
          <div style={{ display: 'flex', gap: 10, overflowX: 'auto', scrollbarWidth: 'none' }}>
            {Object.values(teams).slice(0, 8).map(t => (
              <div key={t.code} style={{ flex: 'none', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
                <Crest name={t.name} code={t.code}/>
                <div style={{ fontSize: 10, fontWeight: 600 }}>{t.code}</div>
              </div>
            ))}
            <div style={{ flex: 'none', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
              <div style={{
                width: 36, height: 36, borderRadius: '50%',
                background: 'var(--bg-surface)', border: '1px dashed var(--border-strong)',
                display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--text-secondary)',
              }}><I.plus size={18}/></div>
              <div style={{ fontSize: 10, color: 'var(--text-secondary)', fontWeight: 600 }}>Add</div>
            </div>
          </div>
        </div>

        {/* List */}
        <div style={{ background: 'var(--bg-surface)', margin: '0 20px', borderRadius: 14, overflow: 'hidden' }}>
          {[
            { l: 'Favorites', v: '24' },
            { l: 'Watch history', v: '142' },
            { l: 'Notifications', v: 'On' },
            { l: 'Appearance', v: 'Dark' },
            { l: 'Help center', v: null },
            { l: 'Sign out', v: null, danger: true },
          ].map((r, i, arr) => (
            <div key={r.l} style={{
              display: 'flex', alignItems: 'center', padding: '14px 16px',
              borderBottom: i < arr.length - 1 ? '1px solid var(--border-hairline)' : 0,
              fontSize: 14, fontWeight: 500,
              color: r.danger ? 'var(--negative)' : 'var(--text-primary)',
            }}>
              <span style={{ flex: 1 }}>{r.l}</span>
              {r.v && <span style={{ color: 'var(--text-secondary)', fontSize: 13, marginRight: 8 }}>{r.v}</span>}
              {!r.danger && <I.chevR size={14}/>}
            </div>
          ))}
        </div>

        <div style={{ height: 24 }}/>
      </div>
      <BottomNav active="profile"/>
    </div>
  </div>
);

Object.assign(window, { ScreenNews, ScreenWatch, ScreenOnboarding, ScreenLogin, ScreenProfile });