// =====================================================================
// HOMEPAGE LAYOUT VARIATIONS — flat / professional C1 (navy + red)
// Shared nav + lower modules; each layout swaps the hero + top
// arrangement. All use the same image-slot ids as home.html so one
// dropped photo set fills every variation.
// =====================================================================

const hv = {
  root: { background:'var(--bb-field)', color:'var(--bb-ink)', fontFamily:"'Inter Tight', sans-serif", width:'100%' },
  // nav
  nav: { position:'sticky', top:0, zIndex:30, background:'var(--bb-navy)' },
  navInner: { maxWidth:1200, margin:'0 auto', height:70, display:'flex', alignItems:'center', gap:24, padding:'0 40px' },
  navLinks: { display:'flex', gap:22, marginLeft:'auto', marginRight:20, whiteSpace:'nowrap', flexShrink:0 },
  navLink: { fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:700, fontSize:15, color:'rgba(255,255,255,0.8)', textTransform:'uppercase', letterSpacing:'0.04em', cursor:'pointer' },
  navCta: { background:'var(--bb-red)', color:'#fff', border:0, height:40, padding:'0 22px', borderRadius:6, fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:900, fontSize:15, letterSpacing:'0.05em', textTransform:'uppercase', cursor:'pointer', flexShrink:0 },
  // shared buttons
  btnRed: { background:'var(--bb-red)', color:'#fff', border:0, height:52, padding:'0 28px', borderRadius:8, fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:800, fontSize:17, letterSpacing:'0.05em', textTransform:'uppercase', cursor:'pointer' },
  btnGhostLight: { background:'transparent', color:'#fff', border:'1.5px solid rgba(255,255,255,0.4)', height:52, padding:'0 28px', borderRadius:8, fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:800, fontSize:17, letterSpacing:'0.05em', textTransform:'uppercase', cursor:'pointer' },
  btnNavyOutline: { background:'transparent', color:'var(--bb-navy)', border:'1.5px solid var(--bb-navy)', height:46, padding:'0 22px', borderRadius:8, fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:800, fontSize:14, letterSpacing:'0.05em', textTransform:'uppercase', cursor:'pointer', whiteSpace:'nowrap' },
  eyebrow: { fontFamily:"'JetBrains Mono', monospace", fontSize:13, letterSpacing:'0.2em', textTransform:'uppercase', color:'var(--bb-red)' },
  // kpi
  kpiBand: { maxWidth:1200, margin:'0 auto', display:'grid', gridTemplateColumns:'repeat(4,1fr)', borderTop:'3px solid var(--bb-navy)', borderBottom:'1px solid var(--border-1)' },
  kpiCell: { padding:'30px 16px', textAlign:'center', borderRight:'1px solid var(--border-1)' },
  kpiVal: { fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:900, fontSize:52, lineHeight:1, color:'var(--bb-navy)' },
  kpiLbl: { fontFamily:"'JetBrains Mono', monospace", fontSize:12, letterSpacing:'0.14em', textTransform:'uppercase', color:'var(--fg-3)', marginTop:8 },
  // section frame
  section: { maxWidth:1200, margin:'0 auto', padding:'80px 40px' },
  sectionHd: { display:'flex', justifyContent:'space-between', alignItems:'flex-end', marginBottom:36 },
  sectionTitle: { fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:900, fontSize:54, lineHeight:0.9, textTransform:'uppercase', color:'var(--bb-navy)', margin:'8px 0 0' },
  // next game strip
  gameStrip: { display:'flex', alignItems:'center', gap:30, background:'#fff', border:'1px solid var(--border-1)', borderRadius:12, padding:'26px 32px', boxShadow:'var(--shadow-sm)' },
  gameDate: { textAlign:'center', flexShrink:0, width:86, borderRight:'1px solid var(--border-1)', paddingRight:24 },
  gameDay: { fontFamily:"'JetBrains Mono', monospace", fontSize:12, letterSpacing:'0.14em', color:'var(--bb-red)' },
  gameDateBig: { fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:900, fontSize:60, lineHeight:0.9, color:'var(--bb-navy)' },
  gameMon: { fontFamily:"'JetBrains Mono', monospace", fontSize:12, letterSpacing:'0.14em', textTransform:'uppercase', color:'var(--fg-3)' },
  gameMatch: { fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:800, fontSize:32, textTransform:'uppercase', color:'var(--bb-navy)', lineHeight:1, flex:1 },
  gameVs: { color:'var(--bb-red)', margin:'0 8px' },
  gameField: { fontSize:14, color:'var(--fg-2)', marginTop:8, fontFamily:"'Inter Tight', sans-serif" },
  // teams
  teamsGrid: { display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:18 },
  teamCard: { background:'#fff', border:'1px solid var(--border-1)', borderRadius:10, overflow:'hidden', boxShadow:'var(--shadow-sm)' },
  teamBar: { height:8 },
  teamBody: { padding:'20px 22px 24px' },
  teamAge: { fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:900, fontSize:48, lineHeight:0.9, color:'var(--bb-navy)' },
  teamColor: { fontFamily:"'JetBrains Mono', monospace", fontSize:12, letterSpacing:'0.14em', textTransform:'uppercase', color:'var(--fg-3)', marginTop:2 },
  teamCoach: { fontSize:16, fontWeight:700, color:'var(--bb-navy)', marginTop:14 },
  teamRec: { fontFamily:"'JetBrains Mono', monospace", fontSize:14, color:'var(--bb-red)', marginTop:4 },
  // cooperstown band
  coop: { background:'var(--bb-red)', color:'#fff' },
  coopInner: { maxWidth:1200, margin:'0 auto', padding:'72px 40px', display:'grid', gridTemplateColumns:'1.1fr 0.9fr', gap:52, alignItems:'center' },
  coopTitle: { fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:900, fontSize:64, lineHeight:0.86, textTransform:'uppercase', margin:'14px 0 18px', color:'#fff' },
  coopLead: { fontSize:18, lineHeight:1.6, color:'rgba(255,255,255,0.92)', maxWidth:500, margin:'0 0 26px' },
  coopBarHd: { display:'flex', justifyContent:'space-between', fontFamily:"'JetBrains Mono', monospace", fontSize:14, letterSpacing:'0.06em', marginBottom:10 },
  coopBar: { height:12, borderRadius:6, background:'rgba(0,0,0,0.22)', overflow:'hidden', marginBottom:28 },
  coopBarFill: { height:'100%', background:'#fff', borderRadius:6 },
  coopBtn: { background:'#fff', color:'var(--bb-navy)', border:0, height:52, padding:'0 30px', borderRadius:8, fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:800, fontSize:16, letterSpacing:'0.05em', textTransform:'uppercase', cursor:'pointer' },
  coopPhoto: { height:340, borderRadius:10, overflow:'hidden', border:'1px solid rgba(255,255,255,0.4)' },
  // news
  newsGrid: { display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:22 },
  newsCard: { background:'#fff', border:'1px solid var(--border-1)', borderRadius:10, overflow:'hidden', boxShadow:'var(--shadow-sm)' },
  newsBody: { padding:'20px 22px 26px' },
  newsMeta: { fontFamily:"'JetBrains Mono', monospace", fontSize:12, letterSpacing:'0.1em', textTransform:'uppercase', color:'var(--fg-3)', marginBottom:10 },
  newsTitle: { fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:800, fontSize:26, lineHeight:0.98, textTransform:'uppercase', color:'var(--bb-navy)', margin:'0 0 10px' },
  newsExcerpt: { fontSize:15, lineHeight:1.6, color:'var(--fg-2)', margin:0 },
  // brand bar
  brandBar: { background:'#fff', borderTop:'3px solid var(--bb-navy)', borderBottom:'1px solid var(--border-1)', display:'flex', alignItems:'center', justifyContent:'center', gap:40, padding:'48px 40px', flexWrap:'wrap' },
  // footer
  footer: { background:'var(--bb-navy)', color:'#fff' },
  footTop: { maxWidth:1200, margin:'0 auto', padding:'60px 40px 44px', display:'flex', justifyContent:'space-between', gap:48, flexWrap:'wrap' },
  footBlurb: { fontSize:15, lineHeight:1.7, color:'rgba(255,255,255,0.6)', marginTop:18, maxWidth:300 },
  footCols: { display:'flex', gap:56 },
  footColHd: { fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:800, fontSize:15, letterSpacing:'0.1em', textTransform:'uppercase', color:'var(--bb-red-bright)', marginBottom:16 },
  footLink: { display:'block', fontSize:15, color:'rgba(255,255,255,0.82)', marginBottom:10, cursor:'pointer' },
  footBar: { borderTop:'1px solid rgba(255,255,255,0.1)', padding:'22px 40px', textAlign:'center', fontFamily:"'JetBrains Mono', monospace", fontSize:12, letterSpacing:'0.1em', color:'rgba(255,255,255,0.4)' },
};

// ---------- routing helpers (no-op outside the router in pages.html) ----------
function goTo(r) { if (typeof window !== 'undefined' && window.bbGo) window.bbGo(r); }
const NAV_ITEMS = [['Teams','teams'],['Roster','roster'],['News','news'],['Cooperstown','cooperstown'],['Links','links'],['About','about']];
const FOOT_LINKS = { 'About':'about','History':'history','FAQ':'faq','Teams':'teams','Tryouts':'tryouts','Coaches':'about','Schedule':'schedule','Roster':'roster','Stats':'roster','News':'news','Shop':'shop','Sponsors':'cooperstown','Contact':'contact' };

// ---------- shared blocks ----------
function BNav() {
  const active = (typeof window !== 'undefined' && window.bbActive) || null;
  return (
    <header style={hv.nav}><div style={hv.navInner}>
      <div style={{ display:'flex', alignItems:'center', gap:13, cursor:'pointer' }} onClick={()=>goTo('home')}>
        <img src="assets/b-logo-silver.png" alt="Belmont Blasters" style={{ height: 44 }} />
        <span style={{ fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:900, fontSize:24, letterSpacing:'0.02em', textTransform:'uppercase', color:'#fff', lineHeight:0.9 }}>Belmont<br/>Blasters</span>
      </div>
      <nav style={hv.navLinks}>{NAV_ITEMS.map(([l,r])=>(
        <a key={l} onClick={()=>goTo(r)} style={{ ...hv.navLink, color: active===r?'#fff':hv.navLink.color, borderBottom: active===r?'2px solid var(--bb-red-bright)':'2px solid transparent', paddingBottom:3 }}>{l}</a>
      ))}</nav>
      <button style={hv.navCta} onClick={()=>goTo('tryouts')}>Register ▸</button>
    </div></header>
  );
}
function KPIStrip({ kpis }) {
  return (<section style={hv.kpiBand}>{kpis.map((k,i)=>(
    <div key={i} style={{ ...hv.kpiCell, borderRight: i<kpis.length-1?'1px solid var(--border-1)':'none' }}>
      <div style={hv.kpiVal}>{k.value}</div><div style={hv.kpiLbl}>{k.label}</div>
    </div>))}</section>);
}
function NextGameStrip({ next }) {
  return (
    <section style={{ ...hv.section, paddingTop:64, paddingBottom:0 }}>
      <div style={hv.sectionHd}><div><div style={hv.eyebrow}>Next Up</div><h2 style={hv.sectionTitle}>Gameday</h2></div>
        <button style={hv.btnNavyOutline}>Full Schedule →</button></div>
      <div style={hv.gameStrip}>
        <div style={hv.gameDate}><div style={hv.gameDay}>{next.day}</div><div style={hv.gameDateBig}>{next.date.split(' ')[1]}</div><div style={hv.gameMon}>{next.date.split(' ')[0]}</div></div>
        <div style={{ flex:1 }}>
          <div style={hv.gameMatch}>Blasters 12U <span style={hv.gameVs}>vs</span> {next.opponent}</div>
          <div style={hv.gameField}>{next.home?'Home':'Away'} · {next.time} · {next.field}</div>
        </div>
        <button style={hv.btnNavyOutline}>Details →</button>
      </div>
    </section>
  );
}
function TeamsBlock({ teams }) {
  return (
    <section style={{ background:'var(--bb-navy)' }}>
      <div style={hv.section}>
        <div style={hv.sectionHd}><div><div style={{ ...hv.eyebrow, color:'var(--bb-red-bright)' }}>2026 Squads</div><h2 style={{ ...hv.sectionTitle, color:'#fff' }}>Our Teams</h2></div>
          <button style={{ ...hv.btnNavyOutline, color:'#fff', border:'1.5px solid rgba(255,255,255,0.5)' }} onClick={()=>goTo('teams')}>All Teams →</button></div>
        <div style={hv.teamsGrid}>{teams.map((tm,i)=>(
          <div key={i} style={{ ...hv.teamCard, cursor:'pointer' }} onClick={()=>{ window.__rosterAge = tm.age; goTo('roster'); }}>
            <div style={{ ...hv.teamBar, background: tm.color==='red'?'var(--bb-red)':'var(--bb-navy)' }}></div>
            <div style={hv.teamBody}>
              <div style={hv.teamAge}>{tm.age}</div>
              <div style={hv.teamColor}>{tm.color==='red'?'Red Squad':'Blue Squad'}</div>
              <div style={hv.teamCoach}>Coach {tm.coach}</div>
              <div style={hv.teamRec}>{tm.record}</div>
              <div style={{ fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:800, fontSize:13, letterSpacing:'0.06em', textTransform:'uppercase', color:'var(--bb-red)', marginTop:14 }}>View Roster →</div>
            </div>
          </div>))}</div>
      </div>
    </section>
  );
}
function CoopBand({ coop }) {
  return (
    <section style={hv.coop}><div style={hv.coopInner}>
      <div>
        <div style={{ ...hv.eyebrow, color:'rgba(255,255,255,0.85)' }}>★ Cooperstown 2026</div>
        <h2 style={hv.coopTitle}>Send 'Em<br/>to the Park.</h2>
        <p style={hv.coopLead}>The 12U squad is headed to Cooperstown Dreams Park. Every dollar helps cover travel, lodging, and entry.</p>
        <div style={hv.coopBarHd}><span>{coop.raised} of {coop.goal}</span><span>{coop.days} days left</span></div>
        <div style={hv.coopBar}><div style={{ ...hv.coopBarFill, width:coop.pct }}></div></div>
        <button style={hv.coopBtn}>Donate Now ▸</button>
      </div>
      <div style={hv.coopPhoto}><image-slot id="en-coop" shape="rect" placeholder="Cooperstown / team photo" style={{ width:'100%', height:'100%', display:'block' }}></image-slot></div>
    </div></section>
  );
}
function NewsBlock({ news }) {
  return (
    <section style={hv.section}>
      <div style={hv.sectionHd}><div><div style={hv.eyebrow}>From the Dugout</div><h2 style={hv.sectionTitle}>Latest News</h2></div>
        <button style={hv.btnNavyOutline} onClick={()=>goTo('news')}>All Posts →</button></div>
      <div style={hv.newsGrid}>{news.map((n,i)=>(
        <article key={n.slug||i} style={{ ...hv.newsCard, cursor:'pointer' }} onClick={()=>{ if(n.slug){ location.href = 'article.html?slug=' + n.slug; } else { goTo('news'); } }}>
          <image-slot id={`news-photo-${n.slug||i}`} src={n.photo} shape="rect" placeholder="Photo" style={{ width:'100%', height:170, display:'block' }}></image-slot>
          <div style={hv.newsBody}>
            <div style={hv.newsMeta}><span style={{ color: n.tone==='red'?'var(--bb-red)':'var(--bb-navy)' }}>{n.cat}</span> · {n.date}</div>
            <h3 style={hv.newsTitle}>{n.title}</h3>
            <p style={hv.newsExcerpt}>{n.excerpt}</p>
          </div>
        </article>))}</div>
    </section>
  );
}
function BrandBar() {
  return (<section style={hv.brandBar}>
    <img src="assets/wordmark-primary.png" alt="Belmont Blasters Baseball" style={{ height: 140 }} />
  </section>);
}
function FooterBlock() {
  return (
    <footer style={hv.footer}>
      <div style={hv.footTop}>
        <div><img src="assets/b-logo-silver.png" alt="" style={{ height: 48 }} /><p style={hv.footBlurb}>Belmont, California · Youth travel baseball, 7U–12U. BRSLL spring · Blasters summer & fall.</p></div>
        <div style={hv.footCols}>
          <div><div style={hv.footColHd}>Program</div>{['About','History','FAQ','Teams','Tryouts'].map(x=><a key={x} onClick={()=>goTo(FOOT_LINKS[x])} style={hv.footLink}>{x}</a>)}</div>
          <div><div style={hv.footColHd}>Play</div>{['Schedule','Roster','Stats','News'].map(x=><a key={x} onClick={()=>goTo(FOOT_LINKS[x])} style={hv.footLink}>{x}</a>)}</div>
          <div><div style={hv.footColHd}>Connect</div>{['Shop','Sponsors','Contact','Instagram'].map(x=>FOOT_LINKS[x]?<a key={x} onClick={()=>goTo(FOOT_LINKS[x])} style={hv.footLink}>{x}</a>:<a key={x} style={hv.footLink}>{x}</a>)}</div>
        </div>
      </div>
      <div style={{ borderTop:'1px solid rgba(255,255,255,0.12)', padding:'18px 40px', display:'flex', alignItems:'center', justifyContent:'center', gap:14 }}>
        <img src="assets/city-of-belmont.png" alt="City of Belmont, California" style={{ height:42, background:'#fff', borderRadius:'50%', padding:3, flexShrink:0 }} />
        <span style={{ fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:800, fontSize:18, letterSpacing:'0.04em', textTransform:'uppercase', color:'rgba(255,255,255,0.82)' }}>Thank you, Belmont, for supporting the Blasters.</span>
      </div>
      <div style={hv.footBar}>© 2026 Belmont Blasters Baseball Club · @belmontblastersbaseballclub</div>
    </footer>
  );
}
function Lower({ data }) {
  return (<><TeamsBlock teams={data.teams} /><CoopBand coop={data.coop} /><NewsBlock news={data.news} /><BrandBar /><FooterBlock /></>);
}

// =====================================================================
// LAYOUT 2 — "SPLIT": navy text panel + photo, inline stats, game strip
// =====================================================================
const HomeSplit = ({ data }) => (
  <div style={hv.root}>
    <BNav />
    <section style={{ display:'grid', gridTemplateColumns:'1.05fr 0.95fr', minHeight:560 }}>
      <div style={{ background:'var(--bb-navy)', color:'#fff', padding:'88px 64px', display:'flex', flexDirection:'column', justifyContent:'center' }}>
        <div style={{ ...hv.eyebrow, color:'#fff', marginBottom:22 }}>2026 Travel Season · 7U–12U</div>
        <h1 style={{ fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:900, fontSize:96, lineHeight:0.84, letterSpacing:'-0.02em', textTransform:'uppercase', margin:'0 0 24px', color:'#fff' }}>Built in<br/><span style={{ color:'var(--bb-red)' }}>Belmont.</span></h1>
        <p style={{ fontSize:19, lineHeight:1.6, color:'rgba(255,255,255,0.78)', maxWidth:440, margin:'0 0 32px' }}>A youth travel program built on hard work, team-first baseball, and the road to Cooperstown.</p>
        <div style={{ display:'flex', gap:14, flexWrap:'wrap' }}><button style={hv.btnRed}>Register for Tryouts ▸</button><button style={hv.btnGhostLight}>Schedule</button></div>
      </div>
      <div style={{ position:'relative', background:'#1a2440' }}>
        <image-slot id="en-hero" shape="rect" placeholder="Drop your team hero photo" style={{ position:'absolute', inset:0, width:'100%', height:'100%', display:'block' }}></image-slot>
      </div>
    </section>
    <KPIStrip kpis={data.kpis} />
    <NextGameStrip next={data.games.find(g=>g.status==='upcoming')||data.games[0]} />
    <Lower data={data} />
  </div>
);

// =====================================================================
// LAYOUT 3 — "OVERLAY": full-bleed hero, overlapping quick-link cards
// =====================================================================
const HomeOverlay = ({ data }) => {
  const next = data.games.find(g=>g.status==='upcoming')||data.games[0];
  const links = [
    { k:'Tryouts', t:'Register 2026', d:'8U–11U · Aug 17', tone:'red' },
    { k:'Schedule', t:'Games & Results', d:'Summer season', tone:'navy' },
    { k:'Shop', t:'Team Store', d:'blasters.itemorder.com', tone:'navy' },
  ];
  return (
    <div style={hv.root}>
      <BNav />
      <section style={{ position:'relative', height:600, overflow:'hidden', background:'#1a2440' }}>
        <image-slot id="en-hero" shape="rect" placeholder="Drop your team hero photo" style={{ position:'absolute', inset:0, width:'100%', height:'100%', display:'block' }}></image-slot>
        <div style={{ position:'absolute', inset:0, background:'linear-gradient(180deg, rgba(18,28,54,0.55) 0%, rgba(18,28,54,0) 35%, rgba(18,28,54,0.85) 100%)' }}></div>
        <div style={{ position:'absolute', left:0, right:0, bottom:90, maxWidth:1200, margin:'0 auto', padding:'0 40px' }}>
          <div style={{ ...hv.eyebrow, color:'#fff', marginBottom:16 }}>2026 Travel Season · 7U–12U</div>
          <h1 style={{ fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:900, fontSize:120, lineHeight:0.82, letterSpacing:'-0.02em', textTransform:'uppercase', color:'#fff', margin:0, textShadow:'0 4px 24px rgba(0,0,0,0.4)' }}>Built in<br/>Belmont.</h1>
        </div>
        <div style={{ position:'absolute', bottom:0, left:0, right:0, height:8, background:'var(--bb-red)' }}></div>
      </section>
      {/* overlapping quick links */}
      <section style={{ maxWidth:1200, margin:'-56px auto 0', padding:'0 40px', position:'relative', zIndex:5 }}>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:18 }}>
          {links.map((l,i)=>(
            <div key={i} style={{ background:'#fff', border:'1px solid var(--border-1)', borderRadius:12, padding:'26px 28px', boxShadow:'var(--shadow-md)', borderTop:`5px solid ${l.tone==='red'?'var(--bb-red)':'var(--bb-navy)'}` }}>
              <div style={hv.eyebrow}>{l.k}</div>
              <div style={{ fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:900, fontSize:30, textTransform:'uppercase', color:'var(--bb-navy)', margin:'8px 0 6px', lineHeight:1 }}>{l.t}</div>
              <div style={{ fontSize:14, color:'var(--fg-2)' }}>{l.d}</div>
            </div>
          ))}
        </div>
      </section>
      <div style={{ marginTop:64 }}><KPIStrip kpis={data.kpis} /></div>
      <NextGameStrip next={next} />
      <Lower data={data} />
    </div>
  );
};

// =====================================================================
// LAYOUT 4 — "BENTO": compact hero band + modular card grid
// =====================================================================
const HomeBento = ({ data }) => {
  const next = data.games.find(g=>g.status==='upcoming')||data.games[0];
  return (
    <div style={hv.root}>
      <BNav />
      <section style={{ position:'relative', height:420, overflow:'hidden', background:'#1a2440' }}>
        <image-slot id="en-hero" shape="rect" placeholder="Drop your team hero photo" style={{ position:'absolute', inset:0, width:'100%', height:'100%', display:'block' }}></image-slot>
        <div style={{ position:'absolute', inset:0, background:'linear-gradient(90deg, rgba(18,28,54,0.92) 0%, rgba(18,28,54,0.5) 60%, rgba(18,28,54,0.2) 100%)' }}></div>
        <div style={{ position:'relative', maxWidth:1200, margin:'0 auto', padding:'0 40px', height:'100%', display:'flex', flexDirection:'column', justifyContent:'center', color:'#fff' }}>
          <div style={{ ...hv.eyebrow, color:'#fff', marginBottom:14 }}>2026 Travel Season · 7U–12U</div>
          <h1 style={{ fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:900, fontSize:82, lineHeight:0.84, letterSpacing:'-0.02em', textTransform:'uppercase', margin:0, color:'#fff' }}>Built in <span style={{ color:'#ff6b62' }}>Belmont.</span></h1>
        </div>
        <div style={{ position:'absolute', bottom:0, left:0, right:0, height:8, background:'var(--bb-red)' }}></div>
      </section>
      {/* bento grid */}
      <section style={{ maxWidth:1200, margin:'0 auto', padding:'48px 40px 0' }}>
        <div style={{ display:'grid', gridTemplateColumns:'1.5fr 1fr', gridAutoRows:'minmax(0, auto)', gap:18 }}>
          {/* next game (large, navy) */}
          <div style={{ background:'var(--bb-navy)', color:'#fff', borderRadius:14, padding:'34px 38px', display:'flex', flexDirection:'column', justifyContent:'space-between', minHeight:230 }}>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start' }}>
              <div style={{ ...hv.eyebrow, color:'var(--bb-red-bright)' }}>Next Up · {next.home?'Home':'Away'}</div>
              <div style={{ fontFamily:"'JetBrains Mono', monospace", fontSize:13, color:'rgba(255,255,255,0.7)', letterSpacing:'0.08em' }}>{next.day} {next.date} · {next.time}</div>
            </div>
            <div style={{ fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:900, fontSize:54, lineHeight:0.86, textTransform:'uppercase' }}>Blasters 12U<br/><span style={{ color:'rgba(255,255,255,0.55)', fontSize:30 }}>vs</span> {next.opponent}</div>
            <div style={{ display:'flex', gap:12 }}><button style={{ ...hv.navCta, height:42 }}>Directions</button><button style={{ ...hv.btnGhostLight, height:42, fontSize:14, padding:'0 18px' }}>+ Calendar</button></div>
          </div>
          {/* cooperstown (red) */}
          <div style={{ background:'var(--bb-red)', color:'#fff', borderRadius:14, padding:'30px 32px', display:'flex', flexDirection:'column', justifyContent:'space-between', minHeight:230 }}>
            <div style={{ ...hv.eyebrow, color:'#fff' }}>★ Cooperstown 2026</div>
            <div style={{ fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:900, fontSize:40, lineHeight:0.9, textTransform:'uppercase' }}>Send 'Em to the Park.</div>
            <div>
              <div style={{ ...hv.coopBarHd, fontSize:13 }}><span>{data.coop.raised}</span><span>of {data.coop.goal}</span></div>
              <div style={hv.coopBar}><div style={{ ...hv.coopBarFill, width:data.coop.pct }}></div></div>
              <button style={{ ...hv.coopBtn, height:44, fontSize:14 }}>Donate ▸</button>
            </div>
          </div>
        </div>
        {/* kpi mini row */}
        <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:18, marginTop:18 }}>
          {data.kpis.map((k,i)=>(
            <div key={i} style={{ background:'#fff', border:'1px solid var(--border-1)', borderRadius:12, padding:'22px 18px', textAlign:'center', boxShadow:'var(--shadow-sm)' }}>
              <div style={{ ...hv.kpiVal, fontSize:44 }}>{k.value}</div><div style={hv.kpiLbl}>{k.label}</div>
            </div>))}
        </div>
      </section>
      <TeamsBlock teams={data.teams} />
      <NewsBlock news={data.news} />
      <BrandBar /><FooterBlock />
    </div>
  );
};

// ---------- shared page header (interior pages) ----------
function PageHead({ eyebrow, title, sub }) {
  return (
    <section style={{ background:'var(--bb-navy)', color:'#fff' }}>
      <div style={{ maxWidth:1200, margin:'0 auto', padding:'54px 40px 50px' }}>
        <div style={{ ...hv.eyebrow, color:'var(--bb-red-bright)', marginBottom:14 }}>{eyebrow}</div>
        <h1 style={{ fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:900, fontSize:72, lineHeight:0.84, letterSpacing:'-0.02em', textTransform:'uppercase', margin:0, color:'#fff' }}>{title}</h1>
        {sub && <p style={{ fontSize:18, lineHeight:1.6, color:'rgba(255,255,255,0.75)', maxWidth:600, margin:'16px 0 0' }}>{sub}</p>}
      </div>
      <div style={{ height:6, background:'var(--bb-red)' }}></div>
    </section>
  );
}

Object.assign(window, { HomeSplit, HomeOverlay, HomeBento, PageHead, BNav, FooterBlock, BrandBar, KPIStrip, TeamsBlock, NewsBlock, CoopBand, hv: hv });