// =====================================================================
// PAGE LAYOUTS — ACTION (Tryouts, Shop, Contact) · 2 options each
// =====================================================================
const { hv: G, BNav: Nv, FooterBlock: Ft, BrandBar: Br, PageHead: Hd } = window;

const paSt = {
  wrap: { maxWidth:1200, margin:'0 auto', padding:'56px 40px 80px' },
  blockHd: { fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:900, fontSize:30, textTransform:'uppercase', color:'var(--bb-navy)', margin:'0 0 18px' },
  field: { width:'100%', height:48, padding:'0 16px', borderRadius:8, border:'1.5px solid var(--border-1)', background:'#fff', fontFamily:"'Inter Tight', sans-serif", fontSize:15, color:'var(--bb-ink)', boxSizing:'border-box', marginBottom:14 },
  label: { fontFamily:"'JetBrains Mono', monospace", fontSize:12, letterSpacing:'0.1em', textTransform:'uppercase', color:'var(--fg-3)', marginBottom:6, display:'block' },
  card: { background:'#fff', border:'1px solid var(--border-1)', borderRadius:12, boxShadow:'var(--shadow-sm)' },
  excerpt: { fontSize:15, lineHeight:1.6, color:'var(--fg-2)', margin:0 },
};

// ---------- TRYOUTS ----------
const TryoutsForm = ({ data }) => (
  <div style={G.root}>
    <Nv />
    <Hd eyebrow="2026 Season" title="Tryouts & Registration" sub="7U registration is open — sessions May 31, June 1 & 2 at the Belmont Sports Complex. Other age groups to be announced." />
    <div style={{ ...paSt.wrap, display:'grid', gridTemplateColumns:'1.1fr 0.9fr', gap:40, alignItems:'start' }}>
      <div>
        <h2 style={paSt.blockHd}>Tryout Dates</h2>
        <div style={paSt.card}>
          {[['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']].map((r,i)=>(
            <div key={i} style={{ display:'flex', alignItems:'center', gap:20, padding:'18px 24px', borderBottom: i<2?'1px solid var(--border-1)':'none' }}>
              <div style={{ fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:900, fontSize:26, color:'var(--bb-navy)', width:110 }}>{r[0]}</div>
              <div style={{ flex:1 }}><div style={{ fontWeight:700, color:'var(--bb-navy)' }}>{r[1]}</div><div style={{ fontSize:14, color:'var(--fg-2)' }}>{r[2]} · {r[3]}</div></div>
              <a href={data.tryoutForm} target="_blank" rel="noopener noreferrer" style={{ fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:800, fontSize:13, letterSpacing:'0.06em', textTransform:'uppercase', color:'var(--bb-red)', cursor:'pointer', textDecoration:'none' }}>Register →</a>
            </div>
          ))}
        </div>
        <h2 style={{ ...paSt.blockHd, marginTop:40 }}>What to Bring</h2>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:12 }}>
          {['Glove, bat & helmet','Cleats + running shoes','Water & sunscreen','Completed registration'].map((x,i)=>(
            <div key={i} style={{ display:'flex', alignItems:'center', gap:12, ...paSt.card, padding:'16px 18px' }}><span style={{ width:26, height:26, borderRadius:'50%', background:'var(--bb-red)', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontWeight:900, fontSize:14, flexShrink:0 }}>{i+1}</span><span style={{ color:'var(--bb-navy)', fontWeight:600 }}>{x}</span></div>
          ))}
        </div>
      </div>
      {/* register card */}
      <div style={{ position:'sticky', top:90 }}>
        <div style={{ background:'var(--bb-navy)', color:'#fff', borderRadius:14, padding:'32px' }}>
          <div style={{ ...G.eyebrow, color:'var(--bb-red-bright)', marginBottom:12 }}>Register Now</div>
          <h2 style={{ fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:900, fontSize:40, lineHeight:0.9, textTransform:'uppercase', margin:'0 0 14px', color:'#fff' }}>Claim Your Spot</h2>
          <p style={{ fontSize:15, lineHeight:1.6, color:'rgba(255,255,255,0.8)', margin:'0 0 22px' }}>Registration runs through TeamSnap — pick your player's age group and reserve a tryout slot in a couple of minutes.</p>
          <a href={data.tryoutForm} target="_blank" rel="noopener noreferrer" style={{ ...G.btnRed, width:'100%', display:'flex', alignItems:'center', justifyContent:'center', textDecoration:'none', boxSizing:'border-box' }}>Register via TeamSnap ▸</a>
        </div>
      </div>
    </div>
    <Br /><Ft />
  </div>
);

const TryoutsSteps = ({ data }) => (
  <div style={G.root}>
    <Nv />
    <Hd eyebrow="2026 Season" title="How Tryouts Work" sub="Four simple steps from sign-up to first practice." />
    <div style={paSt.wrap}>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:18, marginBottom:48 }}>
        {[['Register','Sign up through TeamSnap and pick your age group.'],['Evaluate','Come to your tryout — hitting, fielding, throwing, running.'],['Match','We place each player on the right squad for their level.'],['Play','Welcome to the Blasters. First practice the next week.']].map(([t,d],i)=>(
          <div key={i} style={{ ...paSt.card, padding:'26px 24px', borderTop:'5px solid var(--bb-red)' }}>
            <div style={{ fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:900, fontSize:48, color:'var(--bb-navy)', lineHeight:0.9 }}>{String(i+1).padStart(2,'0')}</div>
            <div style={{ fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:800, fontSize:24, textTransform:'uppercase', color:'var(--bb-navy)', margin:'10px 0 8px' }}>{t}</div>
            <p style={paSt.excerpt}>{d}</p>
          </div>
        ))}
      </div>
      <div style={{ display:'grid', gridTemplateColumns:'1.2fr 0.8fr', gap:28, alignItems:'center', background:'var(--bb-navy)', borderRadius:14, overflow:'hidden' }}>
        <div style={{ padding:'40px 44px', color:'#fff' }}>
          <div style={{ ...G.eyebrow, color:'var(--bb-red-bright)', marginBottom:12 }}>Tryout Weekend · Aug 17–18</div>
          <h2 style={{ fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:900, fontSize:48, lineHeight:0.88, textTransform:'uppercase', margin:'0 0 18px', color:'#fff' }}>Ready to be<br/>a Blaster?</h2>
          <button style={G.btnRed}>Register via TeamSnap ▸</button>
        </div>
        <div style={{ position:'relative', minHeight:240 }}><image-slot id="tryout-photo" shape="rect" placeholder="Tryouts photo" style={{ position:'absolute', inset:0, width:'100%', height:'100%', display:'block' }}></image-slot></div>
      </div>
    </div>
    <Br /><Ft />
  </div>
);

// ---------- SHOP ----------
function ProductCard({ p, i }) {
  return (
    <div style={paSt.card}>
      <div style={{ position:'relative', height:240, background:'#eceff4' }}>
        <image-slot id={`shop-${i}`} shape="rect" placeholder={p.name} style={{ position:'absolute', inset:0, width:'100%', height:'100%', display:'block' }}></image-slot>
      </div>
      <div style={{ padding:'18px 20px 22px' }}>
        <div style={{ fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:800, fontSize:22, textTransform:'uppercase', color:'var(--bb-navy)', lineHeight:1 }}>{p.name}</div>
        <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginTop:12 }}>
          <span style={{ fontFamily:"'JetBrains Mono', monospace", fontWeight:600, fontSize:18, color:'var(--bb-red)' }}>{p.price}</span>
          <button style={{ background:'var(--bb-navy)', color:'#fff', border:0, height:38, padding:'0 16px', borderRadius:8, fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:800, fontSize:13, letterSpacing:'0.05em', textTransform:'uppercase', cursor:'pointer' }}>Add</button>
        </div>
      </div>
    </div>
  );
}
const ShopGrid = ({ data }) => (
  <div style={G.root}>
    <Nv />
    <Hd eyebrow="Team Store" title="Blasters Shop" sub="Official gear for players and families. Fulfilled via blasters.itemorder.com." />
    <div style={paSt.wrap}>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:20 }}>
        {data.products.map((p,i)=><ProductCard key={i} p={p} i={i} />)}
      </div>
    </div>
    <Br /><Ft />
  </div>
);

const ShopFeatured = ({ data }) => (
  <div style={G.root}>
    <Nv />
    <Hd eyebrow="Team Store" title="Blasters Shop" sub="New drops and team essentials." />
    <div style={paSt.wrap}>
      {/* featured banner */}
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', background:'var(--bb-navy)', borderRadius:14, overflow:'hidden', marginBottom:32 }}>
        <div style={{ padding:'48px 48px', color:'#fff', display:'flex', flexDirection:'column', justifyContent:'center' }}>
          <div style={{ ...G.eyebrow, color:'var(--bb-red-bright)', marginBottom:12 }}>New Drop</div>
          <h2 style={{ fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:900, fontSize:52, lineHeight:0.86, textTransform:'uppercase', margin:'0 0 14px', color:'#fff' }}>2026 Game<br/>Day Hoodie</h2>
          <p style={{ fontSize:16, color:'rgba(255,255,255,0.75)', margin:'0 0 22px', maxWidth:340 }}>Heavyweight navy fleece with the full chest wordmark. Built for cold dugouts.</p>
          <div style={{ display:'flex', alignItems:'center', gap:18 }}><span style={{ fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:900, fontSize:34 }}>$55</span><button style={G.btnRed}>Shop Now ▸</button></div>
        </div>
        <div style={{ position:'relative', minHeight:300 }}><image-slot id="shop-feat" shape="rect" placeholder="Featured product" style={{ position:'absolute', inset:0, width:'100%', height:'100%', display:'block' }}></image-slot></div>
      </div>
      <h2 style={paSt.blockHd}>Shop All</h2>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:18 }}>
        {data.products.map((p,i)=><ProductCard key={i} p={p} i={i} />)}
      </div>
    </div>
    <Br /><Ft />
  </div>
);

// ---------- CONTACT ----------
const ContactSplit = ({ data }) => (
  <div style={G.root}>
    <Nv />
    <Hd eyebrow="Get in Touch" title="Contact Us" sub="Questions about tryouts, sponsorship, or the club? Reach out." />
    <div style={{ ...paSt.wrap, display:'grid', gridTemplateColumns:'1.2fr 0.8fr', gap:44, alignItems:'start' }}>
      <div style={{ ...paSt.card, padding:'32px 34px' }}>
        <h2 style={paSt.blockHd}>Send a Message</h2>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:14 }}>
          <div><label style={paSt.label}>Name</label><input style={paSt.field} placeholder="Your name" /></div>
          <div><label style={paSt.label}>Email</label><input style={paSt.field} placeholder="you@email.com" /></div>
        </div>
        <label style={paSt.label}>Subject</label><input style={paSt.field} placeholder="What's this about?" />
        <label style={paSt.label}>Message</label><textarea style={{ ...paSt.field, height:140, padding:'12px 16px', resize:'vertical' }} placeholder="How can we help?"></textarea>
        <button style={{ ...G.btnRed, width:'100%' }}>Send Message ▸</button>
      </div>
      <div>
        {[['Email','info@belmontblasters.org'],['Facebook','Group · Belmont Blasters'],['Instagram','@belmontblastersbaseballclub']].map(([t,e],i)=>(
          <div key={i} style={{ ...paSt.card, padding:'22px 24px', marginBottom:14 }}>
            <div style={{ ...G.eyebrow, color:'var(--bb-red)', marginBottom:8 }}>{t}</div>
            <div style={{ color:'var(--bb-navy)', fontWeight:600 }}>{e}</div>
          </div>
        ))}
        <div style={{ background:'var(--bb-navy)', color:'#fff', borderRadius:12, padding:'24px' }}>
          <div style={{ ...G.eyebrow, color:'var(--bb-red-bright)', marginBottom:10 }}>Find Us</div>
          <div style={{ fontSize:15, lineHeight:1.7, color:'rgba(255,255,255,0.85)' }}>Belmont Sports Complex<br/>Belmont, California<br/>belmontblasters.org</div>
        </div>
      </div>
    </div>
    <Br /><Ft />
  </div>
);

const ContactCards = ({ data }) => (
  <div style={G.root}>
    <Nv />
    <Hd eyebrow="Get in Touch" title="Contact Us" sub="Pick the right inbox, or send us a note below." />
    <div style={paSt.wrap}>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:18, marginBottom:40 }}>
        {[['Tryouts','New player questions & registration help.','tryouts@belmontblasters.org'],['Sponsorship','Support the club & Cooperstown trip.','sponsors@belmontblasters.org'],['General','Anything else on your mind.','info@belmontblasters.org']].map(([t,d,e],i)=>(
          <div key={i} style={{ ...paSt.card, padding:'28px 26px', borderTop:`5px solid ${i===1?'var(--bb-red)':'var(--bb-navy)'}` }}>
            <div style={{ fontFamily:"'Big Shoulders Display', sans-serif", fontWeight:900, fontSize:26, textTransform:'uppercase', color:'var(--bb-navy)', marginBottom:8 }}>{t}</div>
            <p style={{ ...paSt.excerpt, marginBottom:14 }}>{d}</p>
            <div style={{ fontFamily:"'JetBrains Mono', monospace", fontSize:13, color:'var(--bb-red)' }}>{e}</div>
          </div>
        ))}
      </div>
      <div style={{ ...paSt.card, padding:'34px 36px', maxWidth:760, margin:'0 auto' }}>
        <h2 style={{ ...paSt.blockHd, textAlign:'center' }}>Send a Message</h2>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:14 }}>
          <div><label style={paSt.label}>Name</label><input style={paSt.field} placeholder="Your name" /></div>
          <div><label style={paSt.label}>Email</label><input style={paSt.field} placeholder="you@email.com" /></div>
        </div>
        <label style={paSt.label}>Message</label><textarea style={{ ...paSt.field, height:130, padding:'12px 16px', resize:'vertical' }} placeholder="How can we help?"></textarea>
        <button style={{ ...G.btnRed, width:'100%' }}>Send Message ▸</button>
      </div>
    </div>
    <Br /><Ft />
  </div>
);

Object.assign(window, { TryoutsForm, TryoutsSteps, ShopGrid, ShopFeatured, ContactSplit, ContactCards });