/* Show detail: hero backdrop, synopsis, actions, episode grid. */
const { Button, Badge, ShowCard } = window.NashvillePBSDesignSystem_8fe663;

function DetailPage({ id, onOpen, onBack }) {
  const s = findShow(id) || SHOWS[0];
  const more = SHOWS.filter(x => x.cat === s.cat && x.id !== s.id).slice(0,4);
  const episodes = [1,2,3,4].map(n => ({ n, title:`Episode ${n}`, meta:`S${s.meta.includes('S')?s.meta.match(/S(\d+)/)?.[1]||1:1} \u00b7 E${n}`, seed:`${s.seed}${n}` }));
  return (
    <div>
      <section style={{ position:'relative', color:'#fff' }}>
        <div style={{ position:'relative', height:420, overflow:'hidden' }}>
          <img src={img(s.seed+'hero')} alt="" style={{ width:'100%', height:'100%', objectFit:'cover' }} />
          <div style={{ position:'absolute', inset:0, background:'linear-gradient(0deg,var(--navy-blue) 4%,rgba(10,20,90,.55) 55%,rgba(10,20,90,.25) 100%)' }} />
          <div style={{ position:'absolute', inset:0 }}>
            <div style={{ maxWidth:1240, margin:'0 auto', padding:'0 24px', height:'100%', display:'flex', flexDirection:'column', justifyContent:'flex-end', paddingBottom:36 }}>
              <button onClick={onBack} style={{ position:'absolute', top:24, left:24, display:'inline-flex', alignItems:'center', gap:8,
                background:'rgba(255,255,255,.14)', color:'#fff', border:'none', borderRadius:999, padding:'9px 16px',
                fontFamily:'inherit', fontWeight:600, fontSize:'.875rem', cursor:'pointer' }}>
                <Icon name="arrowL" /> Back</button>
              <div style={{ display:'flex', gap:10, marginBottom:12 }}>
                {s.badge && <Badge tone="coral">{s.badge}</Badge>}
                <Badge tone="teal">{s.cat}</Badge>
              </div>
              <h1 style={{ margin:'0 0 12px', fontSize:'3rem', fontWeight:800, lineHeight:1.03, letterSpacing:'-.02em', maxWidth:720 }}>{s.title}</h1>
              <p style={{ margin:'0 0 20px', fontSize:'1.0625rem', lineHeight:1.5, color:'rgba(255,255,255,.88)', maxWidth:620 }}>{s.desc}</p>
              <div style={{ display:'flex', gap:12, alignItems:'center' }}>
                <Button variant="primary" iconLeft={<Icon name="play" />}>Play</Button>
                <Button variant="inverse" iconLeft={<Icon name="plus" />}>My List</Button>
                <span style={{ marginLeft:6, color:'rgba(255,255,255,.75)', fontSize:'.9375rem' }}>{s.meta} &middot; {s.duration}</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section style={{ maxWidth:1240, margin:'0 auto', padding:'0 24px', marginTop:40 }}>
        <h2 style={{ margin:'0 0 16px', fontSize:'1.375rem', fontWeight:700, color:'var(--navy-blue)' }}>Episodes</h2>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fill,minmax(260px,1fr))', gap:22 }}>
          {episodes.map(e => <ShowCard key={e.n} image={img(e.seed)} title={e.title} meta={e.meta} duration={s.duration} />)}
        </div>
      </section>

      {more.length>0 && (
        <section style={{ maxWidth:1240, margin:'0 auto', padding:'0 24px', marginTop:44, marginBottom:64 }}>
          <h2 style={{ margin:'0 0 16px', fontSize:'1.375rem', fontWeight:700, color:'var(--navy-blue)' }}>More like this</h2>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fill,minmax(260px,1fr))', gap:22 }}>
            {more.map(m => <ShowCard key={m.id} image={img(m.seed)} title={m.title} meta={m.meta} badge={m.badge} duration={m.duration} onClick={()=>onOpen(m.id)} />)}
          </div>
        </section>
      )}
    </div>
  );
}
Object.assign(window, { DetailPage });