// =====================================================================
// HOMEPAGE — OPTION 2 "EDITORIAL" · 2 refined variations
//   2A "Heritage"   — leads with the 2008 / Little-League story + proof
//   2B "Cooperstown"— leads with the dream + a tryouts call-to-action
// Both: refined full-bleed photo hero with art-direction captions,
// reworked messaging + section order, real Blasters content.
// Shared blocks + CoopReal/CHAMPS/TRYOUTS come from HomeVariations.jsx
// and home-options.jsx (on window).
// =====================================================================
const { hv: E, BNav: ENav, TeamsBlock: ETeams, NewsBlock: ENews, BrandBar: EBrand, FooterBlock: EFoot, CoopReal: ECoop } = window;
const ECHAMPS = window.CHAMPS, ETRYOUTS = window.TRYOUTS, eGo = window.goHO;

const edSt = {
  display: (s) => ({ fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:900, lineHeight:0.82, letterSpacing:'-0.02em', textTransform:'uppercase', margin:0, ...s }),
  mono: { fontFamily:"'JetBrains Mono', monospace" },
  cap: { fontFamily:"'JetBrains Mono', monospace", fontSize:11, letterSpacing:'0.14em', textTransform:'uppercase', color:'var(--fg-3)' },
  sectionTitle: { fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:900, fontSize:54, lineHeight:0.9, textTransform:'uppercase', color:'var(--bb-navy)', margin:'8px 0 0' },
  wrap: { maxWidth:1180, margin:'0 auto', padding:'0 40px' },
};

// ---- refined full-bleed hero with art-direction caption ----
function EditorialHero({ eyebrow, line1, line2, lead, primary, secondary, caption }) {
  return (
    <section style={{ position:'relative', height:700, overflow:'hidden', background:'#1a2440' }}>
      <image-slot id="en-hero" src="assets/photos/hero.jpg" shape="rect" placeholder="Drop your team hero photo" style={{ position:'absolute', inset:0, width:'100%', height:'100%', display:'block' }}></image-slot>
      {/* top scrim for nav legibility + bottom scrim for text */}
      <div style={{ position:'absolute', inset:0, background:'linear-gradient(180deg, rgba(15,22,46,0.62) 0%, rgba(15,22,46,0.44) 42%, rgba(15,22,46,0.70) 76%, rgba(15,22,46,0.94) 100%)', pointerEvents:'none' }}></div>
      <div style={{ position:'absolute', left:0, right:0, bottom:80, ...edSt.wrap, pointerEvents:'none' }}>
        <div style={{ ...E.eyebrow, color:'#fff', marginBottom:18 }}>{eyebrow}</div>
        <h1 style={edSt.display({ fontSize:124, color:'#fff', textShadow:'0 4px 30px rgba(0,0,0,0.45)' })}>{line1}<br/><span style={{ color:'var(--bb-red)' }}>{line2}</span></h1>
        {lead && <p style={{ fontSize:20, lineHeight:1.55, color:'rgba(255,255,255,0.88)', maxWidth:540, margin:'24px 0 0' }}>{lead}</p>}
        <div style={{ display:'flex', gap:14, marginTop:30, flexWrap:'wrap', pointerEvents:'auto' }}>
          <button style={E.btnRed} onClick={()=>eGo(primary[1])}>{primary[0]}</button>
          {secondary && <button style={E.btnGhostLight} onClick={()=>eGo(secondary[1])}>{secondary[0]}</button>}
        </div>
      </div>
      {/* art-direction caption chip */}
      <div style={{ position:'absolute', right:24, bottom:24, ...edSt.mono, fontSize:11, letterSpacing:'0.12em', textTransform:'uppercase', color:'rgba(255,255,255,0.72)', background:'rgba(0,0,0,0.35)', backdropFilter:'blur(4px)', padding:'7px 12px', borderRadius:6, pointerEvents:'none' }}>◎ {caption}</div>
      <div style={{ position:'absolute', bottom:0, left:0, right:0, height:8, background:'var(--bb-red)', pointerEvents:'none' }}></div>
    </section>
  );
}

// ---- big editorial standfirst lead ----
function Standfirst({ kicker, center, children }) {
  return (
    <section style={{ ...edSt.wrap, padding:'84px 40px 0', maxWidth:1520, textAlign: center?'center':'left' }}>
      {kicker && <div style={{ ...edSt.cap, color:'var(--bb-red)', marginBottom:18 }}>{kicker}</div>}
      <p style={{ fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:700, fontSize:46, lineHeight:1.1, letterSpacing:'0.01em', color:'var(--bb-navy)', margin:0, textWrap:'balance' }}>{children}</p>
    </section>
  );
}

// ---- thin stat row (editorial, hairline dividers) ----
function StatRow({ items }) {
  return (
    <section style={{ ...edSt.wrap, padding:'48px 40px 96px' }}>
      <div style={{ display:'grid', gridTemplateColumns:`repeat(${items.length},1fr)`, borderTop:'2px solid var(--bb-navy)' }}>
        {items.map(([v,l],i)=>(
          <div key={i} style={{ padding:'24px 8px 0', borderRight: i<items.length-1?'1px solid var(--border-1)':'none' }}>
            <div style={{ fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:900, fontSize:46, lineHeight:1, color:'var(--bb-navy)' }}>{v}</div>
            <div style={{ ...edSt.cap, marginTop:8 }}>{l}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ---- club story band (photo + text + captioned) ----
function StoryBand({ flip }) {
  const text = (
    <div>
      <div style={{ ...E.eyebrow, color:'#fff' }}>Our Story</div>
      <h2 style={{ ...edSt.sectionTitle, color:'#fff' }}>Built the<br/>Right Way.</h2>
      <p style={{ fontSize:18, lineHeight:1.7, color:'rgba(255,255,255,0.92)', margin:'22px 0 16px' }}>The Blasters started in 2008 with one purpose: 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:18, lineHeight:1.7, color:'rgba(255,255,255,0.92)', margin:0 }}>It's a formula Little League itself has cited as an ideal model for how leagues and tournament programs work together to give every kid the best experience.</p>
    </div>
  );
  const photo = (
    <div>
      <div style={{ height:460, borderRadius:16, overflow:'hidden', boxShadow:'0 14px 36px -10px rgba(0,0,0,0.4)', border:'1px solid rgba(255,255,255,0.25)' }}>
        <image-slot id="en-story" src="assets/photos/story.jpg" shape="rect" placeholder="Club / dugout photo" style={{ width:'100%', height:'100%', display:'block' }}></image-slot>
      </div>
      <div style={{ ...edSt.cap, color:'rgba(255,255,255,0.75)', marginTop:12 }}>◎ Team huddle · Belmont Sports Complex</div>
    </div>
  );
  return (
    <section style={{ background:'var(--bb-red)', color:'#fff' }}>
      <div style={{ ...edSt.wrap, padding:'84px 40px' }}>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:64, alignItems:'center' }}>
          {flip ? <>{photo}{text}</> : <>{text}{photo}</>}
        </div>
      </div>
    </section>
  );
}

// ---- recent hardware / championships strip ----
function HardwareStrip() {
  return (
    <section style={{ ...edSt.wrap, padding:'84px 40px 88px' }}>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-end', marginBottom:30 }}>
        <div><div style={E.eyebrow}>Recent Hardware</div><h2 style={edSt.sectionTitle}>Proven on the Diamond.</h2></div>
        <button style={E.btnNavyOutline} onClick={()=>eGo('about')}>Championship Timeline →</button>
      </div>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:16 }}>
        {ECHAMPS.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={{ ...edSt.cap, marginTop:6, letterSpacing:'0.06em' }}>{c[1]} · {c[0]}</div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ---- tryouts call-to-action band (real dates) ----
function TryoutBand() {
  return (
    <section style={{ background:'var(--bb-navy)', color:'#fff' }}>
      <div style={{ ...edSt.wrap, padding:'72px 40px', display:'grid', gridTemplateColumns:'0.9fr 1.1fr', gap:56, alignItems:'center' }}>
        <div>
          <div style={{ ...E.eyebrow, color:'var(--bb-red-bright)' }}>Join the 2026 Blasters</div>
          <h2 style={edSt.display({ fontSize:64, color:'#fff', margin:'14px 0 18px' })}>Tryouts<br/>Are Open.</h2>
          <p style={{ fontSize:18, lineHeight:1.6, color:'rgba(255,255,255,0.8)', maxWidth:380, margin:'0 0 26px' }}>7U sessions kick off the season. Register through TeamSnap and come show us what you've got.</p>
          <a href="https://go.teamsnap.com/forms/512507" target="_blank" rel="noopener noreferrer" style={{ ...E.btnRed, display:'inline-flex', alignItems:'center', textDecoration:'none', boxSizing:'border-box' }}>Register via TeamSnap ▸</a>
        </div>
        <div style={{ background:'#0f1a38', border:'1px solid rgba(255,255,255,0.12)', borderRadius:16, overflow:'hidden' }}>
          {ETRYOUTS.map((r,i)=>(
            <div key={i} style={{ display:'flex', alignItems:'center', gap:18, padding:'20px 26px', borderBottom: i<ETRYOUTS.length-1?'1px solid rgba(255,255,255,0.08)':'none' }}>
              <div style={{ fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:900, fontSize:32, color:'var(--bb-red-bright)', width:52 }}>{r[0]}</div>
              <div style={{ flex:1 }}>
                <div style={{ color:'#fff', fontWeight:700, fontSize:17 }}>{r[1]}</div>
                <div style={{ ...edSt.mono, fontSize:12, color:'rgba(255,255,255,0.6)', marginTop:4, letterSpacing:'0.04em' }}>{r[2]} · {r[3]}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// =====================================================================
// 2A — HERITAGE: story + proof first, Cooperstown as the payoff
// =====================================================================
function InstagramBand() {
  return (
    <section style={{ background:'var(--bb-navy)', color:'#fff' }}>
      <div style={{ ...edSt.wrap, maxWidth:1180, padding:'56px 40px', display:'flex', alignItems:'center', justifyContent:'space-between', gap:36, flexWrap:'wrap' }}>
        <div style={{ flex:'1 1 360px' }}>
          <div style={{ ...E.eyebrow, color:'var(--bb-red-bright)', marginBottom:12 }}>Follow Along</div>
          <h2 style={edSt.display({ fontSize:60, color:'#fff' })}>We’re on<br/>Instagram.</h2>
          <p style={{ fontSize:18, lineHeight:1.6, color:'rgba(255,255,255,0.82)', margin:'18px 0 0', maxWidth:460 }}>Follow <span style={{ color:'#fff', fontWeight:700 }}>@belmontblastersbaseballclub</span> for game-day highlights, walk-offs, tryout reminders, and the road to Cooperstown.</p>
        </div>
        <a href="https://www.instagram.com/belmontblastersbaseballclub/" target="_blank" rel="noopener noreferrer" style={{ ...E.btnRed, display:'inline-flex', alignItems:'center', gap:12, height:60, padding:'0 34px', fontSize:19, textDecoration:'none', boxSizing:'border-box', flexShrink:0 }}>Follow on Instagram ▸</a>
      </div>
    </section>
  );
}

const EditorialHeritage = ({ data }) => (
  <div style={E.root}>
    <ENav />
    <EditorialHero
      eyebrow="Belmont, California · Established 2008"
      line1="Built in" line2="Belmont."
      lead="Belmont's home for summer travel baseball, 7U–12U — the next step for kids who've outgrown the rec field but never the game."
      primary={['Register for Tryouts ▸','tryouts']} secondary={['Our Story','about']}
      caption="12U Blue" />
    <Standfirst kicker="Since 2008" center={true}>
      For more than fifteen years the Blasters have built ballplayers the right way — and built one of District 52's strongest Little Leagues right alongside them.
    </Standfirst>
    <StatRow items={[['2008','Established'],['7U–12U','Age Range'],['5','Active Squads'],['10+','Tournament Titles']]} />
    <StoryBand />
    <HardwareStrip />
    <ETeams teams={data.teams} />
    <ENews news={data.news} />
    <ECoop />
    <InstagramBand />
    <EBrand /><EFoot />
  </div>
);

// =====================================================================
// 2B — COOPERSTOWN: the dream first, tryouts CTA, story as support
// =====================================================================
const EditorialCooperstown = ({ data }) => (
  <div style={E.root}>
    <ENav />
    <EditorialHero
      eyebrow="★ Cooperstown 2026 · 12U Blue"
      line1="The Road to" line2="Cooperstown."
      lead="Every summer a few twelve-year-olds from Belmont chase the same dream — a week at Dreams Park, where baseball was born."
      primary={['Back the Trip ▸','cooperstown']} secondary={['Register for Tryouts','tryouts']}
      caption="Dreams Park · add Cooperstown photo →" />
    <Standfirst kicker="The Dream">
      Eight games in a week, opening ceremonies under the lights, pin trading with teams from all fifty states. For our 12U Blue squad, it's the trip they've pointed at since T-ball.
    </Standfirst>
    <div style={{ marginTop:84 }}><ECoop /></div>
    <TryoutBand />
    <StoryBand flip={true} />
    <ETeams teams={data.teams} />
    <ENews news={data.news} />
    <EBrand /><EFoot />
  </div>
);

Object.assign(window, { EditorialHeritage, EditorialCooperstown });