// =====================================================================
// PAGE LAYOUTS — CORE (Schedule, Teams, Roster) · 2 options each
// Flat / professional C1 (navy + red). Shared nav/footer/PageHead from
// HomeVariations.jsx (on window). Contrast rule: red accents only on
// LIGHT backgrounds; on navy/dark use white or --bb-red-bright.
// =====================================================================
const { hv, BNav, FooterBlock, BrandBar, PageHead } = window;

const pcSt = {
  wrap: { maxWidth:1200, margin:'0 auto', padding:'56px 40px 80px' },
  tabs: { display:'flex', gap:8, marginBottom:28 },
  tab: (on) => ({ fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:800, fontSize:14, letterSpacing:'0.05em', textTransform:'uppercase', padding:'10px 20px', borderRadius:8, cursor:'pointer', border:0, background: on?'var(--bb-navy)':'#fff', color: on?'#fff':'var(--bb-navy)', boxShadow: on?'none':'inset 0 0 0 1.5px var(--border-1)' }),
  // schedule list
  row: { display:'flex', alignItems:'center', gap:28, background:'#fff', border:'1px solid var(--border-1)', borderRadius:12, padding:'20px 28px', marginBottom:12, boxShadow:'var(--shadow-sm)' },
  date: { textAlign:'center', width:72, flexShrink:0 },
  dDay: { fontFamily:"'JetBrains Mono', monospace", fontSize:12, letterSpacing:'0.12em', color:'var(--bb-red)' },
  dNum: { fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:900, fontSize:44, lineHeight:0.9, color:'var(--bb-navy)' },
  dMon: { fontFamily:"'JetBrains Mono', monospace", fontSize:11, letterSpacing:'0.12em', textTransform:'uppercase', color:'var(--fg-3)' },
  dYr: { fontFamily:"'JetBrains Mono', monospace", fontSize:10, letterSpacing:'0.1em', color:'var(--fg-3)', marginTop:2 },
  match: { flex:1, borderLeft:'1px solid var(--border-1)', paddingLeft:28 },
  matchName: { fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:800, fontSize:26, textTransform:'uppercase', color:'var(--bb-navy)', lineHeight:1 },
  matchMeta: { fontSize:14, color:'var(--fg-2)', marginTop:6 },
  badge: (kind) => ({ fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:900, fontSize:14, letterSpacing:'0.06em', textTransform:'uppercase', padding:'8px 16px', borderRadius:8, flexShrink:0,
    background: kind==='W'?'rgba(47,125,74,0.14)':kind==='L'?'var(--bb-red-soft)':'var(--bb-navy)',
    color: kind==='W'?'var(--status-win)':kind==='L'?'var(--bb-red)':'#fff' }),
  score: { fontFamily:"'JetBrains Mono', monospace", fontWeight:600, fontSize:18, color:'var(--bb-navy)', width:64, textAlign:'center', flexShrink:0 },
  // section headers within page
  blockHd: { fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:900, fontSize:30, textTransform:'uppercase', color:'var(--bb-navy)', margin:'0 0 18px' },
  // teams grid
  teamCard: { background:'#fff', border:'1px solid var(--border-1)', borderRadius:12, overflow:'hidden', boxShadow:'var(--shadow-sm)' },
  teamBar: { height:8 },
  teamBody: { padding:'22px 24px 26px' },
  link: { fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:800, fontSize:13, letterSpacing:'0.06em', textTransform:'uppercase', color:'var(--bb-red)', cursor:'pointer', marginTop:14, display:'inline-block' },
  // roster card
  pCard: { background:'#fff', border:'1px solid var(--border-1)', borderRadius:12, overflow:'hidden', boxShadow:'var(--shadow-sm)' },
  pPhoto: { position:'relative', height:220, background:'#eceff4' },
  pNum: { position:'absolute', bottom:10, right:14, fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:900, fontSize:64, lineHeight:0.8, color:'#fff', textShadow:'0 2px 12px rgba(0,0,0,0.5)' },
  pBody: { padding:'16px 18px 20px' },
  pName: { fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:800, fontSize:24, textTransform:'uppercase', color:'var(--bb-navy)', lineHeight:1 },
  pMeta: { fontFamily:"'JetBrains Mono', monospace", fontSize:12, letterSpacing:'0.08em', color:'var(--fg-3)', marginTop:6 },
  pStat: { fontFamily:"'JetBrains Mono', monospace", fontSize:13, color:'var(--bb-red)', marginTop:8 },
  // roster team header — photo left, staff right
  teamHeader: { display:'grid', gridTemplateColumns:'1.25fr 1fr', gap:0, borderRadius:14, overflow:'hidden', boxShadow:'var(--shadow-md)', border:'1px solid var(--border-1)' },
  teamPhoto: { position:'relative', minHeight:340, background:'#e7ebf1' },
  staffPanel: { background:'var(--bb-navy)', color:'#fff', padding:'14px 38px', display:'flex', flexDirection:'column', justifyContent:'center' },
  staffRow: { padding:'20px 0', borderBottom:'1px solid rgba(255,255,255,0.14)' },
  staffLbl: { fontFamily:"'JetBrains Mono', monospace", fontSize:11, letterSpacing:'0.14em', textTransform:'uppercase', color:'var(--bb-red-bright)', marginBottom:8 },
  staffName: { fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:800, fontSize:28, lineHeight:1, textTransform:'uppercase' },
  staffCoaches: { fontSize:16, lineHeight:1.55, color:'rgba(255,255,255,0.88)' },
  staffSub: { fontFamily:"'JetBrains Mono', monospace", fontSize:12, letterSpacing:'0.08em', textTransform:'uppercase', color:'rgba(255,255,255,0.55)' },
  honorRow: { display:'flex', alignItems:'center', gap:12, background:'#fff', border:'1px solid var(--border-1)', borderRadius:10, padding:'14px 18px', fontSize:15, color:'var(--bb-navy)', fontWeight:600, boxShadow:'var(--shadow-sm)' },
  honorStar: { color:'var(--bb-red)', fontSize:18, flexShrink:0 },
  dropHint: { fontFamily:"'JetBrains Mono', monospace", fontSize:12.5, letterSpacing:'0.04em', color:'var(--fg-3)', marginTop:28, textAlign:'center' },
};

function SchedTabs({ active='All' }) {
  return <div style={pcSt.tabs}>{['All','Upcoming','Results'].map(t=><button key={t} style={pcSt.tab(t===active)}>{t}</button>)}</div>;
}
// Season year shown alongside each game date (per-game `year` overrides it).
const SEASON_YEAR = '2026';
function GameRow({ g }) {
  const kind = g.status==='upcoming' ? 'UP' : (g.us>g.them?'W':'L');
  return (
    <div style={pcSt.row}>
      <div style={pcSt.date}><div style={pcSt.dDay}>{g.day}</div><div style={pcSt.dNum}>{g.date.split(' ')[1]}</div><div style={pcSt.dMon}>{g.date.split(' ')[0]}</div><div style={pcSt.dYr}>{g.year||SEASON_YEAR}</div></div>
      <div style={pcSt.match}>
        <div style={pcSt.matchName}>{g.home?'vs':'@'} {g.opponent}</div>
        <div style={pcSt.matchMeta}>{g.time} · {g.field}</div>
      </div>
      {g.status!=='upcoming' && <div style={pcSt.score}>{g.us}–{g.them}</div>}
      <div style={pcSt.badge(kind)}>{kind==='UP'?'Upcoming':kind==='W'?'Win':'Loss'}</div>
    </div>
  );
}

// ---------- SCHEDULE ----------
const SchedList = ({ data }) => (
  <div style={hv.root}>
    <BNav />
    <PageHead eyebrow="2026 Summer Season" title="Schedule & Results" sub="Every game, every weekend. Filter by upcoming or jump to recent results." />
    <div style={pcSt.wrap}>
      <SchedTabs active="All" />
      {data.games.map((g,i)=><GameRow key={i} g={g} />)}
    </div>
    <BrandBar /><FooterBlock />
  </div>
);

const SchedSplit = ({ data }) => {
  const up = data.games.filter(g=>g.status==='upcoming');
  const past = data.games.filter(g=>g.status!=='upcoming');
  return (
    <div style={hv.root}>
      <BNav />
      <PageHead eyebrow="2026 Summer Season" title="Schedule & Results" sub="Upcoming games up top, recent results and the season ledger alongside." />
      <div style={{ ...pcSt.wrap, display:'grid', gridTemplateColumns:'1.6fr 1fr', gap:36, alignItems:'start' }}>
        <div>
          <h2 style={pcSt.blockHd}>Upcoming</h2>
          {up.map((g,i)=>(
            <div key={i} style={{ ...pcSt.row, marginBottom:14 }}>
              <div style={pcSt.date}><div style={pcSt.dDay}>{g.day}</div><div style={pcSt.dNum}>{g.date.split(' ')[1]}</div><div style={pcSt.dMon}>{g.date.split(' ')[0]}</div><div style={pcSt.dYr}>{g.year||SEASON_YEAR}</div></div>
              <div style={pcSt.match}><div style={pcSt.matchName}>{g.home?'vs':'@'} {g.opponent}</div><div style={pcSt.matchMeta}>{g.time} · {g.field}</div></div>
              <button style={hv.btnNavyOutline}>Details →</button>
            </div>
          ))}
        </div>
        <div>
          <h2 style={pcSt.blockHd}>Recent Results</h2>
          <div style={{ background:'#fff', border:'1px solid var(--border-1)', borderRadius:12, overflow:'hidden', boxShadow:'var(--shadow-sm)' }}>
            {past.map((g,i)=>(
              <div key={i} style={{ display:'flex', alignItems:'center', gap:14, padding:'16px 20px', borderBottom: i<past.length-1?'1px solid var(--border-1)':'none' }}>
                <span style={{ ...pcSt.badge(g.us>g.them?'W':'L'), fontSize:13, padding:'5px 11px' }}>{g.us>g.them?'W':'L'}</span>
                <span style={{ fontFamily:"'JetBrains Mono', monospace", fontWeight:600, color:'var(--bb-navy)' }}>{g.us}–{g.them}</span>
                <span style={{ fontSize:15, color:'var(--fg-2)', flex:1 }}>{g.home?'vs':'@'} {g.opponent}</span>
                <span style={{ fontSize:13, color:'var(--fg-3)' }}>{g.date}, {g.year||SEASON_YEAR}</span>
              </div>
            ))}
          </div>
          <div style={{ background:'var(--bb-navy)', color:'#fff', borderRadius:12, padding:'22px 24px', marginTop:20 }}>
            <div style={{ ...hv.eyebrow, color:'var(--bb-red-bright)', marginBottom:12 }}>Season Ledger · 12U</div>
            <div style={{ display:'flex', gap:24 }}>
              {[['18','Wins'],['4','Losses'],['#3','NorCal']].map(([v,l])=>(
                <div key={l}><div style={{ fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:900, fontSize:40, lineHeight:1 }}>{v}</div><div style={{ fontFamily:"'JetBrains Mono', monospace", fontSize:11, letterSpacing:'0.12em', textTransform:'uppercase', color:'rgba(255,255,255,0.6)', marginTop:4 }}>{l}</div></div>
              ))}
            </div>
          </div>
        </div>
      </div>
      <BrandBar /><FooterBlock />
    </div>
  );
};

// ---------- TEAMS ----------
const TeamsGridPage = ({ data }) => (
  <div style={hv.root}>
    <BNav />
    <PageHead eyebrow="2026 Squads" title="Our Teams" sub="Five squads, 7U through 12U. Every Blaster plays BRSLL in the spring and travels with the club in the summer and fall." />
    <div style={pcSt.wrap}>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:20 }}>
        {data.teamsFull.map((t,i)=>(
          <div key={i} style={pcSt.teamCard}>
            <div style={{ ...pcSt.teamBar, background: t.color==='red'?'var(--bb-red)':'var(--bb-navy)' }}></div>
            <div style={pcSt.teamBody}>
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline' }}>
                <div style={{ fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:900, fontSize:54, lineHeight:0.9, color:'var(--bb-navy)' }}>{t.age}</div>
                <div style={{ fontFamily:"'JetBrains Mono', monospace", fontSize:13, color:'var(--bb-red)' }}>{t.record}</div>
              </div>
              <div style={{ fontFamily:"'JetBrains Mono', monospace", fontSize:12, letterSpacing:'0.14em', textTransform:'uppercase', color:'var(--fg-3)', marginTop:2 }}>{t.color==='red'?'Red Squad':'Blue Squad'}</div>
              <div style={{ fontSize:16, fontWeight:700, color:'var(--bb-navy)', marginTop:16 }}>Coach {t.coach}</div>
              <div style={{ fontSize:14, color:'var(--fg-2)', marginTop:4 }}>{t.note}</div>
              {t.roster && t.roster.length ? (
                <div style={{ fontFamily:"'JetBrains Mono', monospace", fontSize:12, letterSpacing:'0.08em', color:'var(--fg-3)', marginTop:10 }}>{t.roster.length} players · Mgr. {t.manager}</div>
              ) : null}
              <span style={pcSt.link} onClick={()=>{ window.__rosterAge = t.age; window.bbGo&&window.bbGo('roster'); }}>{t.roster && t.roster.length ? 'View Roster →' : 'Roster Soon →'}</span>
            </div>
          </div>
        ))}
      </div>
      <div style={{ textAlign:'center', marginTop:36 }}>
        <a href="https://www.belmontblasters.org/teams/past-teams" target="_blank" rel="noopener noreferrer" style={{ fontFamily:"'JetBrains Mono', monospace", fontSize:13, letterSpacing:'0.1em', textTransform:'uppercase', color:'var(--fg-3)', textDecoration:'none', borderBottom:'1px solid var(--border-1)', paddingBottom:3 }}>View Past Teams & Alumni →</a>
      </div>
    </div>
    <BrandBar /><FooterBlock />
  </div>
);

const TeamsRows = ({ data }) => (
  <div style={hv.root}>
    <BNav />
    <PageHead eyebrow="2026 Squads" title="Our Teams" sub="Seven squads, 7U through 12U. Tap any team for its roster and schedule." />
    <div style={pcSt.wrap}>
      {data.teamsFull.map((t,i)=>(
        <div key={i} style={{ display:'flex', alignItems:'center', gap:32, background:'#fff', border:'1px solid var(--border-1)', borderLeft:`6px solid ${t.color==='red'?'var(--bb-red)':'var(--bb-navy)'}`, borderRadius:12, padding:'24px 32px', marginBottom:14, boxShadow:'var(--shadow-sm)' }}>
          <div style={{ fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:900, fontSize:64, lineHeight:0.85, color:'var(--bb-navy)', width:120, flexShrink:0 }}>{t.age}</div>
          <div style={{ flex:1, borderLeft:'1px solid var(--border-1)', paddingLeft:32 }}>
            <div style={{ fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:800, fontSize:26, textTransform:'uppercase', color:'var(--bb-navy)' }}>{t.color==='red'?'Red':'Blue'} Squad · Coach {t.coach}</div>
            <div style={{ fontSize:15, color:'var(--fg-2)', marginTop:6 }}>{t.note}</div>
          </div>
          <div style={{ textAlign:'right', flexShrink:0 }}>
            <div style={{ fontFamily:"'JetBrains Mono', monospace", fontSize:15, color:'var(--bb-red)', marginBottom:10 }}>{t.record}</div>
            <button style={hv.btnNavyOutline}>View Team →</button>
          </div>
        </div>
      ))}
    </div>
    <BrandBar /><FooterBlock />
  </div>
);

// ---------- ROSTER ----------
function TeamPills({ active='12U' }) {
  return <div style={{ ...pcSt.tabs, flexWrap:'wrap' }}>{['12U','11U','10U','9U','8U','7U'].map(t=><button key={t} style={pcSt.tab(t===active)}>{t} Blue</button>)}</div>;
}
function initials(name) {
  // "B. Sakurai" -> "BS"
  const parts = name.replace(/\./g, '').trim().split(/\s+/);
  return parts.map(p => p[0]).join('').slice(0, 2).toUpperCase();
}
// Stable per-player key so a dropped headshot is anchored to the PLAYER, not
// the row index — reorder/add/remove a name and every photo stays put.
function slug(name) {
  return String(name).toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '');
}
const RosterCards = ({ data }) => {
  const teams = data.teamsFull;
  const pick = (window.__rosterAge && teams.find(t => t.age === window.__rosterAge))
    || teams.find(t => t.roster && t.roster.length) || teams[0];
  window.__rosterAge = null;
  const [sel, setSel] = React.useState(pick);
  const squad = `${sel.age} ${sel.color === 'red' ? 'Red' : 'Blue'}`;
  const roster = sel.roster || [];
  return (
    <div style={hv.root}>
      <BNav />
      <PageHead eyebrow={`${squad} · Coach ${sel.coach}`} title="Roster" sub={sel.subtitle || 'Belmont Blasters travel squads, 8U through 12U.'} />
      <div style={pcSt.wrap}>
        <div style={{ ...pcSt.tabs, flexWrap:'wrap' }}>
          {teams.map((t)=>(
            <button key={t.age + t.color} style={pcSt.tab(t === sel)} onClick={()=>{ setSel(t); window.scrollTo({ top:0, behavior:'smooth' }); }}>{t.age} {t.color === 'red' ? 'Red' : 'Blue'}</button>
          ))}
        </div>

        {roster.length ? (
          <React.Fragment>
            {/* Team header — photo left, staff right */}
            <div style={pcSt.teamHeader}>
              <div style={pcSt.teamPhoto}>
                <image-slot id={`ros-team-${sel.age}`} src={sel.photo || undefined} shape="rect" placeholder="Drop a team photo" style={{ position:'absolute', inset:0, width:'100%', height:'100%', display:'block' }}></image-slot>
              </div>
              <div style={pcSt.staffPanel}>
                <div style={pcSt.staffRow}>
                  <div style={pcSt.staffLbl}>Manager</div>
                  <div style={pcSt.staffName}>{sel.manager || 'TBD'}</div>
                </div>
                <div style={pcSt.staffRow}>
                  <div style={pcSt.staffLbl}>Coaches</div>
                  <div style={pcSt.staffCoaches}>{sel.coaches && sel.coaches.length ? sel.coaches.join(' · ') : 'TBD'}</div>
                </div>
                <div style={{ ...pcSt.staffRow, borderBottom:'none', display:'flex', alignItems:'baseline', gap:14 }}>
                  <div style={pcSt.staffLbl}>Players</div>
                  <div style={{ ...pcSt.staffName, fontSize:34 }}>{roster.length}</div>
                  <div style={pcSt.staffSub}>on the {sel.age} roster</div>
                </div>
              </div>
            </div>

            {/* Roster grid */}
            <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:18, marginTop:24 }}>
              {roster.map((name,i)=>{
                const pid = `ros-${sel.age}-${slug(name)}`;
                const ph = (typeof window!=='undefined' && window.ROSTER_PHOTOS) ? window.ROSTER_PHOTOS[pid] : null;
                return (
                <div key={i} style={pcSt.pCard}>
                  <div style={pcSt.pPhoto}>
                    {ph
                      ? <img src={ph} alt={name} loading="lazy" style={{ position:'absolute', inset:0, width:'100%', height:'100%', objectFit:'cover', objectPosition:'center 22%', display:'block' }} />
                      : <image-slot id={pid} shape="rect" placeholder={initials(name)} style={{ position:'absolute', inset:0, width:'100%', height:'100%', display:'block' }}></image-slot>}
                  </div>
                  <div style={pcSt.pBody}>
                    <div style={pcSt.pName}>{name}</div>
                    <div style={pcSt.pMeta}>{squad}</div>
                  </div>
                </div>
                );
              })}
            </div>

            {/* Championships */}
            {sel.champs && sel.champs.length ? (
              <div style={{ marginTop:36 }}>
                <h2 style={pcSt.blockHd}>Championships & Honors</h2>
                <div style={{ display:'grid', gridTemplateColumns:'repeat(2,1fr)', gap:12 }}>
                  {sel.champs.map((c,i)=>(
                    <div key={i} style={pcSt.honorRow}>
                      <span style={pcSt.honorStar}>★</span>
                      <span>{c}</span>
                    </div>
                  ))}
                </div>
              </div>
            ) : null}

            <p style={pcSt.dropHint}>Drop a headshot onto any card to fill it in — photos save automatically.</p>
          </React.Fragment>
        ) : (
          <div style={{ background:'#fff', border:'1px solid var(--border-1)', borderRadius:12, padding:'64px 40px', textAlign:'center', boxShadow:'var(--shadow-sm)' }}>
            <div style={{ fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:900, fontSize:32, textTransform:'uppercase', color:'var(--bb-navy)' }}>{squad} Roster Coming Soon</div>
            <p style={{ fontSize:16, lineHeight:1.6, color:'var(--fg-2)', margin:'12px auto 0', maxWidth:460 }}>Coach {sel.coach}'s {squad} roster will be posted once the {sel.age} squad is finalized for the season.</p>
          </div>
        )}
      </div>
      <BrandBar /><FooterBlock />
    </div>
  );
};

const RosterTable = ({ data }) => {
  const star = data.players[0];
  return (
    <div style={hv.root}>
      <BNav />
      <PageHead eyebrow="12U Blue · Coach Law-Hing" title="Roster" sub="The full 12U Blue squad and where they stack up." />
      <div style={pcSt.wrap}>
        <TeamPills active="12U" />
        {/* featured player */}
        <div style={{ display:'grid', gridTemplateColumns:'0.8fr 1.2fr', gap:0, background:'var(--bb-navy)', borderRadius:14, overflow:'hidden', marginBottom:28 }}>
          <div style={{ position:'relative', minHeight:300, background:'#22305a' }}>
            <image-slot id="ros-star" shape="rect" placeholder="Featured player photo" style={{ position:'absolute', inset:0, width:'100%', height:'100%', display:'block' }}></image-slot>
          </div>
          <div style={{ padding:'40px 44px', color:'#fff', display:'flex', flexDirection:'column', justifyContent:'center' }}>
            <div style={{ ...hv.eyebrow, color:'var(--bb-red-bright)', marginBottom:12 }}>Captain · #{star.num}</div>
            <div style={{ fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:900, fontSize:56, lineHeight:0.86, textTransform:'uppercase' }}>{star.first} {star.last}</div>
            <div style={{ fontFamily:"'JetBrains Mono', monospace", fontSize:14, color:'rgba(255,255,255,0.7)', letterSpacing:'0.08em', margin:'10px 0 22px' }}>{star.pos} · Bats {star.bats}</div>
            <div style={{ display:'flex', gap:34 }}>
              {star.line.map(([v,l])=>(<div key={l}><div style={{ fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:900, fontSize:38, lineHeight:1 }}>{v}</div><div style={{ fontFamily:"'JetBrains Mono', monospace", fontSize:11, letterSpacing:'0.12em', textTransform:'uppercase', color:'rgba(255,255,255,0.6)', marginTop:4 }}>{l}</div></div>))}
            </div>
          </div>
        </div>
        {/* table */}
        <div style={{ background:'#fff', border:'1px solid var(--border-1)', borderRadius:12, overflow:'hidden', boxShadow:'var(--shadow-sm)' }}>
          <div style={{ display:'grid', gridTemplateColumns:'60px 1fr 90px 70px 1fr', gap:0, padding:'14px 24px', background:'var(--bb-navy)', color:'#fff', fontFamily:"'JetBrains Mono', monospace", fontSize:12, letterSpacing:'0.12em', textTransform:'uppercase' }}>
            <div>#</div><div>Player</div><div>Pos</div><div>Bats</div><div style={{ textAlign:'right' }}>2025 Line</div>
          </div>
          {data.players.map((p,i)=>(
            <div key={i} style={{ display:'grid', gridTemplateColumns:'60px 1fr 90px 70px 1fr', gap:0, padding:'14px 24px', borderBottom: i<data.players.length-1?'1px solid var(--border-1)':'none', alignItems:'center' }}>
              <div style={{ fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:900, fontSize:22, color:'var(--bb-red)' }}>{p.num}</div>
              <div style={{ fontWeight:700, color:'var(--bb-navy)' }}>{p.first} {p.last}</div>
              <div style={{ color:'var(--fg-2)' }}>{p.pos}</div>
              <div style={{ color:'var(--fg-2)' }}>{p.bats}</div>
              <div style={{ textAlign:'right', fontFamily:"'JetBrains Mono', monospace", fontSize:13, color:'var(--fg-2)' }}>{p.stat}</div>
            </div>
          ))}
        </div>
      </div>
      <BrandBar /><FooterBlock />
    </div>
  );
};

Object.assign(window, { SchedList, SchedSplit, TeamsGridPage, TeamsRows, RosterCards, RosterTable });
