// =====================================================================
// HOMEPAGE — 3 FRESH DIRECTIONS (flat / professional C1, navy + red)
// Built on the real Belmont Blasters content pulled from belmontblasters.org:
//   founded 2008 · 7U–12U · augments BRSLL Little League · real coaches ·
//   Cooperstown 2026 (12U Blue) fundraising · real 7U tryout dates ·
//   real recent championships · store at blasters.itemorder.com
// Shared nav/footer/KPI/teams/news blocks come from HomeVariations.jsx
// (on window). Each direction swaps the hero + signature module.
// =====================================================================
const { hv: V, BNav: HONav, KPIStrip: HOKpis, TeamsBlock: HOTeams, NewsBlock: HONews, BrandBar: HOBrand, FooterBlock: HOFoot } = window;

const goHO = (r) => { if (typeof window !== 'undefined' && window.bbGo) window.bbGo(r); };

// real recent championships (belmontblasters.org)
const CHAMPS = [
  ['2024', '12U Blue', 'Foster City Champions'],
  ['2023', '12U Blue', 'NCS Veterans Day Classic'],
  ['2024', '10U Blue', 'Belmont Invitational'],
  ['2022', '12U Blue', 'Cooperstown · Sweet 16'],
  ['2023', '10U Blue', 'NCTB Moonshot Classic'],
  ['2021', '11U Blue', 'NCS Halloween Havoc'],
];
// real 2026 7U tryout schedule (belmontblasters.org)
const TRYOUTS = [
  ['7U', 'Sat · May 31', '10:00 AM – 12:00 PM', 'Belmont Sports Complex'],
  ['7U', 'Sun · Jun 1',  '5:00 – 6:30 PM',      'Ralston Field 4'],
  ['7U', 'Mon · Jun 2',  '5:00 – 6:30 PM',      'Ralston Field 4'],
];

const hoSt = {
  display: (s) => ({ fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:900, lineHeight:0.84, letterSpacing:'-0.02em', textTransform:'uppercase', margin:0, ...s }),
  blockTitle: { fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:900, fontSize:54, lineHeight:0.9, textTransform:'uppercase', color:'var(--bb-navy)', margin:'8px 0 0' },
  mono: { fontFamily:"'JetBrains Mono', monospace" },
};

// ---------- shared real Cooperstown band ----------
function CoopReal() {
  return (
    <section style={{ background:'var(--bb-red)', color:'#fff' }}>
      <div style={{ maxWidth:1200, margin:'0 auto', padding:'72px 40px', display:'grid', gridTemplateColumns:'1.05fr 0.95fr', gap:52, alignItems:'center' }}>
        <div>
          <div style={{ ...V.eyebrow, color:'rgba(255,255,255,0.92)' }}>★ Cooperstown 2026 · 12U Blue</div>
          <h2 style={hoSt.display({ fontSize:62, color:'#fff', margin:'14px 0 18px' })}>Send 'Em<br/>to the Park.</h2>
          <p style={{ fontSize:18, lineHeight:1.6, color:'rgba(255,255,255,0.92)', maxWidth:500, margin:'0 0 14px' }}>The 12U Blue squad earned its trip to Cooperstown Dreams Park next summer. Help cover travel, lodging, and tournament costs.</p>
          <p style={{ ...hoSt.mono, fontSize:13, letterSpacing:'0.04em', color:'rgba(255,255,255,0.8)', margin:'0 0 26px' }}>Donations are 100% tax-deductible · Tax ID 47-4275984</p>
          <div style={{ display:'flex', gap:12, flexWrap:'wrap' }}>
            <a href="https://www.gofundme.com/f/belmont-blasters-road-to-cooperstown?attribution_id=sl:c7c6c57f-0f88-4dcc-adb0-7e75568f2bfc&lang=en_US&utm_campaign=man_ss_icons&utm_medium=customer&utm_source=copy_link" target="_blank" rel="noopener noreferrer" style={{ ...V.coopBtn, display:'inline-flex', alignItems:'center', textDecoration:'none', boxSizing:'border-box' }}>Donate via GoFundMe ▸</a>
          </div>
        </div>
        <div style={V.coopPhoto}>
          <image-slot id="en-coop" src="assets/photos/cooperstown.jpg" shape="rect" placeholder="Cooperstown / 12U team photo" style={{ width:'100%', height:'100%', display:'block' }}></image-slot>
        </div>
      </div>
    </section>
  );
}

// =====================================================================
// DIRECTION 1 — "SCOREBOARD": navy split hero with a tryouts scoreboard
// card, KPI band, a real Trophy Case ticker. Information-forward, sporty.
// =====================================================================
const HomeScoreboard = ({ data }) => (
  <div style={V.root}>
    <HONav />
    <section style={{ background:'var(--bb-navy)', position:'relative', overflow:'hidden' }}>
      <img src="assets/wordmark-gray-trans.png" alt="" style={{ position:'absolute', right:-40, top:30, width:560, maxWidth:'46%', opacity:0.06, pointerEvents:'none' }} />
      <div style={{ position:'relative', maxWidth:1200, margin:'0 auto', padding:'76px 40px 84px', display:'grid', gridTemplateColumns:'1.1fr 0.9fr', gap:52, alignItems:'center' }}>
        <div style={{ color:'#fff' }}>
          <div style={{ ...V.eyebrow, color:'#fff', marginBottom:20 }}>Belmont, CA · Since 2008</div>
          <h1 style={hoSt.display({ fontSize:104, color:'#fff', marginBottom:22 })}>Play Like<br/>a <span style={{ color:'var(--bb-red-bright)' }}>Blaster.</span></h1>
          <p style={{ fontSize:19, lineHeight:1.6, color:'rgba(255,255,255,0.8)', maxWidth:460, margin:'0 0 30px' }}>Belmont's competitive summer travel program, 7U–12U — built to augment Little League and send kids to Cooperstown.</p>
          <div style={{ display:'flex', gap:14, flexWrap:'wrap' }}>
            <button style={V.btnRed} onClick={()=>goHO('tryouts')}>Register for Tryouts ▸</button>
            <button style={V.btnGhostLight} onClick={()=>goHO('about')}>About the Club</button>
          </div>
        </div>
        {/* scoreboard / tryouts card */}
        <div style={{ background:'#0f1a38', border:'1px solid rgba(255,255,255,0.12)', borderRadius:16, overflow:'hidden', boxShadow:'0 20px 50px -20px rgba(0,0,0,0.6)' }}>
          <div style={{ background:'var(--bb-red)', color:'#fff', padding:'16px 24px', display:'flex', justifyContent:'space-between', alignItems:'center', gap:12 }}>
            <span style={{ fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:900, fontSize:22, letterSpacing:'0.04em', textTransform:'uppercase', whiteSpace:'nowrap' }}>2026 Tryouts</span>
            <span style={{ ...hoSt.mono, fontSize:12, letterSpacing:'0.14em', color:'rgba(255,255,255,0.85)', whiteSpace:'nowrap' }}>NOW OPEN · 7U</span>
          </div>
          <div>
            {TRYOUTS.map((r,i)=>(
              <div key={i} style={{ display:'flex', alignItems:'center', gap:16, padding:'18px 24px', borderBottom:'1px solid rgba(255,255,255,0.08)' }}>
                <div style={{ fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:900, fontSize:30, color:'var(--bb-red-bright)', width:50 }}>{r[0]}</div>
                <div style={{ flex:1 }}>
                  <div style={{ color:'#fff', fontWeight:700, fontSize:16 }}>{r[1]}</div>
                  <div style={{ ...hoSt.mono, fontSize:12, color:'rgba(255,255,255,0.6)', marginTop:3, letterSpacing:'0.04em' }}>{r[2]} · {r[3]}</div>
                </div>
              </div>
            ))}
            <div style={{ padding:'20px 24px 24px' }}>
              <button style={{ ...V.btnRed, width:'100%' }} onClick={()=>goHO('tryouts')}>Register via TeamSnap ▸</button>
            </div>
          </div>
        </div>
      </div>
    </section>
    <HOKpis kpis={data.kpis} />
    {/* trophy case ticker */}
    <section style={{ ...V.section, paddingTop:72, paddingBottom:24 }}>
      <div style={{ ...V.sectionHd }}>
        <div><div style={V.eyebrow}>Recent Hardware</div><h2 style={hoSt.blockTitle}>Trophy Case</h2></div>
        <button style={V.btnNavyOutline} onClick={()=>goHO('about')}>Championship Timeline →</button>
      </div>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:16 }}>
        {CHAMPS.map((c,i)=>(
          <div key={i} style={{ display:'flex', alignItems:'center', gap:16, background:'#fff', border:'1px solid var(--border-1)', borderLeft:'5px solid var(--bb-red)', borderRadius:12, padding:'18px 22px', boxShadow:'var(--shadow-sm)' }}>
            <span style={{ fontSize:22, color:'var(--bb-red)' }}>★</span>
            <div>
              <div style={{ fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:800, fontSize:19, textTransform:'uppercase', color:'var(--bb-navy)', lineHeight:1 }}>{c[2]}</div>
              <div style={{ ...hoSt.mono, fontSize:12, color:'var(--fg-3)', marginTop:6, letterSpacing:'0.06em' }}>{c[1]} · {c[0]}</div>
            </div>
          </div>
        ))}
      </div>
    </section>
    <HOTeams teams={data.teams} />
    <CoopReal />
    <HONews news={data.news} />
    <HOBrand /><HOFoot />
  </div>
);

// =====================================================================
// DIRECTION 2 — "EDITORIAL": full-bleed photo hero, oversized headline,
// a club-story band (2008 / Little League model), generous whitespace.
// Premium, photo-led, narrative.
// =====================================================================
const HomeEditorial = ({ data }) => (
  <div style={V.root}>
    <HONav />
    <section style={{ position:'relative', height:660, 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.35) 0%, rgba(18,28,54,0) 30%, rgba(18,28,54,0.9) 100%)', pointerEvents:'none' }}></div>
      <div style={{ position:'absolute', left:0, right:0, bottom:78, maxWidth:1200, margin:'0 auto', padding:'0 40px', pointerEvents:'none' }}>
        <div style={{ ...V.eyebrow, color:'#fff', marginBottom:18 }}>Belmont, California · Established 2008</div>
        <h1 style={hoSt.display({ fontSize:128, color:'#fff', textShadow:'0 4px 30px rgba(0,0,0,0.45)' })}>Belmont's<br/>Ballclub.</h1>
        <div style={{ display:'flex', gap:14, marginTop:30, flexWrap:'wrap', pointerEvents:'auto' }}>
          <button style={V.btnRed} onClick={()=>goHO('tryouts')}>Register for Tryouts ▸</button>
          <button style={V.btnGhostLight} onClick={()=>goHO('cooperstown')}>Road to Cooperstown</button>
        </div>
      </div>
      <div style={{ position:'absolute', bottom:0, left:0, right:0, height:8, background:'var(--bb-red)', pointerEvents:'none' }}></div>
    </section>
    {/* club story band */}
    <section style={{ ...V.section, paddingTop:90, paddingBottom:80 }}>
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:64, alignItems:'center' }}>
        <div>
          <div style={V.eyebrow}>Our Story</div>
          <h2 style={hoSt.blockTitle}>More Than<br/>Travel Ball.</h2>
          <p style={{ fontSize:19, lineHeight:1.7, color:'var(--fg-2)', margin:'22px 0 16px' }}>Since 2008, the Blasters have existed to make Belmont/Redwood Shores Little League stronger. Every Blaster plays BRSLL in the spring; our season begins only once All-Star play wraps.</p>
          <p style={{ fontSize:19, lineHeight:1.7, color:'var(--fg-2)', margin:0 }}>It's a formula that works — Little League cited the Blasters as an ideal model for how leagues and tournament programs can work together to give every kid the best experience.</p>
          <div style={{ display:'flex', gap:40, marginTop:36 }}>
            {[['2008','Founded'],['7U–12U','Age Range'],['Cooperstown','2022 & 2026']].map(([v,l])=>(
              <div key={l}><div style={{ fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:900, fontSize:34, color:'var(--bb-navy)', lineHeight:1 }}>{v}</div><div style={{ ...hoSt.mono, fontSize:11, letterSpacing:'0.12em', textTransform:'uppercase', color:'var(--fg-3)', marginTop:6 }}>{l}</div></div>
            ))}
          </div>
        </div>
        <div style={{ height:480, borderRadius:16, overflow:'hidden', boxShadow:'var(--shadow-md)' }}>
          <image-slot id="en-story" shape="rect" placeholder="Club / dugout photo" style={{ width:'100%', height:'100%', display:'block' }}></image-slot>
        </div>
      </div>
    </section>
    <CoopReal />
    <HONews news={data.news} />
    <HOTeams teams={data.teams} />
    <HOBrand /><HOFoot />
  </div>
);

// =====================================================================
// DIRECTION 3 — "DASHBOARD": compact hero band + a grid of big quick-
// action tiles for parents (Tryouts, Cooperstown, Store, Teams,
// Schedule, Sponsors). Utility-first hub.
// =====================================================================
const TILES = [
  { k:'Register', t:'2026 Tryouts', d:'7U sessions May 31 – Jun 2. Register through TeamSnap.', tone:'red',  route:'tryouts' },
  { k:'Give',     t:'Cooperstown 2026', d:'Help send 12U Blue to Dreams Park. Tax-deductible.', tone:'navy', route:'cooperstown' },
  { k:'Shop',     t:'Team Store', d:'Order 2026 gear at blasters.itemorder.com.',            tone:'navy', route:'shop' },
  { k:'Rosters',  t:'Our Teams', d:'Five squads, 7U–12U. Blue & Red.',                       tone:'navy', route:'teams' },
  { k:'Games',    t:'Schedule', d:'Tournaments across NorCal all summer & fall.',             tone:'navy', route:'schedule' },
  { k:'Support',  t:'Sponsors & Donors', d:'Back the club and the boys of summer.',           tone:'red',  route:'contact' },
];
const HomeDashboard = ({ data }) => (
  <div style={V.root}>
    <HONav />
    <section style={{ position:'relative', height:340, overflow:'hidden', background:'var(--bb-navy)' }}>
      <img src="assets/wordmark-gray-trans.png" alt="" style={{ position:'absolute', right:-30, top:20, width:520, maxWidth:'44%', opacity:0.07, pointerEvents:'none' }} />
      <div style={{ position:'relative', maxWidth:1200, margin:'0 auto', padding:'0 40px', height:'100%', display:'flex', flexDirection:'column', justifyContent:'center', color:'#fff' }}>
        <div style={{ ...V.eyebrow, color:'#fff', marginBottom:14 }}>Belmont, CA · Since 2008 · 7U–12U</div>
        <h1 style={hoSt.display({ fontSize:80, color:'#fff' })}>Welcome, <span style={{ color:'var(--bb-red-bright)' }}>Blasters.</span></h1>
        <p style={{ fontSize:18, color:'rgba(255,255,255,0.78)', margin:'16px 0 0', maxWidth:560 }}>Everything you need for the 2026 season — pick a lane.</p>
      </div>
      <div style={{ position:'absolute', bottom:0, left:0, right:0, height:8, background:'var(--bb-red)' }}></div>
    </section>
    {/* quick-action tiles */}
    <section style={{ maxWidth:1200, margin:'0 auto', padding:'48px 40px 0' }}>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:18 }}>
        {TILES.map((tile,i)=>(
          <div key={i} onClick={()=>goHO(tile.route)} style={{ cursor:'pointer', background:'#fff', border:'1px solid var(--border-1)', borderTop:`6px solid ${tile.tone==='red'?'var(--bb-red)':'var(--bb-navy)'}`, borderRadius:14, padding:'28px 28px 30px', boxShadow:'var(--shadow-sm)', display:'flex', flexDirection:'column', minHeight:170 }}>
            <div style={{ ...V.eyebrow, color: tile.tone==='red'?'var(--bb-red)':'var(--bb-navy)' }}>{tile.k}</div>
            <div style={{ fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:900, fontSize:34, textTransform:'uppercase', color:'var(--bb-navy)', margin:'10px 0 8px', lineHeight:0.96 }}>{tile.t}</div>
            <p style={{ fontSize:15, lineHeight:1.55, color:'var(--fg-2)', margin:0 }}>{tile.d}</p>
            <span style={{ fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:800, fontSize:13, letterSpacing:'0.06em', textTransform:'uppercase', color:'var(--bb-red)', marginTop:'auto', paddingTop:18 }}>Go →</span>
          </div>
        ))}
      </div>
    </section>
    {/* KPI mini row */}
    <section style={{ maxWidth:1200, margin:'0 auto', padding:'28px 40px 0' }}>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:18 }}>
        {data.kpis.map((k,i)=>(
          <div key={i} style={{ background:'var(--bb-navy)', color:'#fff', borderRadius:12, padding:'22px 18px', textAlign:'center' }}>
            <div style={{ fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:900, fontSize:42, lineHeight:1 }}>{k.value}</div>
            <div style={{ ...hoSt.mono, fontSize:11, letterSpacing:'0.12em', textTransform:'uppercase', color:'var(--bb-red-bright)', marginTop:8 }}>{k.label}</div>
          </div>
        ))}
      </div>
    </section>
    <CoopReal />
    <HONews news={data.news} />
    <HOBrand /><HOFoot />
  </div>
);

Object.assign(window, { HomeScoreboard, HomeEditorial, HomeDashboard, CoopReal, CHAMPS, TRYOUTS, goHO });