// Mock module screens — interactive previews shown on tour cards 2–5.
// Each is a stylised slice of the real Crest screen, not a 1:1 copy.
// All accept { tilt, accent } and render at a fixed virtual size, scaled to fit.

const { useState, useEffect, useRef } = React;

const C = window.TOUR_THEME;

// ─── shared atoms ────────────────────────────────────────────────────────────

// Hook: report current tab/sub-tab to parent whenever it changes.
function useReportTab(onTabChange, tabId) {
  useEffect(() => {
    if (onTabChange && tabId) onTabChange(tabId);
  }, [onTabChange, tabId]);
}

const ScreenChrome = ({ children, label, tabs, activeTab, onTab }) => {
  const stripRef = useRef(null);
  useEffect(() => {
    const strip = stripRef.current;
    if (!strip) return;
    const btn = strip.children[activeTab];
    if (!btn) return;
    // Centre the active tab in the strip without using scrollIntoView.
    const target = btn.offsetLeft - (strip.clientWidth / 2) + (btn.clientWidth / 2);
    strip.scrollTo({ left: Math.max(0, target), behavior: 'smooth' });
  }, [activeTab]);

  return (
    <div className="mock-screen">
      <div className="mock-statusbar">
        <span>9:41</span>
        <span className="mock-statusbar-mid">{label}</span>
        <span className="mock-statusbar-right">●●● ▴ 100</span>
      </div>
      {tabs && (
        <div className="mock-tabs-wrap">
          <div className="mock-tabs" ref={stripRef}>
            {tabs.map((t, i) => (
              <button
                key={t}
                className={`mock-tab ${i === activeTab ? 'active' : ''}`}
                onClick={(e) => { e.stopPropagation(); onTab && onTab(i); }}
              >
                {t}
              </button>
            ))}
          </div>
          <div className="mock-tabs-fade-l"></div>
          <div className="mock-tabs-fade-r"></div>
        </div>
      )}
      <div className="mock-body">{children}</div>
    </div>
  );
};

const Pill = ({ children, tone = 'accent' }) => (
  <span className={`mock-pill mock-pill-${tone}`}>{children}</span>
);

// ─── 1. Match Center ─────────────────────────────────────────────────────────

window.MockMatchCenter = function MockMatchCenter({ onTabChange }) {
  const [tab, setTab] = useState(0);
  const tabs = ['FIXTURES','POST-MATCH','SCOREBOOK'];
  const ids = ['fixtures','post-match','scorebook'];
  useReportTab(onTabChange, ids[tab]);
  return (
    <ScreenChrome label="MATCH CENTER" tabs={tabs} activeTab={tab} onTab={setTab}>
      {tab === 0 && (
        <div className="mc-fixtures-wrap">
        <div className="mc-fixtures">
          {[
            { date: '11 MAY', opp: 'Stade Français CC', venue: 'Bois de Boulogne', tag: 'LEAGUE', fmt: 'T20' },
            { date: '18 MAY', opp: 'Paris Université CC', venue: 'Meudon', tag: 'CUP', fmt: 'T20' },
            { date: '25 MAY', opp: 'Versailles CC', venue: 'Thiverval-G', tag: 'FRIENDLY', fmt: 'T10' },
          ].map((f, i) => (
            <div key={i} className="mc-fixture-card">
              <div className="mc-fixture-date">
                <div className="mc-fixture-day">{f.date.split(' ')[0]}</div>
                <div className="mc-fixture-mon">{f.date.split(' ')[1]}</div>
              </div>
              <div className="mc-fixture-body">
                <div className="mc-fixture-opp">vs {f.opp}</div>
                <div className="mc-fixture-meta">{f.venue} · 14:00</div>
                <div className="mc-fixture-tags">
                  <Pill tone={f.tag === 'LEAGUE' ? 'accent' : f.tag === 'CUP' ? 'gold' : 'muted'}>{f.tag}</Pill>
                  <Pill tone="ghost">{f.fmt}</Pill>
                </div>
              </div>
              <div className="mc-fixture-cta">▸</div>
            </div>
          ))}
        </div>
        </div>
      )}
      {tab === 1 && (
        <div className="mc-empty">Pick a fixture you've played.<br/>Enter the final scorecard.</div>
      )}
      {tab === 2 && (
        <div className="mc-scorebook">
          <div className="mc-score-header">
            <div className="mc-score-team">BECC</div>
            <div className="mc-score-runs">147<span>/4</span></div>
            <div className="mc-score-overs">14.3 ov · vs Stade Français</div>
            <div className="mc-pulse-bar"><div className="mc-pulse-fill" style={{height:'72%'}}></div></div>
          </div>
          <div className="mc-batters">
            {[{n:'J. COURT*',r:54,b:38,sr:142.1},{n:'A. PATEL',r:33,b:24,sr:137.5}].map((p,i)=>(
              <div key={i} className="mc-batter-row">
                <span className="mc-batter-name">{p.n}</span>
                <span className="mc-batter-stat"><b>{p.r}</b> <i>({p.b})</i> SR {p.sr}</span>
              </div>
            ))}
          </div>
          <div className="mc-over-strip">
            {['•','1','4','W','•','2'].map((x,i)=>(
              <span key={i} className={`mc-ball mc-ball-${x==='W'?'w':x==='4'?'four':x==='•'?'dot':'run'}`}>{x}</span>
            ))}
          </div>
          <div className="mc-keypad">
            {['0','1','2','4','6','W'].map(k=>(
              <button key={k} className={`mc-key ${k==='W'?'mc-key-w':k==='4'||k==='6'?'mc-key-boundary':''}`}>{k}</button>
            ))}
          </div>
        </div>
      )}
    </ScreenChrome>
  );
};

// brand-palette avatar tints: navy/blue/gold/slate — no rainbow.
const ROSTER_TINTS = [
  ['#1E3A5F','#0B1424'], // navy-blue
  ['#1F4068','#0F1F35'], // royal-blue
  ['#3E5C76','#0F1F35'], // steel
  ['#7A5520','#2C1F0E'], // gold-brown (WK)
  ['#5C3A1F','#2C1F0E'], // burnt amber
  ['#1E3A5F','#0B1424'], // navy repeat
  ['#2C4A6E','#0B1424'], // slate-blue
];

window.MockRoster = function MockRoster({ onTabChange }) {
  const [sel, setSel] = useState(1);
  const [tab, setTab] = useState(0);
  const ids = ['profile','career','batting','about'];
  useReportTab(onTabChange, ids[tab]);
  const players = [
    { n:'PERSONAL PROFILE', role:'YOU', m:'—', kind:'self' },
    { n:'James Court',     role:'BAT', m:14, num:7,  st:'Available' },
    { n:'Ali Patel',       role:'AR',  m:13, num:11, st:'Available' },
    { n:'Marc Lefèvre',    role:'WK',  m:14, num:1,  st:'Available' },
    { n:'Tom Wright',      role:'BOWL',m:12, num:9,  st:'Injured' },
    { n:'Riku Sharma',     role:'BAT', m:11, num:23, st:'Rested' },
    { n:'Sam Okonkwo',     role:'BOWL',m:10, num:14, st:'Available' },
  ];
  const p = players[sel];
  return (
    <ScreenChrome label="ROSTER" tabs={['Profile','Career','Batting','About']} activeTab={tab} onTab={setTab}>
      <div className="rs-split">
        <div className="rs-sidebar">
          <div className="rs-side-head">PLAYER PROFILES</div>
          {players.map((pp,i)=>{
            const tint = ROSTER_TINTS[Math.min(i, ROSTER_TINTS.length-1)];
            return (
            <button key={i} className={`rs-card ${i===sel?'sel':''} ${pp.kind==='self'?'self':''}`} onClick={(e)=>{e.stopPropagation();setSel(i);}}>
              <span className="rs-radio">{i===sel?'●':'○'}</span>
              <span className="rs-avatar" style={{background:`linear-gradient(135deg, ${tint[0]}, ${tint[1]})`}}>
                {pp.kind==='self'
                  ? <svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="#F59E0B" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="8" r="3.5"/><path d="M5 20c1.5-3.5 4-5 7-5s5.5 1.5 7 5"/></svg>
                  : pp.num}
              </span>
              <span className="rs-meta">
                <span className="rs-name">{pp.n}</span>
                <span className="rs-sub">{pp.role}{pp.kind!=='self'?` · ${pp.m} M`:''}</span>
              </span>
            </button>
          );})}
        </div>
        <div className="rs-detail">
          {p.kind==='self' ? (
            <div className="rs-self">
              <div className="rs-self-mark">
                <svg viewBox="0 0 24 24" width="32" height="32" fill="none" stroke="#F59E0B" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="8" r="3.5"/><path d="M5 20c1.5-3.5 4-5 7-5s5.5 1.5 7 5"/></svg>
              </div>
              <div className="rs-self-title">Your Profile</div>
              <div className="rs-self-body">Settings, account, preferences.</div>
            </div>
          ) : (
            <>
              <div className="rs-hero" style={{background:`linear-gradient(135deg, ${ROSTER_TINTS[Math.min(sel,ROSTER_TINTS.length-1)][0]}, ${ROSTER_TINTS[Math.min(sel,ROSTER_TINTS.length-1)][1]})`}}>
                <div className="rs-hero-num">#{p.num}</div>
                <div className="rs-hero-name">{p.n}</div>
                <div className="rs-hero-role">{p.role==='BAT'?'BATTER':p.role==='BOWL'?'BOWLER':p.role==='AR'?'ALL-ROUNDER':'WICKET-KEEPER'}</div>
                <Pill tone={p.st==='Available'?'success':p.st==='Injured'?'danger':'gold'}>{p.st.toUpperCase()}</Pill>
              </div>
              <div className="rs-stats">
                <div className="rs-stat"><b>{p.m}</b><span>MATCHES</span></div>
                <div className="rs-stat"><b>{[287,341,124,12,418][sel-1]||220}</b><span>RUNS</span></div>
                <div className="rs-stat"><b>{[28.7,31.0,17.7,null,38.0][sel-1]||'—'}</b><span>AVG</span></div>
                <div className="rs-stat"><b>{[142,138,121,null,156][sel-1]||'—'}</b><span>SR</span></div>
              </div>
            </>
          )}
        </div>
      </div>
    </ScreenChrome>
  );
};

// ─── 3. Intelligence Hub ─────────────────────────────────────────────────────

window.MockIntel = function MockIntel({ onTabChange }) {
  const [tab, setTab] = useState(0);
  const tabs = ['STRATEGY','H2H','PERFORMANCE','SPATIAL','VENUE','OPPONENT'];
  const ids = ['strategy','h2h','perf','attrs','venue','opp'];
  useReportTab(onTabChange, ids[tab]);
  return (
    <ScreenChrome label="INTELLIGENCE HUB ★ ELITE" tabs={tabs} activeTab={tab} onTab={setTab}>
      <div className="ih-filters">
        <span className="ih-chip ih-chip-active">YEAR · 2025</span>
        <span className="ih-chip">OPP · ALL</span>
        <span className="ih-chip">VENUE · ALL</span>
        <span className="ih-chip">FORMAT · T20</span>
      </div>
      {tab === 0 && (
        <div className="ih-strategy">
          <div className="ih-insight">
            <span className="ih-ins-tag ih-tag-bat">BAT</span>
            <div>
              <div className="ih-ins-title">Bat first at Bois de Boulogne</div>
              <div className="ih-ins-body">Win-rate <b>+18%</b> batting first across 7 matches at this venue.</div>
            </div>
          </div>
          <div className="ih-insight">
            <span className="ih-ins-tag ih-tag-mu">MATCH-UP</span>
            <div>
              <div className="ih-ins-title">Patel vs left-armers · SR 162</div>
              <div className="ih-ins-body">Promote to #3 against Lyon CC's left-arm spin attack.</div>
            </div>
          </div>
          <div className="ih-insight">
            <span className="ih-ins-tag ih-tag-bowl">BOWL</span>
            <div>
              <div className="ih-ins-title">Wright's powerplay economy · 5.2</div>
              <div className="ih-ins-body">Best of any bowler — open with him in T20s.</div>
            </div>
          </div>
        </div>
      )}
      {tab === 1 && (
        <div className="ih-h2h">
          <div className="ih-h2h-row">
            <div className="ih-h2h-col">
              <div className="ih-h2h-name">J. COURT</div>
              <div className="ih-h2h-num">287</div>
              <div className="ih-h2h-lab">RUNS · S25</div>
            </div>
            <div className="ih-h2h-vs">VS</div>
            <div className="ih-h2h-col">
              <div className="ih-h2h-name">R. SHARMA</div>
              <div className="ih-h2h-num">220</div>
              <div className="ih-h2h-lab">RUNS · S25</div>
            </div>
          </div>
          <div className="ih-h2h-bars">
            {[['SR',142,128],['AVG',28.7,24.4],['50s',3,2]].map(([k,a,b])=>(
              <div key={k} className="ih-h2h-bar">
                <span>{k}</span>
                <div className="ih-h2h-bar-track">
                  <div className="ih-h2h-bar-a" style={{width:`${(a/(a+b))*100}%`}}></div>
                </div>
                <span><b>{a}</b> · {b}</span>
              </div>
            ))}
          </div>
        </div>
      )}
      {tab === 2 && (
        <div className="ih-perf">
          <div className="ih-perf-title">FORM CURVE · LAST 10</div>
          <svg viewBox="0 0 280 110" className="ih-spark">
            <path d="M0,80 L28,72 L56,55 L84,68 L112,40 L140,30 L168,48 L196,22 L224,18 L252,12 L280,8" stroke={C.accent} strokeWidth="2.5" fill="none"/>
            <path d="M0,80 L28,72 L56,55 L84,68 L112,40 L140,30 L168,48 L196,22 L224,18 L252,12 L280,8 L280,110 L0,110 Z" fill={C.accent} opacity="0.18"/>
          </svg>
          <div className="ih-perf-row"><span>Last 10 matches avg</span><b>38.4</b></div>
          <div className="ih-perf-row"><span>Trend</span><b style={{color:C.success}}>↗ +12%</b></div>
        </div>
      )}
      {tab === 3 && (
        <div className="ih-spatial">
          <div className="ih-wagon">
            <div className="ih-wagon-circle"></div>
            <div className="ih-pitch"></div>
            {[[20,30,'#3B82F6'],[80,40,'#3B82F6'],[140,20,'#F59E0B'],[60,80,'#22C55E'],[160,90,'#22C55E'],[100,140,'#3B82F6'],[40,160,'#22C55E'],[150,160,'#F59E0B']].map(([x,y,c],i)=>(
              <div key={i} className="ih-wagon-line" style={{'--x':`${x}px`,'--y':`${y}px`,'--c':c,'--len':`${Math.hypot(x-90,y-90)}px`,'--ang':`${Math.atan2(y-90,x-90)*180/Math.PI}deg`}}></div>
            ))}
          </div>
          <div className="ih-spatial-leg">
            <span><i style={{background:'#3B82F6'}}></i>4s</span>
            <span><i style={{background:'#F59E0B'}}></i>6s</span>
            <span><i style={{background:'#22C55E'}}></i>1s/2s</span>
          </div>
        </div>
      )}
      {tab === 4 && (
        <div className="ih-venue">
          {[{v:'Bois de Boulogne',p:7,w:5,r:'168 avg'},{v:'Meudon',p:5,w:2,r:'142 avg'},{v:'Thiverval-G',p:4,w:3,r:'151 avg'}].map((x,i)=>(
            <div key={i} className="ih-venue-row">
              <div className="ih-venue-name">{x.v}</div>
              <div className="ih-venue-stats"><span>{x.p} P</span><span>{x.w} W</span><span>{x.r}</span></div>
              <div className="ih-venue-bar"><div style={{width:`${x.w/x.p*100}%`}}></div></div>
            </div>
          ))}
        </div>
      )}
      {tab === 5 && (
        <div className="ih-opp">
          <div className="ih-opp-card">
            <div className="ih-opp-name">STADE FRANÇAIS CC</div>
            <div className="ih-opp-meta">Next: 11 May · Bois de Boulogne</div>
            <div className="ih-opp-row"><span>Top threat</span><b>L. Dupont · SR 168</b></div>
            <div className="ih-opp-row"><span>Weakness</span><b>Powerplay vs spin</b></div>
            <div className="ih-opp-row"><span>Last 5</span><b>W L W W L</b></div>
          </div>
        </div>
      )}
    </ScreenChrome>
  );
};

// ─── 4. Dashboard (Dugout) ───────────────────────────────────────────────────

window.MockDashboard = function MockDashboard({ onTabChange }) {
  useReportTab(onTabChange, 'dugout');
  return (
    <ScreenChrome label="THE DUGOUT">
      <div className="dg-welcome">SEASON '25 · BECC PARIS</div>
      <div className="dg-stats">
        <div className="dg-stat dg-stat-blue">
          <div className="dg-stat-corner"><span></span><span></span></div>
          <div className="dg-stat-lab">MATCHES</div>
          <div className="dg-stat-num">19</div>
          <div className="dg-stat-delta"><i className="dg-up"></i>+2 this week</div>
        </div>
        <div className="dg-stat dg-stat-purple">
          <div className="dg-stat-corner"><span></span><span></span></div>
          <div className="dg-stat-lab">SQUAD DEPTH</div>
          <div className="dg-stat-num">14</div>
          <div className="dg-stat-delta"><i className="dg-dot"></i>2 unavailable</div>
        </div>
        <div className="dg-stat dg-stat-green">
          <div className="dg-stat-corner"><span></span><span></span></div>
          <div className="dg-stat-lab">WIN RATE</div>
          <div className="dg-stat-num">42<span>%</span></div>
          <div className="dg-stat-delta">8W · 9L · 2T</div>
        </div>
      </div>
      <div className="dg-row">
        <div className="dg-fixtures">
          <div className="dg-section-title">UPCOMING<span>VIEW ALL ›</span></div>
          {[
            { d:'11 MAY', opp:'Stade Français', v:'Bois de Boulogne' },
            { d:'18 MAY', opp:'Paris Université', v:'Meudon' },
          ].map((f,i)=>(
            <div key={i} className="dg-fix">
              <span className="dg-fix-d">{f.d}</span>
              <span className="dg-fix-opp">{f.opp}</span>
              <span className="dg-fix-v">{f.v}</span>
            </div>
          ))}
        </div>
        <div className="dg-perfs">
          <div className="dg-section-title">TOP PERFORMERS</div>
          <div className="dg-perf-card dg-perf-bat">
            <div className="dg-perf-rank">#1 BAT</div>
            <div className="dg-perf-name">J. COURT</div>
            <div className="dg-perf-num">418<span>R</span></div>
          </div>
          <div className="dg-perf-card dg-perf-bowl">
            <div className="dg-perf-rank">#1 BOWL</div>
            <div className="dg-perf-name">T. WRIGHT</div>
            <div className="dg-perf-num">22<span>W</span></div>
          </div>
        </div>
      </div>
    </ScreenChrome>
  );
};

// ─── 5. Home (welcome) ───────────────────────────────────────────────────────

window.MockHome = function MockHome({ onTabChange }) {
  useReportTab(onTabChange, 'home');
  return (
    <ScreenChrome label="HOME">
      <div className="hm-stage">
        <div className="hm-pulse">
          <span className="hm-ring"></span>
          <span className="hm-ring delay"></span>
          <img src="assets/crest_logo.png" alt="" className="hm-logo" draggable="false"/>
        </div>
        <div className="hm-club">BECC PARIS</div>
        <div className="hm-tag">WHEN SPORT MEETS ANALYTICS</div>
        <div className="hm-season">SEASON '25</div>
      </div>
    </ScreenChrome>
  );
};

// ─── 6. Squads ───────────────────────────────────────────────────────────────

window.MockSquads = function MockSquads({ onTabChange }) {
  const [tab, setTab] = useState(1);
  const tabs = ['GALLERY','TRAINING','TEAMS','MUSEUM'];
  const ids = ['gallery','training','teams','museum'];
  const [sub, setSub] = useState(0);
  useReportTab(onTabChange, ids[tab]);
  return (
    <ScreenChrome label="SQUADS" tabs={tabs} activeTab={tab} onTab={setTab}>
      {tab === 0 && (
        <div className="sq-gallery">
          {['BECC 1st XI','BECC Reserves','U19 Squad','Tour XI'].map((t,i)=>(
            <div key={i} className="sq-team-card" style={{transform:`rotateY(${(i-1.5)*8}deg) translateZ(${-Math.abs(i-1.5)*20}px)`}}>
              <div className="sq-team-crest">{t.split(' ').map(w=>w[0]).join('').slice(0,3)}</div>
              <div className="sq-team-name">{t}</div>
            </div>
          ))}
        </div>
      )}
      {tab === 1 && (
        <div className="sq-train">
          <div className="sq-subtabs">
            {['PLAN','AVAILABILITY','PLAYER LAB'].map((s,i)=>(
              <button key={s} className={`sq-subtab ${i===sub?'active':''}`} onClick={(e)=>{e.stopPropagation();setSub(i);}}>{s}</button>
            ))}
          </div>
          {sub === 0 && (
            <div className="sq-sessions">
              {[
                { d:'TUE 14 MAY', t:'19:00–20:30', f:['Batting','Fielding'], rsvp:'9 / 3 / 2' },
                { d:'THU 16 MAY', t:'19:00–20:30', f:['Bowling','Fitness'], rsvp:'7 / 4 / 3' },
              ].map((s,i)=>(
                <div key={i} className="sq-sess">
                  <div className="sq-sess-head">
                    <span className="sq-sess-d">{s.d}</span>
                    <span className="sq-sess-t">{s.t}</span>
                  </div>
                  <div className="sq-sess-foci">
                    {s.f.map(f=>(<span key={f} className={`sq-foci sq-foci-${f.toLowerCase()}`}>{f}</span>))}
                  </div>
                  <div className="sq-sess-rsvp">RSVP <b>{s.rsvp}</b> · cutoff Mon 18:00</div>
                </div>
              ))}
            </div>
          )}
          {sub === 1 && (
            <div className="sq-avail">
              {['James Court','Ali Patel','Marc Lefèvre','Tom Wright','Riku Sharma'].map((n,i)=>{
                const st = ['avail','avail','tbc','not','avail'][i];
                return (
                  <div key={i} className="sq-avail-row">
                    <span className="sq-avail-name">{n}</span>
                    <span className={`sq-avail-pill sq-avail-${st}`}>{st==='avail'?'AVAILABLE':st==='tbc'?'TBC':'NOT AVAILABLE'}</span>
                  </div>
                );
              })}
              <div className="sq-avail-counts">
                <span><b>3</b> AVAIL</span>
                <span><b>1</b> TBC</span>
                <span><b>1</b> OUT</span>
                <span className="sq-pending"><b>0</b> PENDING</span>
              </div>
            </div>
          )}
          {sub === 2 && (
            <div className="sq-lab">
              <div className="sq-lab-head">J. COURT · L5 vs PRIOR-5</div>
              <div className="sq-lab-form">
                {[60,72,78,84,91].map((v,i)=>(
                  <div key={i} className="sq-lab-bar" style={{height:`${v}%`}}></div>
                ))}
              </div>
              <div className="sq-lab-grid">
                {Array.from({length:25}).map((_,i)=>{
                  const v = (Math.sin(i*0.7)+1)/2;
                  return <span key={i} className="sq-lab-cell" style={{background:`rgba(59,130,246,${0.1 + v*0.7})`}}></span>;
                })}
              </div>
              <div className="sq-lab-tiles">
                <div><b>38.4</b><span>AVG</span></div>
                <div><b>142</b><span>SR</span></div>
                <div><b>87%</b><span>GAME</span></div>
                <div><b>92%</b><span>ATT</span></div>
              </div>
            </div>
          )}
        </div>
      )}
      {tab === 2 && (
        <div className="sq-teams">
          {['BECC Paris','BECC Reserves','U19 Squad'].map((t,i)=>(
            <div key={i} className="sq-team-row">
              <span className="sq-team-bullet" style={{background:`hsl(${i*80+200},60%,45%)`}}></span>
              <span className="sq-team-rname">{t}</span>
              <span className="sq-team-rsub">{[14,11,9][i]} players</span>
            </div>
          ))}
        </div>
      )}
      {tab === 3 && (
        <div className="sq-museum">
          {[1,2,3,4].map((i)=>(
            <div key={i} className="sq-museum-frame" style={{background:`linear-gradient(135deg, hsl(${i*60+180},35%,28%), hsl(${i*60+220},35%,15%))`}}>
              <div className="sq-museum-cap">SEASON '2{i+1}</div>
            </div>
          ))}
        </div>
      )}
    </ScreenChrome>
  );
};

// ─── 7. Statistics ───────────────────────────────────────────────────────────

window.MockStats = function MockStats({ onTabChange }) {
  const [cat, setCat] = useState(0);
  const cats = ['BATTING','BOWLING','ALL-ROUNDERS','RECORDS','EXPLORER'];
  const ids = ['batting','bowling','all-rnd','records','explorer'];
  useReportTab(onTabChange, ids[cat]);
  return (
    <ScreenChrome label="STATISTICS" tabs={cats} activeTab={cat} onTab={setCat}>
      <div className="st-filters">
        <span className="st-chip">2025</span>
        <span className="st-chip">LEAGUE</span>
        <span className="st-chip">MIN 3 INN</span>
        <span className="st-chip st-chip-export">⤓ EXPORT</span>
      </div>
      {cat === 0 && (
        <div className="st-leaderboard">
          <div className="st-podium">
            {[
              { n:'COURT', r:418, c:'#FFD700' },
              { n:'PATEL', r:341, c:'#C0C0C0' },
              { n:'LEFÈVRE', r:287, c:'#CD7F32' },
            ].map((p,i)=>(
              <div key={i} className="st-podium-card" style={{borderColor:p.c}}>
                <div className="st-podium-rank" style={{color:p.c}}>{i+1}</div>
                <div className="st-podium-name">{p.n}</div>
                <div className="st-podium-num">{p.r}<span>R</span></div>
              </div>
            ))}
          </div>
          <table className="st-table">
            <thead>
              <tr><th>#</th><th>Player</th><th>Inn</th><th>Runs</th><th>Avg</th><th>SR</th></tr>
            </thead>
            <tbody>
              {[
                ['1','Court',12,418,38.0,142],
                ['2','Patel',13,341,31.0,138],
                ['3','Lefèvre',11,287,28.7,124],
                ['4','Sharma',10,220,24.4,128],
              ].map((r,i)=>(
                <tr key={i}><td>{r[0]}</td><td>{r[1]}</td><td>{r[2]}</td><td><b>{r[3]}</b></td><td>{r[4]}</td><td>{r[5]}</td></tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
      {cat === 1 && (
        <table className="st-table">
          <thead><tr><th>#</th><th>Player</th><th>Ov</th><th>W</th><th>Avg</th><th>Econ</th></tr></thead>
          <tbody>
            {[
              ['1','Wright',46,22,14.2,5.2,'g'],
              ['2','Okonkwo',38,15,18.8,6.4,'g'],
              ['3','Patel',32,11,22.1,7.8,'n'],
              ['4','Sharma',24,7,28.0,9.4,'r'],
            ].map((r,i)=>(
              <tr key={i}><td>{r[0]}</td><td>{r[1]}</td><td>{r[2]}</td><td><b>{r[3]}</b></td><td>{r[4]}</td><td className={`st-econ-${r[6]}`}>{r[5]}</td></tr>
            ))}
          </tbody>
        </table>
      )}
      {cat === 2 && (
        <div className="st-mvp">
          <div className="st-mvp-hero">
            <div className="st-mvp-rank">PLAYER OF THE SEASON</div>
            <div className="st-mvp-name">A. PATEL</div>
            <div className="st-mvp-score">IMPACT 184.6</div>
            <div className="st-mvp-bars">
              <div><span>BAT</span><i style={{width:'72%',background:'#3B82F6'}}></i></div>
              <div><span>BOWL</span><i style={{width:'58%',background:'#22C55E'}}></i></div>
              <div><span>FIELD</span><i style={{width:'40%',background:'#F59E0B'}}></i></div>
            </div>
          </div>
        </div>
      )}
      {cat === 3 && (
        <div className="st-trophy">
          <div className="st-trophy-row">
            <div className="st-trophy-card st-orange"><div className="st-trophy-badge st-bdg-orange">OC</div><div className="st-trophy-lab">ORANGE CAP</div><div className="st-trophy-name">COURT · 418</div></div>
            <div className="st-trophy-card st-purple"><div className="st-trophy-badge st-bdg-purple">PC</div><div className="st-trophy-lab">PURPLE CAP</div><div className="st-trophy-name">WRIGHT · 22</div></div>
          </div>
          <div className="st-trophy-row">
            <div className="st-trophy-card st-gold"><div className="st-trophy-badge st-bdg-gold">GG</div><div className="st-trophy-lab">GOLDEN GLOVES</div><div className="st-trophy-name">LEFÈVRE</div></div>
            <div className="st-trophy-card st-pos"><div className="st-trophy-badge st-bdg-pos">P★</div><div className="st-trophy-lab">POS · S25</div><div className="st-trophy-name">PATEL</div></div>
          </div>
        </div>
      )}
      {cat === 4 && (
        <div className="st-leaderboard">
          <div className="st-filters">
            <span className="st-chip">BATTING</span>
            <span className="st-chip st-chip-export">MOST SIXES ▾</span>
            <span className="st-chip">MIN 3</span>
          </div>
          <table className="st-table">
            <thead>
              <tr><th>#</th><th>Player</th><th>Sixes</th></tr>
            </thead>
            <tbody>
              {[
                ['1','Court',19],
                ['2','Okonkwo',14],
                ['3','Patel',11],
                ['4','Sharma',8],
              ].map((r,i)=>(
                <tr key={i}><td>{r[0]}</td><td>{r[1]}</td><td><b>{r[2]}</b></td></tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </ScreenChrome>
  );
};

// ─── 8. Settings ─────────────────────────────────────────────────────────────

window.MockSettings = function MockSettings({ onTabChange }) {
  const [tab, setTab] = useState(3);
  const tabs = ['ACCOUNT','GENERAL','MATCH SETTINGS','APPEARANCE','AUDIO','MANAGE ASSETS','ABOUT'];
  const ids = ['account','general','match','appear','audio','assets','about'];
  useReportTab(onTabChange, ids[tab]);
  return (
    <ScreenChrome label="SETTINGS" tabs={tabs} activeTab={tab} onTab={setTab}>
      {tab === 0 && (
        <div className="se-acct">
          <div className="se-card">
            <div className="se-card-lab">TEAM</div>
            <div className="se-card-val">BECC Paris</div>
            <div className="se-card-sub">14 members · You: ADMIN</div>
          </div>
          <div className="se-card">
            <div className="se-card-lab">LICENCE</div>
            <div className="se-card-val">Elite <span className="se-chip-elite">★ ELITE</span></div>
            <div className="se-card-sub">Annual · key-activated</div>
          </div>
          <button className="se-btn">+ INVITE MEMBER</button>
        </div>
      )}
      {tab === 1 && (
        <div className="se-rows">
          {[['Display name','James C.'],['Home team','BECC Paris'],['Short code','BECC'],['Date format','DD MMM YYYY']].map(([k,v])=>(
            <div key={k} className="se-row"><span>{k}</span><b>{v}</b></div>
          ))}
        </div>
      )}
      {tab === 2 && (
        <div className="se-rows">
          {[['Default format','T20'],['Overs / inn','20'],['Players / side','11'],['Default comp','League']].map(([k,v])=>(
            <div key={k} className="se-row"><span>{k}</span><b>{v}</b></div>
          ))}
        </div>
      )}
      {tab === 3 && (
        <div className="se-themes">
          <div className="se-themes-lab">CHOOSE THEME</div>
          <div className="se-theme-grid">
            {[
              ['CREST','#1E3A8A','#F59E0B',true],
              ['TEST','#8B1E1E','#E8E2D0'],
              ['CLUB','#3B82F6','#F59E0B'],
              ['AUS','#FFD700','#0B5D2D'],
              ['ENG','#C8102E','#1B2A4A'],
              ['IND','#FF9933','#000080'],
              ['NZ','#000000','#A8A8A8'],
              ['SL','#0033A0','#FECB00'],
              ['WI','#7B1F1F','#FFD700'],
            ].map(([n,a,b,sel],i)=>(
              <button key={n} className={`se-swatch ${sel?'sel':''}`} onClick={(e)=>e.stopPropagation()}>
                <span className="se-sw-a" style={{background:a}}></span>
                <span className="se-sw-b" style={{background:b}}></span>
                <span className="se-sw-name">{n}</span>
              </button>
            ))}
          </div>
        </div>
      )}
      {tab === 4 && (
        <div className="se-rows">
          {[['Commentary','UK'],['Music','On'],['Music volume','60%']].map(([k,v])=>(
            <div key={k} className="se-row"><span>{k}</span><b>{v}</b></div>
          ))}
          <div className="se-comm">
            {['UK','INDIA','AUSTRALIA','MIX'].map(c=>(
              <span key={c} className={`se-comm-chip ${c==='UK'?'sel':''}`}>{c}</span>
            ))}
          </div>
        </div>
      )}
      {tab === 5 && (
        <div className="se-assets">
          {[
            { n:'Team Branding', sub:'Wallpaper · Logo', cloud:true },
            { n:'Team Logos', sub:'Opponent crests', cloud:true },
            { n:'Player Photos', sub:'Roster headshots', cloud:true },
            { n:'Grounds', sub:'Venue images', cloud:false },
            { n:'Music', sub:'MP3 / WAV / AAC', cloud:false },
          ].map((a,i)=>(
            <div key={i} className="se-asset-row">
              <div>
                <div className="se-asset-n">{a.n}</div>
                <div className="se-asset-sub">{a.sub}</div>
              </div>
              <span className={`se-asset-tag ${a.cloud?'cloud':'local'}`}>{a.cloud?'CLOUD':'LOCAL'}</span>
            </div>
          ))}
        </div>
      )}
      {tab === 6 && (
        <div className="se-rows">
          <div className="se-row"><span>Version</span><b>2.4.1</b></div>
          <button className="se-btn">⤓ EXPORT BACKUP</button>
          <button className="se-btn se-btn-ghost">⤒ RESTORE BACKUP</button>
        </div>
      )}
    </ScreenChrome>
  );
};

// ─── Scorebook (deep dive — its own card) ────────────────────────────────────

function MockScorebookFn({ onTabChange }) {
  const [tab, setTab] = useState(0);
  const tabs = ['INNINGS','STATS','INSIGHTS','PULSE','CRESTSMART','COMMENTARY','FLIP','FAN MSG'];
  const ids  = ['innings','matchstats','insights','pulse','crestsmart','commentary','flip','fan'];
  useReportTab(onTabChange, ids[tab]);

  return (
    <ScreenChrome label="SCOREBOOK" tabs={tabs} activeTab={tab} onTab={setTab}>
      {tab === 0 && (
        <div className="mc-scorebook">
          <div className="mc-score-header">
            <div className="mc-score-team">BECC</div>
            <div className="mc-score-runs">147<span>/4</span></div>
            <div className="mc-score-overs">14.3 ov · RR 10.1 · vs SFC</div>
            <div className="mc-pulse-bar"><div className="mc-pulse-fill" style={{height:'72%'}}></div></div>
          </div>
          <div className="mc-batters">
            {[{n:'J. COURT*',r:54,b:38,sr:142.1},{n:'A. PATEL',r:33,b:24,sr:137.5}].map((p,i)=>(
              <div key={i} className="mc-batter-row">
                <span className="mc-batter-name">{p.n}</span>
                <span className="mc-batter-stat"><b>{p.r}</b> <i>({p.b})</i> SR {p.sr}</span>
              </div>
            ))}
          </div>
          <div className="mc-over-strip">
            {['•','1','4','W','•','2'].map((x,i)=>(
              <span key={i} className={`mc-ball mc-ball-${x==='W'?'w':x==='4'?'four':x==='•'?'dot':'run'}`}>{x}</span>
            ))}
          </div>
          <div className="mc-keypad">
            {['0','1','2','4','6','W'].map(k=>(
              <button key={k} className={`mc-key ${k==='W'?'mc-key-w':k==='4'||k==='6'?'mc-key-boundary':''}`}>{k}</button>
            ))}
          </div>
        </div>
      )}
      {tab === 1 && (
        <div className="sb-stats">
          <div className="sb-stats-grid">
            {['Hawk-Eye','Pitch Map','Wagon','Pressure','Phase','Beehive','Strokeplay','Tempo','Stands','Impact','Map','Win Prob'].map((p)=>(
              <div key={p} className="sb-stats-tile">{p}</div>
            ))}
          </div>
        </div>
      )}
      {tab === 2 && (
        <div className="sb-insights">
          <div className="sb-ins"><span className="sb-ins-tag" style={{background:'rgba(16,185,129,0.18)',color:'#34D399'}}>BATTING</span><div>Court anchored at SR 150 — set the platform.</div></div>
          <div className="sb-ins"><span className="sb-ins-tag" style={{background:'rgba(239,68,68,0.18)',color:'#FCA5A5'}}>BOWLING</span><div>Wright took 3 in the powerplay — strangled the chase.</div></div>
          <div className="sb-ins"><span className="sb-ins-tag" style={{background:'rgba(107,114,128,0.18)',color:'#94A3B8'}}>EXTRAS</span><div>14 extras conceded — improve discipline.</div></div>
        </div>
      )}
      {tab === 3 && (
        <div className="sb-pulse">
          <div className="sb-pulse-card">
            <div className="sb-pulse-avatar">JC</div>
            <div className="sb-pulse-name">J. COURT</div>
            <div className="sb-pulse-tier">UNLEASHED · 87</div>
            <div className="sb-pulse-tag">"SMOKING HOT. Absolutely unstoppable!"</div>
            <div className="sb-pulse-grad"></div>
          </div>
        </div>
      )}
      {tab === 4 && (
        <div className="sb-cs">
          <div className="sb-cs-head"><span className="sb-cs-mark">CS</span> CRESTSMART™ · <span>MILESTONE</span></div>
          <div className="sb-cs-hero">
            <div className="sb-cs-num">50</div>
            <div className="sb-cs-side">
              <div className="sb-cs-row"><span>SR</span><b>142</b></div>
              <div className="sb-cs-row"><span>BF</span><b>38</b></div>
              <div className="sb-cs-row"><span>4s</span><b>8</b></div>
              <div className="sb-cs-row"><span>6s</span><b>1</b></div>
            </div>
          </div>
          <div className="sb-cs-balls">{['3','1','4','4','6','1','3','1','2','3','3','3'].map((b,i)=>(<span key={i} className={`sb-cs-ball ${b==='4'||b==='6'?'b':''}`}>{b}</span>))}</div>
          <div className="sb-cs-dots"><span></span><span className="on"></span><span></span><span></span></div>
        </div>
      )}
      {tab === 5 && (
        <div className="sb-comm">
          <div className="sb-comm-row"><span className="sb-comm-ov">14.3</span><span>COURT smashes a length ball through cover — that's four!</span></div>
          <div className="sb-comm-row"><span className="sb-comm-ov">14.2</span><span>Tight from Dupont — dotted up, pressure builds.</span></div>
          <div className="sb-comm-row sb-comm-w"><span className="sb-comm-ov">14.1</span><span>WICKET! Patel chips it straight to mid-on. 33 (24).</span></div>
          <div className="sb-comm-row"><span className="sb-comm-ov">13.6</span><span>Soft single to keep the strike. End of the over.</span></div>
          <div className="sb-comm-tone">TONE · UK</div>
        </div>
      )}
      {tab === 6 && (
        <div className="sb-flip">
          <div className="sb-flip-card">
            <div className="sb-flip-eye">★ MILESTONE</div>
            <div className="sb-flip-name">J. COURT</div>
            <div className="sb-flip-big">50</div>
            <div className="sb-flip-sub">37 balls · 8×4 · 1×6</div>
          </div>
        </div>
      )}
      {tab === 7 && (
        <div className="sb-fan">
          <div className="sb-fan-head">3 PENDING</div>
          {[
            { n:'Alex M.', m:'Wow, what a six!' },
            { n:'Priya', m:'Bowling change please!' },
            { n:'Tom W.', m:'COYB!' },
          ].map((f,i)=>(
            <div key={i} className="sb-fan-row">
              <div>
                <div className="sb-fan-n">{f.n}</div>
                <div className="sb-fan-m">"{f.m}"</div>
              </div>
              <div className="sb-fan-acts">
                <span className="sb-fan-yes">✓</span>
                <span className="sb-fan-no">✕</span>
              </div>
            </div>
          ))}
        </div>
      )}
    </ScreenChrome>
  );
}

// ─── Broadcast Kit (deep dive — assets + flex cards + fixture cards) ────────
// Renders miniaturized previews of the actual share cards CREST produces.

function MockBroadcastFn({ onTabChange }) {
  const [tab, setTab] = useState(0);
  const tabs = ['ASSETS','FIXTURE','LINEUP','WINNER','POTM','INTEL'];
  const ids  = ['assets','fixture','lineup','winner','potm','intel'];
  useReportTab(onTabChange, ids[tab]);

  return (
    <ScreenChrome label="BROADCAST KIT" tabs={tabs} activeTab={tab} onTab={setTab}>
      {tab === 0 && (
        <div className="bk-assets">
          <div className="bk-assets-head">
            <span>YOUR LIBRARY</span>
            <span className="bk-assets-count">26 photos · 18 logos · 6 grounds</span>
          </div>
          <div className="bk-asset-grid">
            <div className="bk-asset-tile">
              <div className="bk-asset-mini bk-asset-faces">
                <span>JC</span><span>AP</span><span>TW</span><span>+23</span>
              </div>
              <div className="bk-asset-label">PLAYER PHOTOS</div>
            </div>
            <div className="bk-asset-tile">
              <div className="bk-asset-mini bk-asset-logos">
                <span className="bk-logo-chip">BECC</span>
                <span className="bk-logo-chip">SFC</span>
                <span className="bk-logo-chip">PU</span>
                <span className="bk-logo-chip">+15</span>
              </div>
              <div className="bk-asset-label">TEAM LOGOS</div>
            </div>
            <div className="bk-asset-tile">
              <div className="bk-asset-mini bk-asset-wp">
                <div className="bk-wp-strip bk-wp-strip-a"></div>
                <div className="bk-wp-strip bk-wp-strip-b"></div>
                <div className="bk-wp-strip bk-wp-strip-c"></div>
              </div>
              <div className="bk-asset-label">WALLPAPER · 2</div>
            </div>
            <div className="bk-asset-tile">
              <div className="bk-asset-mini bk-asset-grounds">
                <div className="bk-ground-tile"></div>
                <div className="bk-ground-tile"></div>
                <div className="bk-ground-tile"></div>
              </div>
              <div className="bk-asset-label">GROUNDS · 6</div>
            </div>
            <div className="bk-asset-tile">
              <div className="bk-asset-mini bk-asset-music">
                <span className="bk-bar bk-bar-1"></span>
                <span className="bk-bar bk-bar-2"></span>
                <span className="bk-bar bk-bar-3"></span>
                <span className="bk-bar bk-bar-4"></span>
                <span className="bk-bar bk-bar-5"></span>
                <span className="bk-bar bk-bar-6"></span>
              </div>
              <div className="bk-asset-label">MUSIC · 4</div>
            </div>
            <div className="bk-asset-tile bk-asset-add">
              <div className="bk-asset-mini bk-asset-plus">+</div>
              <div className="bk-asset-label">UPLOAD</div>
            </div>
          </div>
        </div>
      )}

      {tab === 1 && (
        <div className="bk-card-stage">
          <div className="bk-card bk-card-fixture">
            <div className="bk-card-eyebrow">— UPCOMING · 18 MAY · 14:00 —</div>
            <div className="bk-fx-row">
              <div className="bk-fx-team">
                <div className="bk-fx-logo">B</div>
                <div className="bk-fx-name">BECC</div>
              </div>
              <div className="bk-fx-vs">VS</div>
              <div className="bk-fx-team">
                <div className="bk-fx-logo bk-fx-logo-alt">P</div>
                <div className="bk-fx-name">PU</div>
              </div>
            </div>
            <div className="bk-card-foot">
              <span>STADE FRANÇAIS · BOIS DE BOULOGNE</span>
              <span className="bk-card-tag">T20 · LEAGUE</span>
            </div>
          </div>
          <div className="bk-card-counter">STYLE 1 / 5 · SIDE-BY-SIDE</div>
        </div>
      )}

      {tab === 2 && (
        <div className="bk-card-stage">
          <div className="bk-card bk-card-lineup">
            <div className="bk-card-eyebrow bk-card-eyebrow-light">— PLAYING XI ANNOUNCEMENT —</div>
            <div className="bk-xi-grid">
              {[
                'J. COURT (C)','A. PATEL','T. WRIGHT','S. KHAN',
                'L. DUPONT (WK)','M. CHEN','R. SILVA','D. KIM',
                'O. NWOKO','P. SINGH','J. MARTIN',
              ].map((n, i) => (
                <div key={i} className={`bk-xi-tile ${i === 0 ? 'bk-xi-c' : ''} ${i === 4 ? 'bk-xi-wk' : ''}`}>
                  <div className="bk-xi-num">{i + 1}</div>
                  <div className="bk-xi-name">{n}</div>
                </div>
              ))}
            </div>
            <div className="bk-card-foot">
              <span>BECC · vs PU · 18 MAY</span>
              <span className="bk-card-tag">T20</span>
            </div>
          </div>
          <div className="bk-card-counter">STYLE 2 / 3 · ANNOUNCEMENT GRID</div>
        </div>
      )}

      {tab === 3 && (
        <div className="bk-card-stage">
          <div className="bk-card bk-card-winner">
            <div className="bk-card-eyebrow bk-card-eyebrow-gold">— MATCH RESULT —</div>
            <div className="bk-win-banner">BECC WIN</div>
            <div className="bk-win-banner-sub">BY 47 RUNS</div>
            <div className="bk-win-clash">
              <div className="bk-win-side">
                <div className="bk-win-logo">B</div>
                <div className="bk-win-score">182<span>/6</span></div>
              </div>
              <div className="bk-win-side bk-win-side-loss">
                <div className="bk-win-logo bk-win-logo-loss">P</div>
                <div className="bk-win-score">135</div>
              </div>
            </div>
            <div className="bk-card-foot">
              <span>BOIS DE BOULOGNE · 11 MAY</span>
              <span className="bk-card-tag bk-card-tag-gold">T20 · LEAGUE</span>
            </div>
          </div>
          <div className="bk-card-counter">STYLE 3 / 3 · CLASH</div>
        </div>
      )}

      {tab === 4 && (
        <div className="bk-card-stage">
          <div className="bk-card bk-card-potm">
            <div className="bk-potm-photo">JC</div>
            <div className="bk-potm-kicker">— PLAYER OF THE MATCH —</div>
            <div className="bk-potm-name">JACOB <b>COURT</b></div>
            <div className="bk-potm-tag">★ TOP BATTER</div>
            <div className="bk-potm-hero">
              <span className="bk-potm-num">54</span>
              <span className="bk-potm-unit">RUNS</span>
            </div>
            <div className="bk-potm-rail">
              <div><span>BF</span><b>38</b></div>
              <div><span>SR</span><b>142</b></div>
              <div><span>4s</span><b>8</b></div>
              <div><span>6s</span><b>1</b></div>
            </div>
          </div>
          <div className="bk-card-counter">STYLE 1 / 4 · PORTRAIT</div>
        </div>
      )}

      {tab === 5 && (
        <div className="bk-card-stage">
          <div className="bk-card bk-card-intel">
            <div className="bk-card-eyebrow bk-card-eyebrow-gold">— PRE-MATCH INTEL —</div>
            <div className="bk-intel-title">BECC <span>vs</span> PU</div>
            <div className="bk-intel-block">
              <div className="bk-intel-label">HEAD TO HEAD</div>
              <div className="bk-intel-h2h">
                <span className="bk-h2h-w">7W</span>
                <span className="bk-h2h-l">3L</span>
                <span className="bk-h2h-d">1D</span>
              </div>
            </div>
            <div className="bk-intel-block">
              <div className="bk-intel-label">RECENT FORM</div>
              <div className="bk-intel-form">
                <span className="bk-form bk-form-w">W</span>
                <span className="bk-form bk-form-w">W</span>
                <span className="bk-form bk-form-l">L</span>
                <span className="bk-form bk-form-w">W</span>
                <span className="bk-form bk-form-d">D</span>
              </div>
            </div>
            <div className="bk-intel-row">
              <div>
                <div className="bk-intel-label">VENUE PAR</div>
                <div className="bk-intel-val">164</div>
              </div>
              <div>
                <div className="bk-intel-label">LAST MEETING</div>
                <div className="bk-intel-val bk-intel-val-sm">W · 5 wkts</div>
              </div>
            </div>
            <div className="bk-intel-block">
              <div className="bk-intel-label">ONES TO WATCH</div>
              <div className="bk-intel-watch">
                <span><b>J. COURT</b> · 418R · SR 138</span>
                <span><b>T. WRIGHT</b> · 22W · ECON 6.4</span>
              </div>
            </div>
          </div>
          <div className="bk-card-counter">STYLE 1 / 2 · DOSSIER</div>
        </div>
      )}
    </ScreenChrome>
  );
}

window.MockByKey = {
  home: window.MockHome,
  dashboard: window.MockDashboard,
  match: window.MockMatchCenter,
  scorebook: MockScorebookFn,
  broadcast: MockBroadcastFn,
  roster: window.MockRoster,
  squads: window.MockSquads,
  stats: window.MockStats,
  intel: window.MockIntel,
  settings: window.MockSettings,
};