// Sporda — Phase G · Discovery (Scores tab root). 1 mobile + 1 desktop.
// The "everything live now" surface — browse all sports today/tomorrow.

const TODAY_SCHEDULE = [
  { sport: 'Football', icon: '⚽', count: 14, live: 3, matches: [
    { live: true,  min: 67, hs: 2, as: 1, h: 'Arsenal',     hc: 'ARS', hb: '#EF0107', a: 'Liverpool',  ac: 'LIV', ab: '#C8102E', comp: 'PL', star: true },
    { live: true,  min: 32, hs: 0, as: 0, h: 'Real Madrid', hc: 'RMA', hb: '#FFFFFF', a: 'Barcelona',  ac: 'BAR', ab: '#A50044', comp: 'La Liga · El Clásico', derby: true },
    { live: true,  min: 12, hs: 1, as: 0, h: 'Bayern',      hc: 'BAY', hb: '#DC052D', a: 'Dortmund',   ac: 'DOR', ab: '#FDE100', comp: 'Bundesliga' },
    { at: '21:00', h: 'Man City',    hc: 'MCI', hb: '#6CABDD', a: 'Chelsea',    ac: 'CHE', ab: '#034694', comp: 'PL' },
    { at: '22:00', h: 'Inter',       hc: 'INT', hb: '#0068A8', a: 'Juventus',   ac: 'JUV', ab: '#000000', comp: 'Serie A · derby', derby: true },
  ]},
  { sport: 'Basketball', icon: '🏀', count: 8, live: 2, matches: [
    { live: true,  min: 'Q3 4:32', hs: 78, as: 82, h: 'Lakers',  hc: 'LAL', hb: '#552583', a: 'Celtics', ac: 'BOS', ab: '#007A33', comp: 'NBA', star: true },
    { live: true,  min: 'Q2 8:14', hs: 42, as: 38, h: 'Warriors',hc: 'GSW', hb: '#FDB927', a: 'Nuggets', ac: 'DEN', ab: '#0E2240', comp: 'NBA' },
  ]},
  { sport: 'Motorsport', icon: '🏎', count: 1, live: 1, matches: [
    { live: true,  min: 'L34/78', hs: '', as: '', h: 'Verstappen', hc: 'VER', hb: '#1E5BC6', a: 'Norris', ac: 'NOR', ab: '#FF8000', comp: 'Monaco GP · live timing' },
  ]},
  { sport: 'Tennis', icon: '🎾', count: 4, live: 1, matches: [
    { live: true,  min: 'S4 4-4', hs: '7,3,7', as: '6,6,6', h: 'Mendez',  hc: 'MEN', hb: '#1E5BC6', a: 'Volker', ac: 'VOL', ab: '#FFE66D', comp: 'ATP Masters QF · centre' },
  ]},
];

// ===========================================================================
// 018 — DISCOVERY · SCORES (mobile)
// ===========================================================================
const ScreenDiscovery = () => (
  <div className="phone">
    <div className="viewport">
      <StatusBar/>
      <div className="body">
        {/* Header */}
        <div style={{ display: 'flex', alignItems: 'center', padding: '8px 20px 12px', gap: 12 }}>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 12, color: 'var(--text-secondary)', fontWeight: 600 }}>Wednesday · 24 May</div>
            <h1 style={{ margin: '2px 0 0', fontSize: 24, fontWeight: 800, letterSpacing: '-0.01em' }}>All scores</h1>
          </div>
          <RoundBtn><I.search size={18}/></RoundBtn>
          <RoundBtn><I.cal size={16}/></RoundBtn>
        </div>

        {/* Date scrubber */}
        <div style={{ display: 'flex', gap: 6, padding: '0 20px 16px', overflowX: 'auto', scrollbarWidth: 'none' }}>
          {[
            { d: 'Mon', n: '22' }, { d: 'Tue', n: '23' }, { d: 'Wed', n: '24', active: true }, { d: 'Thu', n: '25' }, { d: 'Fri', n: '26' }, { d: 'Sat', n: '27' }, { d: 'Sun', n: '28' },
          ].map(x => (
            <div key={x.n} style={{
              flex: 'none', minWidth: 52, padding: '8px 12px',
              borderRadius: 12, textAlign: 'center',
              background: x.active ? 'var(--accent)' : 'var(--bg-surface)',
              color: x.active ? 'var(--accent-ink)' : 'var(--text-primary)',
              border: '1px solid ' + (x.active ? 'var(--accent)' : 'var(--border-hairline)'),
            }}>
              <div style={{ fontSize: 10, fontWeight: 700, opacity: 0.7, letterSpacing: '0.04em' }}>{x.d}</div>
              <div className="mono" style={{ fontSize: 16, fontWeight: 800, marginTop: 2 }}>{x.n}</div>
            </div>
          ))}
        </div>

        {/* Sport filter pills */}
        <div style={{ display: 'flex', gap: 8, padding: '0 20px 14px', overflowX: 'auto', scrollbarWidth: 'none' }}>
          {[
            { lbl: 'All sports', live: 7, active: true },
            { lbl: '⚽ Football',  live: 3 },
            { lbl: '🏀 Basket',    live: 2 },
            { lbl: '🏎 F1',        live: 1 },
            { lbl: '🎾 Tennis',    live: 1 },
            { lbl: '🏏 Cricket',   live: 0 },
            { lbl: '🏈 NFL',       live: 0 },
          ].map(p => (
            <div key={p.lbl} style={{
              display: 'inline-flex', alignItems: 'center', gap: 6,
              padding: '8px 14px', borderRadius: 999, flex: 'none',
              background: p.active ? 'var(--accent)' : 'var(--bg-inset)',
              color: p.active ? 'var(--accent-ink)' : 'var(--text-primary)',
              border: '1px solid ' + (p.active ? 'var(--accent)' : 'var(--border-hairline)'),
              fontSize: 12, fontWeight: 600,
            }}>
              <span>{p.lbl}</span>
              {p.live > 0 && (
                <span style={{
                  display: 'inline-flex', alignItems: 'center', gap: 3,
                  padding: '2px 6px', borderRadius: 4,
                  background: p.active ? 'rgba(0,0,0,0.15)' : 'rgba(255,59,92,0.15)',
                  color: p.active ? '#0A1400' : 'var(--live)',
                  fontSize: 10, fontWeight: 800,
                }}>
                  <span style={{ width: 4, height: 4, borderRadius: '50%', background: p.active ? '#0A1400' : 'var(--live)' }}/>
                  {p.live}
                </span>
              )}
            </div>
          ))}
        </div>

        {/* Followed only toggle row */}
        <div style={{ padding: '0 20px 8px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 11, color: 'var(--text-secondary)' }}>
            <span className="pill live" style={{ height: 22, fontSize: 9 }}><span className="dot"/>7 LIVE</span>
            <span style={{ fontWeight: 600 }}>23 fixtures today</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <span style={{ fontSize: 11, color: 'var(--text-secondary)', fontWeight: 700 }}>Followed only</span>
            <div className="toggle"/>
          </div>
        </div>

        {/* Live now hero strip */}
        <div style={{ padding: '12px 20px 4px' }}>
          <div style={{
            background: 'var(--hero-grad)',
            border: '1px solid rgba(255,59,92,0.20)',
            borderRadius: 18, padding: 16, marginBottom: 14,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11, fontWeight: 800, color: 'var(--live)', letterSpacing: '0.06em' }}>
                <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--live)', animation: 'pulse 1.2s ease-in-out infinite' }}/>
                LIVE NOW · 7 MATCHES
              </div>
              <button style={{ fontSize: 11, color: 'var(--accent)', fontWeight: 700, display: 'inline-flex', alignItems: 'center', gap: 4 }}>
                Watch all <I.chevR size={12}/>
              </button>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr auto 1fr', alignItems: 'center', gap: 10 }}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
                <Crest name="Arsenal" code="ARS" bg="#EF0107"/>
                <span style={{ fontSize: 11, fontWeight: 700 }}>Arsenal</span>
              </div>
              <div style={{ textAlign: 'center' }}>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
                  <span className="score" style={{ color: 'var(--accent)' }}>2</span>
                  <span style={{ color: 'var(--text-muted)', fontSize: 18 }}>:</span>
                  <span className="score">1</span>
                </div>
                <div className="mono" style={{ fontSize: 11, color: 'var(--text-secondary)', marginTop: 4 }}>67' · 2nd half</div>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
                <Crest name="Liverpool" code="LIV" bg="#C8102E"/>
                <span style={{ fontSize: 11, fontWeight: 700 }}>Liverpool</span>
              </div>
            </div>
            <div style={{ marginTop: 8, fontSize: 11, color: 'var(--text-muted)', textAlign: 'center' }}>Premier League · Anfield</div>
          </div>
        </div>

        {/* Sport-grouped sections */}
        {TODAY_SCHEDULE.map(section => (
          <div key={section.sport}>
            <div style={{ padding: '8px 20px 10px', display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ fontSize: 18 }}>{section.icon}</span>
              <span style={{ fontSize: 13, fontWeight: 800 }}>{section.sport}</span>
              <span style={{ fontSize: 10, color: 'var(--text-muted)', fontWeight: 700 }}>{section.count} matches · {section.live} live</span>
              <button style={{ marginLeft: 'auto', fontSize: 11, color: 'var(--text-secondary)', fontWeight: 600, display: 'inline-flex', alignItems: 'center', gap: 3 }}>
                See all <I.chevR size={12}/>
              </button>
            </div>
            <div style={{ padding: '0 20px 12px' }}>
              {section.matches.map((m, i) => (
                <div key={i} style={{
                  background: m.star ? 'var(--hero-grad)' : 'var(--bg-surface)',
                  border: '1px solid ' + (m.derby ? '#C8102E40' : 'var(--border-hairline)'),
                  borderRadius: 14, padding: '10px 14px', marginBottom: 8,
                }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 10, color: 'var(--text-secondary)' }}>
                      <span style={{ fontWeight: 700 }}>{m.comp}</span>
                      {m.derby && <span style={{ padding: '1px 5px', background: 'rgba(200,16,46,0.15)', color: '#FF6B7A', borderRadius: 3, fontSize: 8, fontWeight: 800, letterSpacing: '0.04em' }}>DERBY</span>}
                    </div>
                    {m.live ? (
                      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 3, fontSize: 10, color: 'var(--live)', fontWeight: 800 }}>
                        <span style={{ width: 5, height: 5, borderRadius: '50%', background: 'var(--live)', animation: 'pulse 1.2s infinite' }}/>
                        {m.min}
                      </span>
                    ) : (
                      <span className="mono" style={{ fontSize: 11, color: 'var(--text-muted)', fontWeight: 600 }}>{m.at}</span>
                    )}
                  </div>
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr auto 1fr', alignItems: 'center', gap: 10 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8, justifyContent: 'flex-end' }}>
                      <span style={{ fontSize: 13, fontWeight: 600 }}>{m.h}</span>
                      <Crest name={m.h} code={m.hc} bg={m.hb}/>
                    </div>
                    <div style={{ textAlign: 'center', minWidth: 70 }}>
                      {m.live ? (
                        <div className="mono" style={{ fontSize: 16, fontWeight: 800 }}>
                          {String(m.hs).split(',').length > 1
                            ? <span style={{ fontSize: 11 }}>{m.hs} <span style={{ color: 'var(--text-muted)' }}>·</span> {m.as}</span>
                            : <>{m.hs} <span style={{ color: 'var(--text-muted)', fontSize: 12 }}>:</span> {m.as}</>}
                        </div>
                      ) : (
                        <span style={{ fontSize: 10, color: 'var(--text-muted)', fontWeight: 700 }}>vs</span>
                      )}
                    </div>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <Crest name={m.a} code={m.ac} bg={m.ab}/>
                      <span style={{ fontSize: 13, fontWeight: 600 }}>{m.a}</span>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        ))}

        <SourceLine text="Schedule · LiveScore / Opta · refreshed 12s ago"/>
      </div>
      <BottomNav active="matches"/>
    </div>
  </div>
);

// ===========================================================================
// 018D — DISCOVERY · SCORES (desktop)
// Layout: 200px sidebar (sports + leagues) + main grid (date+filters+sections)
// ===========================================================================
const ScreenDiscoveryDesktop = () => (
  <DesktopPage>
    <TopNav active="matches"/>
    <div style={{ flex: 1, display: 'flex', overflow: 'hidden' }}>
      {/* Left sidebar — sport tree */}
      <div style={{
        width: 220, flex: 'none',
        borderRight: '1px solid var(--border-hairline)',
        padding: '24px 16px',
        overflowY: 'auto',
      }}>
        <div className="tag-micro" style={{ color: 'var(--text-muted)', marginBottom: 10, padding: '0 8px' }}>Sports</div>
        {[
          { lbl: 'All sports', icon: '🏆', live: 7, active: true },
          { lbl: 'Football',  icon: '⚽', live: 3 },
          { lbl: 'Basketball',icon: '🏀', live: 2 },
          { lbl: 'Motorsport',icon: '🏎', live: 1 },
          { lbl: 'Tennis',    icon: '🎾', live: 1 },
          { lbl: 'Cricket',   icon: '🏏', live: 0 },
          { lbl: 'NFL',       icon: '🏈', live: 0 },
          { lbl: 'MMA',       icon: '🥊', live: 0 },
          { lbl: 'Esports',   icon: '🎮', live: 0 },
        ].map(s => (
          <button key={s.lbl} style={{
            display: 'flex', alignItems: 'center', gap: 10,
            width: '100%', padding: '8px 10px', marginBottom: 2,
            borderRadius: 8, textAlign: 'left',
            background: s.active ? 'var(--bg-surface)' : 'transparent',
            color: s.active ? 'var(--text-primary)' : 'var(--text-secondary)',
            fontSize: 13, fontWeight: s.active ? 700 : 500,
            position: 'relative',
          }}>
            <span style={{ fontSize: 14, width: 18, textAlign: 'center' }}>{s.icon}</span>
            <span style={{ flex: 1 }}>{s.lbl}</span>
            {s.live > 0 && (
              <span style={{ fontSize: 10, fontWeight: 800, color: s.active ? 'var(--live)' : 'var(--text-muted)' }} className="mono">{s.live}</span>
            )}
          </button>
        ))}

        <div className="tag-micro" style={{ color: 'var(--text-muted)', margin: '20px 0 10px', padding: '0 8px' }}>Your leagues</div>
        {[
          { code: 'PL',  bg: '#3D5AFE', name: 'Premier League',  live: 2 },
          { code: 'NBA', bg: '#C8102E', name: 'NBA',             live: 2 },
          { code: 'F1',  bg: '#FFFFFF', name: 'Formula 1',        live: 1 },
          { code: 'LL',  bg: '#EC4899', name: 'La Liga',         live: 1 },
          { code: 'UCL', bg: '#A855F7', name: 'Champions League', live: 0 },
        ].map(l => (
          <button key={l.code} style={{
            display: 'flex', alignItems: 'center', gap: 10,
            width: '100%', padding: '8px 10px', marginBottom: 2,
            borderRadius: 8, textAlign: 'left', color: 'var(--text-secondary)',
            fontSize: 12, fontWeight: 500,
          }}>
            <span style={{ width: 18, height: 18, borderRadius: 4, background: l.bg, color: l.bg === '#FFFFFF' ? '#0A1400' : 'white', fontSize: 9, fontWeight: 800, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{l.code}</span>
            <span style={{ flex: 1 }}>{l.name}</span>
            {l.live > 0 && <span className="mono" style={{ fontSize: 10, color: 'var(--live)', fontWeight: 800 }}>{l.live}</span>}
          </button>
        ))}
      </div>

      {/* Main */}
      <div style={{ flex: 1, overflowY: 'auto', padding: '24px 32px' }}>
        {/* Header bar */}
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 20 }}>
          <div>
            <div style={{ fontSize: 12, color: 'var(--text-secondary)', fontWeight: 600 }}>Wednesday · 24 May 2026</div>
            <h1 style={{ margin: '4px 0 0', fontSize: 32, fontWeight: 800, letterSpacing: '-0.01em' }}>All scores</h1>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <span style={{ fontSize: 12, color: 'var(--text-secondary)', fontWeight: 600 }}>Followed only</span>
            <div className="toggle"/>
            <button style={{ padding: '8px 14px', background: 'var(--bg-surface)', border: '1px solid var(--border-hairline)', borderRadius: 8, fontSize: 12, fontWeight: 600, display: 'inline-flex', alignItems: 'center', gap: 6 }}>
              <I.cal size={14}/> Pick date
            </button>
          </div>
        </div>

        {/* Date scrubber */}
        <div style={{ display: 'flex', gap: 8, marginBottom: 20, overflowX: 'auto', scrollbarWidth: 'none' }}>
          {[
            { d: 'Mon', n: '22' }, { d: 'Tue', n: '23' }, { d: 'Wed', n: '24', active: true }, { d: 'Thu', n: '25' }, { d: 'Fri', n: '26' }, { d: 'Sat', n: '27' }, { d: 'Sun', n: '28' }, { d: 'Mon', n: '29' }, { d: 'Tue', n: '30' },
          ].map(x => (
            <div key={x.n} style={{
              flex: 'none', padding: '10px 14px', borderRadius: 10, textAlign: 'center', minWidth: 64,
              background: x.active ? 'var(--accent)' : 'var(--bg-surface)',
              color: x.active ? 'var(--accent-ink)' : 'var(--text-primary)',
              border: '1px solid ' + (x.active ? 'var(--accent)' : 'var(--border-hairline)'),
            }}>
              <div style={{ fontSize: 10, fontWeight: 700, opacity: 0.7, letterSpacing: '0.04em' }}>{x.d}</div>
              <div className="mono" style={{ fontSize: 18, fontWeight: 800, marginTop: 2 }}>{x.n}</div>
            </div>
          ))}
        </div>

        {/* Live now banner */}
        <div style={{ background: 'var(--hero-grad)', border: '1px solid rgba(255,59,92,0.20)', borderRadius: 16, padding: 18, marginBottom: 20, display: 'flex', alignItems: 'center', gap: 18 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, fontWeight: 800, color: 'var(--live)', letterSpacing: '0.06em' }}>
            <span style={{ width: 7, height: 7, borderRadius: '50%', background: 'var(--live)', animation: 'pulse 1.2s infinite' }}/>
            LIVE NOW · 7 MATCHES
          </div>
          <div style={{ flex: 1, display: 'flex', gap: 14 }}>
            {TODAY_SCHEDULE.flatMap(s => s.matches.filter(m => m.live)).slice(0, 3).map((m, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 12px', background: 'rgba(0,0,0,0.3)', borderRadius: 10 }}>
                <span style={{ fontSize: 11, fontWeight: 700 }}>{m.hc}</span>
                <span className="mono" style={{ fontSize: 13, fontWeight: 800 }}>{m.hs}–{m.as}</span>
                <span style={{ fontSize: 11, fontWeight: 700 }}>{m.ac}</span>
                <span style={{ fontSize: 9, color: 'var(--live)', fontWeight: 800, marginLeft: 4 }}>{typeof m.min === 'number' ? m.min + "'" : m.min}</span>
              </div>
            ))}
          </div>
          <button style={{ padding: '10px 18px', background: 'var(--accent)', color: 'var(--accent-ink)', borderRadius: 999, fontSize: 13, fontWeight: 700, display: 'inline-flex', alignItems: 'center', gap: 6 }}>
            <I.play size={14}/> Multi-view
          </button>
        </div>

        {/* Sport-grouped 2-col grid */}
        {TODAY_SCHEDULE.map(section => (
          <div key={section.sport} style={{ marginBottom: 24 }}>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 10 }}>
              <span style={{ fontSize: 20 }}>{section.icon}</span>
              <span style={{ fontSize: 18, fontWeight: 800 }}>{section.sport}</span>
              <span style={{ fontSize: 12, color: 'var(--text-muted)' }}>{section.count} matches · {section.live} live</span>
              <button style={{ marginLeft: 'auto', fontSize: 12, color: 'var(--text-secondary)', fontWeight: 600, display: 'inline-flex', alignItems: 'center', gap: 4 }}>
                See all <I.chevR size={12}/>
              </button>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
              {section.matches.map((m, i) => (
                <div key={i} style={{
                  background: m.star ? 'var(--hero-grad)' : 'var(--bg-surface)',
                  border: '1px solid ' + (m.derby ? '#C8102E40' : 'var(--border-hairline)'),
                  borderRadius: 12, padding: '10px 14px',
                }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 6 }}>
                    <span style={{ fontSize: 10, color: 'var(--text-secondary)', fontWeight: 700 }}>{m.comp}</span>
                    {m.live ? (
                      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 3, fontSize: 10, color: 'var(--live)', fontWeight: 800 }}>
                        <span style={{ width: 5, height: 5, borderRadius: '50%', background: 'var(--live)' }}/>
                        {m.min}
                      </span>
                    ) : (
                      <span className="mono" style={{ fontSize: 11, color: 'var(--text-muted)', fontWeight: 600 }}>{m.at}</span>
                    )}
                  </div>
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 60px 1fr', alignItems: 'center', gap: 8 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 6, justifyContent: 'flex-end' }}>
                      <span style={{ fontSize: 12, fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{m.h}</span>
                      <Crest name={m.h} code={m.hc} bg={m.hb}/>
                    </div>
                    <div className="mono" style={{ textAlign: 'center', fontSize: 13, fontWeight: 800 }}>
                      {m.live ? (typeof m.hs === 'number' || (m.hs !== '' && !m.hs.includes(',')) ? `${m.hs}–${m.as}` : <span style={{ fontSize: 9 }}>{m.hs}·{m.as}</span>) : 'vs'}
                    </div>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                      <Crest name={m.a} code={m.ac} bg={m.ab}/>
                      <span style={{ fontSize: 12, fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{m.a}</span>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        ))}

        <div style={{ padding: '8px 0 24px', fontSize: 11, color: 'var(--text-muted)' }}>Schedule · LiveScore / Opta · refreshed 12s ago</div>
      </div>
    </div>
  </DesktopPage>
);

Object.assign(window, { ScreenDiscovery, ScreenDiscoveryDesktop });