/* On The Limit — website mockup: shared page header + generic Program page. */
function PageHero({ tag, title, tagline, colors }) {
  const D = window.OTL_DATA;
  return (
    <section style={{ position:'relative', overflow:'hidden', background:'var(--surface-deep)', borderBottom:'1px solid var(--border-subtle)' }}>
      <div aria-hidden="true" style={{ position:'absolute', inset:0, background:D.gradient(colors[0], colors[1]) }}/>
      <div className="otl-glow" aria-hidden="true" style={{ top:'-30%', right:'6%' }}/>
      <div aria-hidden="true" style={{ position:'absolute', inset:0, backgroundImage:'linear-gradient(90deg, rgba(13,13,13,0.92) 0%, rgba(13,13,13,0.55) 60%, rgba(13,13,13,0.2) 100%)' }}/>
      <div style={{ position:'relative', maxWidth:1200, margin:'0 auto', padding:'92px 24px 76px', display:'flex', flexDirection:'column', gap:18 }}>
        {tag && <div><span style={{ fontFamily:'var(--font-display)', fontSize:12, fontWeight:700, letterSpacing:'0.16em', textTransform:'uppercase', color:'var(--accent)' }}>{tag}</span></div>}
        <h1 style={{ margin:0, fontFamily:'var(--font-display)', fontWeight:800, textTransform:'uppercase', letterSpacing:'-0.02em', lineHeight:0.98, fontSize:'clamp(40px,5.5vw,66px)', color:'#fff', maxWidth:780 }}>{title}</h1>
        {tagline && <p style={{ margin:0, fontFamily:'var(--font-body)', fontSize:20, color:'var(--fog-300)', maxWidth:560 }}>{tagline}</p>}
      </div>
    </section>
  );
}
window.OTL_PageHero = PageHero;

function ProgramPage({ slug }) {
  const { Button, Stat } = window.DesignSystem_494066;
  const D = window.OTL_DATA;
  const go = window.OTL_go;
  const p = D.programs[slug];
  if (!p) return null;

  return (
    <div>
      <PageHero tag={p.tag} title={p.title} tagline={p.tagline} colors={p.hero} />

      {/* Intro + meta */}
      <section style={{ background:'var(--surface-base)' }}>
        <div style={{ maxWidth:1200, margin:'0 auto', padding:'80px 24px', display:'grid', gridTemplateColumns:'1.4fr 1fr', gap:64, alignItems:'start' }}>
          <div style={{ display:'flex', flexDirection:'column', gap:24 }}>
            <p style={{ margin:0, fontFamily:'var(--font-body)', fontSize:19, lineHeight:1.65, color:'var(--text-primary)' }}>{p.intro}</p>
            <div style={{ padding:'18px 22px', background:'var(--mint-tint)', border:'1px solid rgba(114,221,158,0.3)', borderRadius:'var(--radius-md)' }}>
              <span style={{ fontFamily:'var(--font-display)', fontSize:11, fontWeight:700, letterSpacing:'0.14em', textTransform:'uppercase', color:'var(--accent)' }}>Who it's for</span>
              <p style={{ margin:'8px 0 0', fontFamily:'var(--font-body)', fontSize:16, lineHeight:1.55, color:'var(--fog-200)' }}>{p.forWho}</p>
            </div>
            <div style={{ display:'flex', gap:14, flexWrap:'wrap', marginTop:4 }}>
              <Button variant="primary" size="lg" onClick={()=>go('join')}>Join Now</Button>
              <Button variant="secondary" size="lg" onClick={()=>go('timetable')}>See Timetable</Button>
            </div>
          </div>
          <div style={{ display:'flex', flexDirection:'column', gap:24, background:'var(--surface-card)', border:'1px solid var(--border-subtle)', borderRadius:'var(--radius-md)', padding:32 }}>
            <span style={{ fontFamily:'var(--font-display)', fontSize:11, fontWeight:700, letterSpacing:'0.14em', textTransform:'uppercase', color:'var(--text-muted)' }}>At a glance</span>
            <div style={{ display:'flex', flexDirection:'column', gap:22 }}>
              {p.meta.map(([v,l]) => (
                <div key={l} style={{ display:'flex', alignItems:'baseline', gap:16, borderBottom:'1px solid var(--border-subtle)', paddingBottom:16 }}>
                  <span style={{ fontFamily:'var(--font-display)', fontWeight:800, fontSize:32, color:'var(--accent)', minWidth:72 }}>{v}</span>
                  <span style={{ fontFamily:'var(--font-display)', fontSize:12, fontWeight:700, letterSpacing:'0.12em', textTransform:'uppercase', color:'var(--text-muted)' }}>{l}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* What to expect */}
      <section style={{ background:'var(--surface-deep)', borderTop:'1px solid var(--border-subtle)' }}>
        <div style={{ maxWidth:1200, margin:'0 auto', padding:'88px 24px' }}>
          <h2 style={{ margin:'0 0 40px', fontFamily:'var(--font-display)', fontWeight:800, textTransform:'uppercase', letterSpacing:'-0.015em', fontSize:34, color:'#fff' }}>What to <span style={{ color:'var(--accent)' }}>expect</span></h2>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:20 }}>
            {p.points.map(([t,b],i) => (
              <div key={t} style={{ background:'var(--surface-card)', border:'1px solid var(--border-subtle)', borderRadius:'var(--radius-md)', padding:28, display:'flex', flexDirection:'column', gap:12 }}>
                <span style={{ fontFamily:'var(--font-display)', fontWeight:800, fontSize:28, color:'var(--accent)' }}>0{i+1}</span>
                <h3 style={{ margin:0, fontFamily:'var(--font-display)', fontWeight:800, textTransform:'uppercase', fontSize:18, color:'#fff' }}>{t}</h3>
                <p style={{ margin:0, fontFamily:'var(--font-body)', fontSize:15, lineHeight:1.6, color:'var(--text-muted)' }}>{b}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}
window.OTL_ProgramPage = ProgramPage;