// Sporda — Session 2 cont'd: MMA, Esports.

// ===========================================================================
// 015 — MMA · Round scoring + sig strikes (Stats tab)
// ===========================================================================
const ScreenMMA = () => {
  const f1 = { last: 'Topuria',  first: 'Ilia',     country: '🇪🇸', record: '15–0', age: 28 };
  const f2 = { last: 'Holloway', first: 'Max',      country: '🇺🇸', record: '26–8', age: 33 };
  // Each judge's round-by-round score
  const cards = [
    { judge: "Sal D'Amato",          r: [10, 10, 9,  null, null] },
    { judge: 'Derek Cleary',         r: [10, 10, 10, null, null] },
    { judge: 'Junichiro Kamijo',     r: [10, 9,  9,  null, null] },
  ];
  // Significant strikes by target
  const strikes = {
    head: { f1: 38, f2: 24 },
    body: { f1: 22, f2: 14 },
    leg:  { f1: 11, f2: 9  },
  };
  return (
    <div className="phone">
      <div className="viewport">
        <StatusBar/>
        <div className="body">
          <SportHeader comp="UFC 318 · Featherweight Title" subline="Main event · 5 rounds">
            <div style={{ padding: '0 20px 16px' }}>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr auto 1fr', alignItems: 'center', gap: 8, textAlign: 'center' }}>
                {[f1, f2].map((f, i) => (
                  <React.Fragment key={f.last}>
                    {i === 1 && (
                      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
                        <div className="pill live" style={{ marginBottom: 2 }}><span className="dot"/>R3 · 2:34</div>
                        <span className="score lg" style={{ color: 'var(--accent)', fontSize: 36 }}>vs</span>
                        <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>FW title bout</div>
                      </div>
                    )}
                    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
                      <div style={{
                        width: 80, height: 80, borderRadius: '50%',
                        background: i === 0 ? 'linear-gradient(135deg, #C8FF3E 0%, #5BC410 100%)' : 'linear-gradient(135deg, #3D5AFE 0%, #1E2EAE 100%)',
                        display: 'flex', alignItems: 'center', justifyContent: 'center',
                        fontWeight: 800, fontSize: 22, color: i === 0 ? '#0A1400' : 'white',
                        boxShadow: i === 0 ? '0 6px 24px rgba(200,255,62,0.3)' : 'none',
                      }}>{f.first[0]}{f.last[0]}</div>
                      <div style={{ fontWeight: 800, fontSize: 14, lineHeight: 1.1 }}>{f.first}<br/>{f.last}</div>
                      <div style={{ fontSize: 11, color: 'var(--text-secondary)' }}>{f.country} · <span className="mono">{f.record}</span></div>
                    </div>
                  </React.Fragment>
                ))}
              </div>
              <div style={{ marginTop: 14, fontSize: 11, color: 'var(--text-muted)', textAlign: 'center' }}>Honda Center, Anaheim · 15,402 att.</div>
            </div>
          </SportHeader>

          <SubTabs active="stats"/>

          {/* Judges scorecard */}
          <div style={{ padding: '16px 20px 4px' }}>
            <div className="card">
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
                <span className="tag-micro" style={{ color: 'var(--text-secondary)' }}>Unofficial scorecards</span>
                <span style={{ fontSize: 11, color: 'var(--text-muted)' }}>10-point must</span>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 36px 36px 36px 36px 36px 56px', gap: 6, padding: '4px 0', fontSize: 10, fontWeight: 700, color: 'var(--text-muted)', letterSpacing: '0.05em' }}>
                <span style={{ textTransform: 'uppercase' }}>Judge</span>
                {['R1', 'R2', 'R3', 'R4', 'R5'].map(r => <span key={r} style={{ textAlign: 'center' }}>{r}</span>)}
                <span style={{ textAlign: 'right', textTransform: 'uppercase' }}>Total</span>
              </div>
              {cards.map((c, i) => {
                const total = c.r.reduce((a, v) => a + (v || 0), 0);
                const oppRoundScore = (r) => r === 10 ? 9 : 10;
                return (
                  <div key={c.judge} style={{ display: 'grid', gridTemplateColumns: '1fr 36px 36px 36px 36px 36px 56px', gap: 6, padding: '10px 0', alignItems: 'center', borderTop: '1px solid var(--border-hairline)' }}>
                    <span style={{ fontSize: 12, fontWeight: 600 }}>{c.judge}</span>
                    {c.r.map((r, j) => (
                      <span key={j} className="mono" style={{
                        textAlign: 'center', fontSize: 12, fontWeight: 700,
                        color: r == null ? 'var(--text-muted)' : 'var(--text-primary)',
                      }}>
                        {r == null ? '—' : <>{r}<span style={{ color: 'var(--text-muted)' }}>·{oppRoundScore(r)}</span></>}
                      </span>
                    ))}
                    <span className="mono" style={{ textAlign: 'right', fontSize: 13, fontWeight: 800, color: 'var(--accent)' }}>{total}<span style={{ color: 'var(--text-muted)', fontSize: 11 }}>·{c.r.filter(x => x != null).length * 10 - (total - c.r.filter(x => x != null).length * 9)}</span></span>
                  </div>
                );
              })}
              <div style={{ marginTop: 10, paddingTop: 10, borderTop: '1px dashed var(--border-hairline)', fontSize: 11, color: 'var(--text-secondary)', textAlign: 'center' }}>
                Through 3 rounds, Topuria leads <span style={{ color: 'var(--accent)', fontWeight: 700 }}>2 of 3</span> judges' cards.
              </div>
            </div>
          </div>

          {/* Significant strikes */}
          <div style={{ padding: '12px 20px 4px' }}>
            <div className="card">
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
                <span className="tag-micro" style={{ color: 'var(--text-secondary)' }}>Significant strikes</span>
                <span style={{ fontSize: 11, color: 'var(--text-muted)' }}>Through R3</span>
              </div>
              {/* Bar pairs per target */}
              {[
                { lbl: 'Head', l: strikes.head.f1, r: strikes.head.f2 },
                { lbl: 'Body', l: strikes.body.f1, r: strikes.body.f2 },
                { lbl: 'Leg',  l: strikes.leg.f1,  r: strikes.leg.f2  },
              ].map(s => (
                <StatBar key={s.lbl} lbl={s.lbl} l={s.l} r={s.r} totalL={s.l} totalR={s.r}/>
              ))}
              {/* Totals row */}
              <div style={{ marginTop: 8, paddingTop: 12, borderTop: '1px solid var(--border-hairline)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <div className="mono" style={{ fontSize: 18, fontWeight: 800, color: 'var(--accent)' }}>71</div>
                <div style={{ fontSize: 11, color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.05em', fontWeight: 700 }}>Total landed</div>
                <div className="mono" style={{ fontSize: 18, fontWeight: 800 }}>47</div>
              </div>
            </div>
          </div>

          {/* Control + takedowns */}
          <div style={{ padding: '12px 20px 4px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
            {[
              { lbl: 'Takedowns', l: '2/4', r: '0/3' },
              { lbl: 'Control', l: '3:18', r: '0:42' },
            ].map(m => (
              <div key={m.lbl} className="card" style={{ padding: 14 }}>
                <span className="tag-micro" style={{ color: 'var(--text-secondary)' }}>{m.lbl}</span>
                <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginTop: 10 }}>
                  <span className="mono" style={{ fontSize: 16, fontWeight: 800, color: 'var(--accent)' }}>{m.l}</span>
                  <span className="mono" style={{ fontSize: 16, fontWeight: 800 }}>{m.r}</span>
                </div>
              </div>
            ))}
          </div>

          <SourceLine text="Live data · UFC Stats · updated 8s ago"/>
        </div>
        <BottomNav active="matches"/>
      </div>
    </div>
  );
};

// ===========================================================================
// 016 — ESPORTS · Map score + objective timeline + KDA (Events tab)
// ===========================================================================
const ScreenEsports = () => {
  const teamBlue = { name: 'T1',     color: '#E2012D', side: 'blue' };
  const teamRed  = { name: 'Gen.G',  color: '#AA8B56', side: 'red'  };
  // Objective events on the timeline (minute, team-side, kind)
  const events = [
    { m: 3,    s: 'blue', k: 'firstblood' },
    { m: 7,    s: 'blue', k: 'dragon-inf' },
    { m: 10,   s: 'red',  k: 'rifth' },
    { m: 14,   s: 'blue', k: 'dragon-mt' },
    { m: 18,   s: 'red',  k: 'tower' },
    { m: 22,   s: 'blue', k: 'baron' },
    { m: 24,   s: 'blue', k: 'tower' },
    { m: 27,   s: 'red',  k: 'dragon-clo' },
    { m: 30,   s: 'blue', k: 'baron' },
  ];
  const objectiveIcon = {
    firstblood: { c: '#FF3B5C', sym: '⚔' },
    'dragon-inf': { c: '#FF6B6B', sym: '🐉' },
    'dragon-mt': { c: '#8B5A2B', sym: '🐉' },
    'dragon-clo': { c: '#22C55E', sym: '🐉' },
    rifth: { c: '#FFE66D', sym: '◆' },
    baron: { c: '#A855F7', sym: '★' },
    tower: { c: 'var(--text-secondary)', sym: '▲' },
  };

  const kda = {
    blue: [
      { role: 'TOP', name: 'Doran', champ: 'Aatrox',    k: 4, d: 2, a: 7 },
      { role: 'JG',  name: 'Oner',  champ: 'Viego',     k: 6, d: 1, a: 8 },
      { role: 'MID', name: 'Faker', champ: 'Azir',      k: 8, d: 0, a: 6 },
      { role: 'BOT', name: 'Gumayusi', champ: 'Jinx',   k: 7, d: 2, a: 5 },
      { role: 'SUP', name: 'Keria', champ: 'Rakan',     k: 1, d: 3, a: 14 },
    ],
    red: [
      { role: 'TOP', name: 'Kiin',  champ: 'Renekton',  k: 2, d: 6, a: 1 },
      { role: 'JG',  name: 'Canyon',champ: 'Vi',        k: 3, d: 5, a: 2 },
      { role: 'MID', name: 'Chovy', champ: 'Orianna',   k: 4, d: 4, a: 3 },
      { role: 'BOT', name: 'Peyz',  champ: 'Aphelios',  k: 1, d: 7, a: 1 },
      { role: 'SUP', name: 'Lehends', champ: 'Lulu',    k: 0, d: 4, a: 5 },
    ],
  };
  const totalK = (side) => kda[side].reduce((s, p) => s + p.k, 0);

  return (
    <div className="phone">
      <div className="viewport">
        <StatusBar/>
        <div className="body">
          <SportHeader comp="LoL Worlds · Semifinal" subline="Map 3 of 5">
            <div style={{ padding: '0 20px 16px' }}>
              <div style={{
                borderRadius: 'var(--r-card-lg)', padding: 18,
                background: 'linear-gradient(135deg, #1A1230 0%, #2A1840 60%, #182320 100%)',
              }}>
                {/* Series score */}
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
                  <div className="pill live"><span className="dot"/>LIVE · 32:14</div>
                  <div style={{ fontSize: 11, color: 'var(--text-secondary)' }}>Series · best of 5</div>
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr auto 1fr', alignItems: 'center', gap: 10, textAlign: 'center' }}>
                  <div>
                    <div style={{ width: 56, height: 56, borderRadius: '50%', background: teamBlue.color, margin: '0 auto', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 800, color: 'white', fontSize: 18 }}>T1</div>
                    <div style={{ marginTop: 8, fontSize: 13, fontWeight: 700 }}>T1</div>
                    <div style={{ fontSize: 11, color: 'var(--text-secondary)' }}>LCK · KR</div>
                  </div>
                  <div>
                    <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
                      <span className="score lg" style={{ color: 'var(--accent)' }}>{totalK('blue')}</span>
                      <span style={{ color: 'var(--text-muted)', fontSize: 22 }}>–</span>
                      <span className="score lg">{totalK('red')}</span>
                    </div>
                    <div style={{ marginTop: 6, fontSize: 11, color: 'var(--text-muted)' }}>Series <span style={{ color: 'var(--accent)', fontWeight: 800 }}>2</span> – 0</div>
                  </div>
                  <div>
                    <div style={{ width: 56, height: 56, borderRadius: '50%', background: teamRed.color, margin: '0 auto', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 800, color: 'white', fontSize: 12 }}>GEN</div>
                    <div style={{ marginTop: 8, fontSize: 13, fontWeight: 700 }}>Gen.G</div>
                    <div style={{ fontSize: 11, color: 'var(--text-secondary)' }}>LCK · KR</div>
                  </div>
                </div>
                {/* Gold lead bar */}
                <div style={{ marginTop: 14 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: 'var(--text-secondary)', marginBottom: 6 }}>
                    <span className="mono" style={{ color: 'var(--accent)', fontWeight: 700 }}>+8.4k</span>
                    <span>Gold lead</span>
                    <span className="mono">62.1k vs 53.7k</span>
                  </div>
                  <div style={{ height: 4, background: 'rgba(255,255,255,0.08)', borderRadius: 2, position: 'relative', overflow: 'hidden' }}>
                    <div style={{ position: 'absolute', left: '50%', top: 0, bottom: 0, width: '18%', background: 'var(--accent)', borderRadius: 2 }}/>
                    <div style={{ position: 'absolute', left: '50%', top: -3, bottom: -3, width: 1, background: 'var(--text-muted)' }}/>
                  </div>
                </div>
              </div>
            </div>
          </SportHeader>

          <SubTabs active="events"/>

          {/* Objective timeline */}
          <div style={{ padding: '16px 20px 4px' }}>
            <div className="card">
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
                <span className="tag-micro" style={{ color: 'var(--text-secondary)' }}>Objective timeline</span>
                <span className="mono" style={{ fontSize: 11, color: 'var(--text-muted)' }}>0 — 35:00</span>
              </div>
              {/* Timeline */}
              <div style={{ position: 'relative', height: 70 }}>
                {/* Center axis */}
                <div style={{ position: 'absolute', left: 0, right: 0, top: '50%', height: 1, background: 'var(--border-strong)' }}/>
                {/* Minute markers */}
                {[0, 10, 20, 30].map(m => (
                  <div key={m} style={{ position: 'absolute', left: `${(m / 35) * 100}%`, top: '50%', transform: 'translate(-50%, -50%)' }}>
                    <div style={{ width: 1, height: 6, background: 'var(--text-muted)', margin: '0 auto' }}/>
                    <div style={{ fontSize: 9, color: 'var(--text-muted)', marginTop: 18 }} className="mono">{m}</div>
                  </div>
                ))}
                {/* Events */}
                {events.map((e, i) => {
                  const icon = objectiveIcon[e.k];
                  const top = e.s === 'blue' ? 0 : 36;
                  return (
                    <div key={i} style={{ position: 'absolute', left: `${(e.m / 35) * 100}%`, top, transform: 'translateX(-50%)' }}>
                      <div style={{
                        width: 22, height: 22, borderRadius: '50%',
                        background: icon.c, color: '#0A1400',
                        display: 'flex', alignItems: 'center', justifyContent: 'center',
                        fontSize: 11, fontWeight: 800, border: '2px solid var(--bg-surface)',
                      }}>{icon.sym}</div>
                    </div>
                  );
                })}
                {/* Side labels */}
                <div style={{ position: 'absolute', left: 0, top: -4, fontSize: 9, color: 'var(--accent)', fontWeight: 800, letterSpacing: '0.05em' }}>T1</div>
                <div style={{ position: 'absolute', left: 0, bottom: -4, fontSize: 9, color: 'var(--text-secondary)', fontWeight: 800, letterSpacing: '0.05em' }}>GEN</div>
              </div>
              <div style={{ marginTop: 14, display: 'flex', flexWrap: 'wrap', gap: 12, fontSize: 10, color: 'var(--text-secondary)' }}>
                {Object.entries({ baron: 'Baron', 'dragon-inf': 'Infernal', 'dragon-mt': 'Mountain', 'dragon-clo': 'Cloud', rifth: 'Herald', tower: 'Tower' }).map(([k, v]) => (
                  <span key={k} style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
                    <span style={{ width: 10, height: 10, borderRadius: '50%', background: objectiveIcon[k].c, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 7, color: '#0A1400' }}>{objectiveIcon[k].sym}</span>{v}
                  </span>
                ))}
              </div>
            </div>
          </div>

          {/* KDA */}
          <div style={{ padding: '12px 20px 4px' }}>
            <div className="card" style={{ padding: 0 }}>
              <div style={{ padding: '14px 14px 10px', borderBottom: '1px solid var(--border-hairline)' }}>
                <span className="tag-micro" style={{ color: 'var(--text-secondary)' }}>KDA · T1 (blue)</span>
              </div>
              {kda.blue.map((p, i) => (
                <div key={p.name} style={{ display: 'grid', gridTemplateColumns: '36px 1fr 80px 80px', gap: 8, padding: '10px 14px', alignItems: 'center', borderTop: i ? '1px solid var(--border-hairline)' : 0 }}>
                  <span style={{ fontSize: 10, color: 'var(--text-muted)', fontWeight: 800, letterSpacing: '0.05em' }}>{p.role}</span>
                  <div>
                    <div style={{ fontSize: 13, fontWeight: 700 }}>{p.name}</div>
                    <div style={{ fontSize: 11, color: 'var(--text-secondary)' }}>{p.champ}</div>
                  </div>
                  <span className="mono" style={{ textAlign: 'right', fontSize: 13, fontWeight: 700 }}>
                    {p.k}<span style={{ color: 'var(--text-muted)' }}>/{p.d}/</span>{p.a}
                  </span>
                  <span className="mono" style={{ textAlign: 'right', fontSize: 12, color: 'var(--accent)' }}>{p.d ? ((p.k + p.a) / p.d).toFixed(1) : '∞'}</span>
                </div>
              ))}
            </div>
          </div>

          <SourceLine text="Live data · LoL Esports API · updated 1s ago"/>
        </div>
        <BottomNav active="matches"/>
      </div>
    </div>
  );
};

Object.assign(window, { ScreenMMA, ScreenEsports });