// Mobile — Riverside CC player app. Four screens, sharing the iOS frame.
// All in dark theme (Design System dark-first). Custom mobile chrome rather
// than iOS list rows so it feels like a real RN app, not Settings.

const { useState: useMState } = React;

const MFONT = "'Inter', -apple-system, system-ui, sans-serif";

// ─────────────────────────────────────────────────────────────
// Mobile primitives
// ─────────────────────────────────────────────────────────────
const MAvatar = ({ initials, size = 36, tone = 'sky' }) => {
  const tones = { sky: '#0C4A6E', accent: '#14532D', amber: '#78350F', purple: '#4C1D95', danger: '#7F1D1D', slate: '#1F2937' };
  const ink = { sky: '#7DD3FC', accent: '#86EFAC', amber: '#FCD34D', purple: '#C4B5FD', danger: '#FCA5A5', slate: '#94A3B8' };
  return (
    <div style={{
      width: size, height: size, borderRadius: 999, background: tones[tone],
      color: ink[tone], display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontWeight: 700, fontSize: size * 0.38, flexShrink: 0,
    }}>{initials}</div>
  );
};

const MBadge = ({ children, tone = 'accent' }) => {
  const c = {
    accent: { bg: 'rgba(34,197,94,0.18)',  fg: '#22C55E' },
    amber:  { bg: 'rgba(245,158,11,0.18)', fg: '#F59E0B' },
    danger: { bg: 'rgba(239,68,68,0.18)',  fg: '#EF4444' },
    sky:    { bg: 'rgba(56,189,248,0.18)', fg: '#38BDF8' },
    purple: { bg: 'rgba(139,92,246,0.18)', fg: '#A78BFA' },
    slate:  { bg: 'rgba(148,163,184,0.14)', fg: '#94A3B8' },
  }[tone];
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 4,
      padding: '3px 8px', borderRadius: 6,
      fontSize: 10, fontWeight: 700, letterSpacing: 0.3,
      background: c.bg, color: c.fg, textTransform: 'uppercase', whiteSpace: 'nowrap',
    }}>{children}</span>
  );
};

const MCard = ({ children, style = {} }) => (
  <div style={{
    background: COLORS.surface, borderRadius: 16, padding: 16,
    borderWidth: 1, borderStyle: 'solid', borderColor: COLORS.border, ...style,
  }}>{children}</div>
);

// ─────────────────────────────────────────────────────────────
// Tab bar (bottom). On Android we drop the glass blur + iOS-style
// safe-area padding since the device frame's gesture bar handles that.
// ─────────────────────────────────────────────────────────────
const PlayerTabBar = ({ active, platform = 'ios' }) => {
  const tabs = [
    { id: 'home',    label: 'Home',    icon: 'home' },
    { id: 'fixtures',label: 'Fixtures',icon: 'cal' },
    { id: 'notifs',  label: 'Inbox',   icon: 'bell', badge: 3 },
    { id: 'profile', label: 'Profile', icon: 'users' },
  ];
  const android = platform === 'android';
  return (
    <div style={{
      position: 'absolute', bottom: 0, left: 0, right: 0,
      height: android ? 64 : 84,
      background: android ? COLORS.surface : 'rgba(11,18,32,0.92)',
      backdropFilter: android ? 'none' : 'blur(20px)',
      WebkitBackdropFilter: android ? 'none' : 'blur(20px)',
      borderTop: `1px solid ${COLORS.border}`,
      paddingTop: 10, paddingBottom: android ? 10 : 30, zIndex: 100,
      display: 'flex', justifyContent: 'space-around',
    }}>
      {tabs.map(t => {
        const isActive = t.id === active;
        return (
          <div key={t.id} style={{
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
            color: isActive ? COLORS.sky : COLORS.textMuted, position: 'relative', flex: 1,
          }}>
            <div style={{ position: 'relative' }}>
              {/* Material-style active pill */}
              {android && isActive && (
                <div style={{
                  position: 'absolute', inset: '-6px -14px',
                  background: 'rgba(56,189,248,0.16)', borderRadius: 999, zIndex: 0,
                }} />
              )}
              <div style={{ position: 'relative', zIndex: 1 }}>
                <Icon name={t.icon} size={22} stroke={isActive ? 2.5 : 2} />
              </div>
              {t.badge && (
                <div style={{
                  position: 'absolute', top: -4, right: -8,
                  background: COLORS.danger, color: 'white',
                  fontSize: 9, fontWeight: 800, borderRadius: 999,
                  padding: '1px 5px', minWidth: 14, textAlign: 'center', zIndex: 2,
                }}>{t.badge}</div>
              )}
            </div>
            <div style={{ fontSize: 10, fontWeight: 600 }}>{t.label}</div>
          </div>
        );
      })}
    </div>
  );
};

// ─────────────────────────────────────────────────────────────
// Screen shell — keeps the title/scroll discipline consistent
// ─────────────────────────────────────────────────────────────
const MobileShell = ({ title, subtitle, headerRight, children, tab, platform = 'ios', scrollPad = 100 }) => (
  <div style={{
    position: 'absolute', inset: 0, background: COLORS.bg,
    color: 'white', fontFamily: MFONT,
    display: 'flex', flexDirection: 'column', overflow: 'hidden',
    WebkitFontSmoothing: 'antialiased',
  }}>
    {/* Faux status bar — only on iOS (Android device frame provides its own). */}
    {platform === 'ios' && (
      <div style={{
        paddingTop: 14, paddingLeft: 28, paddingRight: 28, paddingBottom: 6,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        fontSize: 15, fontWeight: 700, color: 'white',
      }}>
        <span>9:41</span>
        <span style={{ display: 'inline-flex', gap: 6, alignItems: 'center' }}>
          <svg width="17" height="11" viewBox="0 0 17 11"><rect x="0" y="7" width="3" height="4" rx="0.5" fill="white"/><rect x="4.5" y="5" width="3" height="6" rx="0.5" fill="white"/><rect x="9" y="2.5" width="3" height="8.5" rx="0.5" fill="white"/><rect x="13.5" y="0" width="3" height="11" rx="0.5" fill="white"/></svg>
          <svg width="14" height="11" viewBox="0 0 14 11"><path d="M7 2.5c1.8 0 3.5.7 4.7 1.9l1-1A8 8 0 007 1a8 8 0 00-5.7 2.4l1 1A6.5 6.5 0 017 2.5z" fill="white"/><circle cx="7" cy="9" r="1.5" fill="white"/></svg>
          <div style={{ width: 24, height: 11, border: '1px solid rgba(255,255,255,0.4)', borderRadius: 3, padding: 1, position: 'relative' }}>
            <div style={{ width: '80%', height: '100%', background: 'white', borderRadius: 1.5 }} />
          </div>
        </span>
      </div>
    )}

    {/* Header */}
    <div style={{ padding: platform === 'ios' ? '6px 20px 14px' : '18px 20px 14px', display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 12 }}>
      <div>
        <div style={{ color: 'white', fontSize: 28, fontWeight: 800, letterSpacing: -0.4, lineHeight: 1.1 }}>{title}</div>
        {subtitle && <div style={{ color: COLORS.textSecondary, fontSize: 13, marginTop: 4 }}>{subtitle}</div>}
      </div>
      {headerRight}
    </div>

    {/* Scroll body */}
    <div style={{ flex: 1, overflow: 'auto', padding: '0 20px', paddingBottom: platform === 'android' ? 80 : scrollPad }}>
      {children}
    </div>

    <PlayerTabBar active={tab} platform={platform} />
  </div>
);

// ─────────────────────────────────────────────────────────────
// HOME — feed
// ─────────────────────────────────────────────────────────────
const HomeScreen = ({ platform = 'ios' }) => {
  const next = FIXTURES[0];
  return (
    <MobileShell
      title="Hi, Asha"
      subtitle="3 days until Northbank away"
      platform={platform}
      headerRight={
        <div style={{
          width: 38, height: 38, borderRadius: 999,
          background: COLORS.surface, border: `1px solid ${COLORS.border}`,
          display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative',
        }}>
          <Icon name="bell" size={18} stroke={2} style={{ color: 'white' }} />
          <div style={{
            position: 'absolute', top: 6, right: 7, width: 8, height: 8,
            background: COLORS.danger, borderRadius: 999, border: `2px solid ${COLORS.surface}`,
          }} />
        </div>
      }
      tab="home"
    >
      {/* Next fixture hero */}
      <div style={{
        background: 'linear-gradient(160deg, rgba(34,197,94,0.16) 0%, rgba(34,197,94,0.04) 60%)',
        borderRadius: 18, padding: 18, border: `1px solid rgba(34,197,94,0.25)`, marginBottom: 16,
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 14 }}>
          <div>
            <div style={{ color: COLORS.accent, fontSize: 11, fontWeight: 700, letterSpacing: 0.8, textTransform: 'uppercase' }}>Next match</div>
            <div style={{ color: 'white', fontSize: 22, fontWeight: 800, marginTop: 4, letterSpacing: -0.3 }}>vs {next.opponent}</div>
            <div style={{ color: COLORS.textSecondary, fontSize: 13, marginTop: 4 }}>{next.date} · {next.time} · {next.homeAway}</div>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, color: COLORS.amber }}>
            <Icon name="sun" size={18} />
            <span style={{ fontSize: 15, fontWeight: 700 }}>{next.weather.temp}</span>
          </div>
        </div>

        {/* Your availability */}
        <div style={{
          background: 'rgba(11,18,32,0.5)', borderRadius: 12, padding: 12,
          border: `1px solid ${COLORS.border}`,
        }}>
          <div style={{ color: COLORS.textMuted, fontSize: 10, fontWeight: 700, letterSpacing: 0.5, textTransform: 'uppercase', marginBottom: 10 }}>Your availability</div>
          <div style={{ display: 'flex', gap: 6 }}>
            {[
              { id: 'avail',   label: 'Available',   tone: 'accent', icon: 'check', active: true },
              { id: 'maybe',   label: 'Maybe',       tone: 'amber',  icon: 'qmark' },
              { id: 'unavail', label: 'Can\u2019t', tone: 'danger', icon: 'x' },
            ].map(b => (
              <div key={b.id} style={{
                flex: 1, padding: '10px 6px', borderRadius: 10,
                display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
                background: b.active ? COLORS[b.tone] : 'transparent',
                border: `1px solid ${b.active ? COLORS[b.tone] : COLORS.border}`,
                color: b.active ? (b.tone === 'accent' ? COLORS.accentInk : '#0B1220') : COLORS.textSecondary,
              }}>
                <Icon name={b.icon} size={16} stroke={2.5} />
                <span style={{ fontSize: 11, fontWeight: 700 }}>{b.label}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Section label */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 22, marginBottom: 12 }}>
        <div style={{ color: 'white', fontSize: 17, fontWeight: 800 }}>Noticeboard</div>
        <div style={{ color: COLORS.sky, fontSize: 13, fontWeight: 600 }}>See all</div>
      </div>

      {POSTS.slice(0, 3).map(p => (
        <MCard key={p.id} style={{ marginBottom: 10 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
            <MAvatar initials={p.author.split(' ').map(n => n[0]).join('')} size={26} tone={p.authorRole === 'Coach' ? 'amber' : p.authorRole === 'Captain' ? 'accent' : 'sky'} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ color: 'white', fontSize: 12, fontWeight: 600 }}>{p.author}</div>
              <div style={{ color: COLORS.textMuted, fontSize: 10 }}>{p.authorRole} · {p.date}</div>
            </div>
            {p.pinned && <span style={{ color: COLORS.amber }}><Icon name="pin2" size={14} stroke={2.5} /></span>}
            <MBadge tone={p.tag === 'Training' ? 'sky' : p.tag === 'Kit' ? 'purple' : p.tag === 'Match report' ? 'accent' : 'slate'}>{p.tag}</MBadge>
          </div>
          <div style={{ color: 'white', fontSize: 15, fontWeight: 700, lineHeight: 1.3 }}>{p.title}</div>
          <div style={{ color: COLORS.textSecondary, fontSize: 13, lineHeight: 1.45, marginTop: 6, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>{p.excerpt}</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginTop: 12, color: COLORS.textMuted, fontSize: 12 }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}><Icon name="chat" size={12} /> {p.comments}</span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}><Icon name="check" size={12} /> Acknowledge</span>
          </div>
        </MCard>
      ))}
    </MobileShell>
  );
};

// ─────────────────────────────────────────────────────────────
// FIXTURES — list w/ availability tap targets
// ─────────────────────────────────────────────────────────────
const FixturesScreen = ({ platform = 'ios' }) => {
  // Local availability state — tap on a button toggles your status for that fixture.
  const [avail, setAvail] = useMState({ f1: 'avail', f2: null, f3: null, f4: null });

  return (
    <MobileShell
      title="Fixtures"
      subtitle="4 upcoming · pull to refresh"
      platform={platform}
      tab="fixtures"
    >
      {/* Sub-tabs */}
      <div style={{ display: 'flex', background: COLORS.surface, border: `1px solid ${COLORS.border}`, borderRadius: 10, padding: 4, marginBottom: 16 }}>
        {[
          { id: 'up', label: 'Upcoming', active: true },
          { id: 'past', label: 'Past' },
          { id: 'sea', label: 'Season' },
        ].map(t => (
          <div key={t.id} style={{
            flex: 1, textAlign: 'center', padding: '8px 0', borderRadius: 7,
            background: t.active ? COLORS.surfaceAlt : 'transparent',
            color: t.active ? 'white' : COLORS.textSecondary,
            fontSize: 13, fontWeight: 600,
            border: t.active ? `1px solid ${COLORS.border}` : '1px solid transparent',
          }}>{t.label}</div>
        ))}
      </div>

      {FIXTURES.filter(f => f.status === 'upcoming').map(f => {
        const my = avail[f.id];
        return (
          <MCard key={f.id} style={{ marginBottom: 12 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 12 }}>
              <div>
                <div style={{ display: 'flex', gap: 6, marginBottom: 6 }}>
                  <MBadge tone={f.type === 'Cup' ? 'purple' : f.type === 'Friendly' ? 'sky' : 'slate'}>{f.type}</MBadge>
                  <MBadge tone={f.homeAway === 'Home' ? 'accent' : 'slate'}>{f.homeAway}</MBadge>
                </div>
                <div style={{ color: 'white', fontSize: 17, fontWeight: 800, letterSpacing: -0.2 }}>vs {f.opponent}</div>
                <div style={{ color: COLORS.textSecondary, fontSize: 12, marginTop: 4 }}>{f.date} · {f.time}</div>
                <div style={{ color: COLORS.textMuted, fontSize: 11, marginTop: 4, display: 'inline-flex', alignItems: 'center', gap: 4 }}>
                  <Icon name="pin3" size={11} /> {f.venue}
                </div>
              </div>
              {f.weather && (
                <div style={{ textAlign: 'right' }}>
                  <div style={{ display: 'inline-flex', alignItems: 'center', gap: 4, color: f.weather.icon === 'sun' ? COLORS.amber : COLORS.textSecondary }}>
                    <Icon name={f.weather.icon} size={16} />
                    <span style={{ fontSize: 13, fontWeight: 700 }}>{f.weather.temp}</span>
                  </div>
                  <div style={{ color: COLORS.textMuted, fontSize: 10, marginTop: 2 }}>{f.weather.desc.split(',')[0]}</div>
                </div>
              )}
            </div>

            {/* Availability buttons */}
            <div style={{ display: 'flex', gap: 6 }}>
              {[
                { id: 'avail',   label: 'Available', tone: 'accent', icon: 'check' },
                { id: 'maybe',   label: 'Maybe',     tone: 'amber',  icon: 'qmark' },
                { id: 'unavail', label: 'Can\u2019t',tone: 'danger', icon: 'x' },
              ].map(b => {
                const active = my === b.id;
                return (
                  <div key={b.id} onClick={() => setAvail(s => ({ ...s, [f.id]: b.id }))} style={{
                    flex: 1, padding: '10px 4px', borderRadius: 10,
                    display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
                    background: active ? COLORS[b.tone] : 'transparent',
                    border: `1px solid ${active ? COLORS[b.tone] : COLORS.border}`,
                    color: active ? (b.tone === 'accent' ? COLORS.accentInk : '#0B1220') : COLORS.textSecondary,
                    cursor: 'pointer',
                  }}>
                    <Icon name={b.icon} size={14} stroke={2.5} />
                    <span style={{ fontSize: 11, fontWeight: 700 }}>{b.label}</span>
                  </div>
                );
              })}
            </div>

            {/* Squad availability summary */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 12, paddingTop: 12, borderTop: `1px solid ${COLORS.border}` }}>
              <div style={{ flex: 1, height: 4, borderRadius: 2, display: 'flex', overflow: 'hidden', background: COLORS.border }}>
                <div style={{ flex: f.counts.avail, background: COLORS.accent }} />
                <div style={{ flex: f.counts.maybe, background: COLORS.amber }} />
                <div style={{ flex: f.counts.unavail, background: COLORS.danger }} />
                <div style={{ flex: f.counts.pending, background: COLORS.borderStrong }} />
              </div>
              <div style={{ color: COLORS.textMuted, fontSize: 11 }}>
                <span style={{ color: COLORS.accent, fontWeight: 700 }}>{f.counts.avail}</span> / {f.counts.avail + f.counts.maybe + f.counts.unavail + f.counts.pending}
              </div>
            </div>
          </MCard>
        );
      })}
    </MobileShell>
  );
};

// ─────────────────────────────────────────────────────────────
// INBOX / NOTIFS
// ─────────────────────────────────────────────────────────────
const NotifsScreen = ({ platform = 'ios' }) => {
  const tones = { fixture: 'sky', post: 'purple', avail: 'amber', vote: 'accent' };
  const icons = { fixture: 'cal', post: 'post', avail: 'check', vote: 'trophy' };
  return (
    <MobileShell
      title="Inbox"
      subtitle="3 unread"
      platform={platform}
      headerRight={
        <div style={{ color: COLORS.sky, fontSize: 13, fontWeight: 600, padding: 10 }}>Mark all read</div>
      }
      tab="notifs"
    >
      {/* Group: Today */}
      <div style={{ color: COLORS.textMuted, fontSize: 11, fontWeight: 700, letterSpacing: 0.5, textTransform: 'uppercase', margin: '4px 4px 10px' }}>Today</div>
      <div style={{ background: COLORS.surface, borderRadius: 16, border: `1px solid ${COLORS.border}`, overflow: 'hidden', marginBottom: 16 }}>
        {NOTIFS.slice(0, 3).map((n, i, arr) => (
          <div key={n.id} style={{
            display: 'flex', alignItems: 'flex-start', gap: 12, padding: 14,
            borderBottom: i < arr.length - 1 ? `1px solid ${COLORS.border}` : 'none',
            background: n.unread ? 'rgba(56,189,248,0.04)' : 'transparent',
          }}>
            <div style={{
              width: 38, height: 38, borderRadius: 10, flexShrink: 0,
              background: `rgba(${n.type === 'fixture' ? '56,189,248' : n.type === 'post' ? '139,92,246' : n.type === 'avail' ? '245,158,11' : '34,197,94'}, 0.18)`,
              color: COLORS[tones[n.type]],
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <Icon name={icons[n.type]} size={18} />
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
                <div style={{ color: 'white', fontSize: 14, fontWeight: 700, flex: 1 }}>{n.title}</div>
                <div style={{ color: COLORS.textMuted, fontSize: 11 }}>{n.time}</div>
              </div>
              <div style={{ color: COLORS.textSecondary, fontSize: 13, lineHeight: 1.4, marginTop: 2 }}>{n.body}</div>
            </div>
            {n.unread && <div style={{ width: 8, height: 8, borderRadius: 999, background: COLORS.sky, marginTop: 6 }} />}
          </div>
        ))}
      </div>

      {/* Group: Earlier */}
      <div style={{ color: COLORS.textMuted, fontSize: 11, fontWeight: 700, letterSpacing: 0.5, textTransform: 'uppercase', margin: '4px 4px 10px' }}>Earlier this week</div>
      <div style={{ background: COLORS.surface, borderRadius: 16, border: `1px solid ${COLORS.border}`, overflow: 'hidden' }}>
        {NOTIFS.slice(3).map((n, i, arr) => (
          <div key={n.id} style={{
            display: 'flex', alignItems: 'flex-start', gap: 12, padding: 14,
            borderBottom: i < arr.length - 1 ? `1px solid ${COLORS.border}` : 'none',
          }}>
            <div style={{
              width: 38, height: 38, borderRadius: 10, flexShrink: 0,
              background: `rgba(${n.type === 'fixture' ? '56,189,248' : n.type === 'post' ? '139,92,246' : n.type === 'avail' ? '245,158,11' : '34,197,94'}, 0.18)`,
              color: COLORS[tones[n.type]],
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <Icon name={icons[n.type]} size={18} />
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
                <div style={{ color: 'white', fontSize: 14, fontWeight: 700, flex: 1 }}>{n.title}</div>
                <div style={{ color: COLORS.textMuted, fontSize: 11 }}>{n.time}</div>
              </div>
              <div style={{ color: COLORS.textSecondary, fontSize: 13, lineHeight: 1.4, marginTop: 2 }}>{n.body}</div>
            </div>
          </div>
        ))}
      </div>
    </MobileShell>
  );
};

// ─────────────────────────────────────────────────────────────
// PROFILE
// ─────────────────────────────────────────────────────────────
const ProfileScreen = ({ platform = 'ios' }) => {
  const me = SQUAD[0]; // Asha
  return (
    <MobileShell
      title="Profile"
      platform={platform}
      headerRight={<div style={{ color: COLORS.sky, fontSize: 13, fontWeight: 600, padding: 10 }}>Edit</div>}
      tab="profile"
    >
      {/* Hero */}
      <div style={{
        background: COLORS.surface, border: `1px solid ${COLORS.border}`,
        borderRadius: 18, padding: 20, marginBottom: 16, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10,
      }}>
        <MAvatar initials={me.initials} size={74} tone="accent" />
        <div style={{ color: 'white', fontSize: 20, fontWeight: 800 }}>{me.name}</div>
        <div style={{ display: 'flex', gap: 6 }}>
          <MBadge tone="accent">Captain</MBadge>
          {me.pos.map(p => <MBadge key={p} tone="slate">{p}</MBadge>)}
        </div>
      </div>

      {/* Season stat row */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8, marginBottom: 16 }}>
        {[
          { l: 'Matches', v: me.matches, c: 'textPrimary' },
          { l: 'Runs',    v: me.bat,     c: 'accent' },
          { l: 'Average', v: me.avg.toFixed(1), c: 'sky' },
        ].map(s => (
          <div key={s.l} style={{ background: COLORS.surface, border: `1px solid ${COLORS.border}`, borderRadius: 14, padding: 14, textAlign: 'center' }}>
            <div style={{ color: COLORS.textMuted, fontSize: 10, fontWeight: 700, letterSpacing: 0.4, textTransform: 'uppercase' }}>{s.l}</div>
            <div style={{ color: COLORS[s.c], fontSize: 22, fontWeight: 800, marginTop: 6 }}>{s.v}</div>
          </div>
        ))}
      </div>

      {/* Last knock */}
      <MCard style={{ marginBottom: 16 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
          <div style={{ color: COLORS.textMuted, fontSize: 10, fontWeight: 700, letterSpacing: 0.4, textTransform: 'uppercase' }}>Last knock</div>
          <MBadge tone="accent">Won</MBadge>
        </div>
        <div style={{ color: 'white', fontSize: 24, fontWeight: 800 }}>81 <span style={{ color: COLORS.textSecondary, fontSize: 14, fontWeight: 600 }}>(62)</span></div>
        <div style={{ color: COLORS.textSecondary, fontSize: 12, marginTop: 4 }}>{'vs St Mary\u2019s · Sun 10 May · 10\u00d7 4s, 2\u00d7 6s'}</div>
        <div style={{ marginTop: 12, paddingTop: 12, borderTop: `1px solid ${COLORS.border}`, display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ color: COLORS.amber }}><Icon name="trophy" size={14} /></span>
          <div style={{ color: COLORS.amber, fontSize: 12, fontWeight: 700 }}>Player of the match</div>
        </div>
      </MCard>

      {/* Settings list */}
      <div style={{ background: COLORS.surface, border: `1px solid ${COLORS.border}`, borderRadius: 16, overflow: 'hidden' }}>
        {[
          { icon: 'bell', label: 'Notifications', detail: 'All on' },
          { icon: 'cal',  label: 'Calendar sync', detail: 'iOS' },
          { icon: 'users', label: 'Roles & permissions', detail: 'Captain' },
          { icon: 'gear', label: 'App settings', detail: '' },
        ].map((r, i, arr) => (
          <div key={r.label} style={{
            display: 'flex', alignItems: 'center', gap: 14, padding: '14px 16px',
            borderBottom: i < arr.length - 1 ? `1px solid ${COLORS.border}` : 'none',
          }}>
            <div style={{
              width: 32, height: 32, borderRadius: 8, background: COLORS.surfaceAlt,
              border: `1px solid ${COLORS.border}`, color: COLORS.textSecondary,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <Icon name={r.icon} size={16} />
            </div>
            <div style={{ flex: 1, color: 'white', fontSize: 15, fontWeight: 500 }}>{r.label}</div>
            {r.detail && <div style={{ color: COLORS.textMuted, fontSize: 13 }}>{r.detail}</div>}
            <div style={{ color: COLORS.textDisabled }}><Icon name="chev" size={14} /></div>
          </div>
        ))}
      </div>

      {/* Brand footer */}
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, marginTop: 24, opacity: 0.7 }}>
        <img src="assets/crease-mark.png" alt="Crease" style={{ height: 14, width: 'auto', filter: 'brightness(1.4)' }} />
        <div style={{ color: COLORS.textMuted, fontSize: 10, letterSpacing: 0.4 }}>v2.4.1 · Crease</div>
      </div>
    </MobileShell>
  );
};

Object.assign(window, { HomeScreen, FixturesScreen, NotifsScreen, ProfileScreen });