/* Home page: featured hero, content rows, membership band. */
const { Button, Badge, ShowCard, PatternPanel } = window.NashvillePBSDesignSystem_8fe663;

function Row({ title, shows, onOpen }) {
  const ref = React.useRef(null);
  const scroll = (d) => ref.current && ref.current.scrollBy({ left: d*640, behavior:'smooth' });
  return (
    <section style={{ maxWidth:1240, margin:'0 auto', padding:'0 24px', marginTop:44 }}>
      <div style={{ display:'flex', alignItems:'center', marginBottom:14 }}>
        <h2 style={{ margin:0, fontSize:'1.375rem', fontWeight:700, color:'var(--navy-blue)' }}>{title}</h2>
        <div style={{ flex:1 }} />
        <div style={{ display:'flex', gap:6 }}>
          <button onClick={()=>scroll(-1)} style={arrowBtn}><Icon name="chevL" /></button>
          <button onClick={()=>scroll(1)} style={arrowBtn}><Icon name="chevR" /></button>
        </div>
      </div>
      <div ref={ref} style={{ display:'grid', gridAutoFlow:'column', gridAutoColumns:'300px', gap:18,
        overflowX:'auto', paddingBottom:6, scrollbarWidth:'none' }}>
        {shows.map(s => (
          <ShowCard key={s.id} image={img(s.seed)} title={s.title} meta={s.meta} badge={s.badge}
            duration={s.duration} progress={s.progress || undefined} onClick={()=>onOpen(s.id)} />
        ))}
      </div>
    </section>
  );
}
const arrowBtn = { width:36, height:36, borderRadius:999, border:'1px solid var(--border)', background:'#fff',
  color:'var(--navy-blue)', cursor:'pointer', display:'inline-flex', alignItems:'center', justifyContent:'center' };

function HomePage({ onOpen }) {
  const feat = findShow('masterpiece');
  return (
    <div>
      {/* Hero */}
      <section style={{ position:'relative', color:'#fff' }}>
        <div style={{ position:'relative', height:460, overflow:'hidden' }}>
          <img src={ASSETS.hero || img('herostage13')} alt="" style={{ width:'100%', height:'100%', objectFit:'cover', objectPosition:'center 40%' }} />
          <div style={{ position:'absolute', inset:0, background:'linear-gradient(90deg,rgba(10,20,90,.92) 0%,rgba(10,20,90,.72) 42%,rgba(10,20,90,.15) 100%)' }} />
          <div style={{ position:'absolute', inset:0 }}>
            <div style={{ maxWidth:1240, margin:'0 auto', padding:'0 24px', height:'100%', display:'flex',
              flexDirection:'column', justifyContent:'center', maxWidth:640 }}>
              <div><Badge tone="coral">Premieres Sunday</Badge></div>
              <h1 style={{ margin:'14px 0 12px', fontSize:'3.25rem', fontWeight:800, lineHeight:1.03, letterSpacing:'-.02em' }}>
                Masterpiece: Riverside</h1>
              <p style={{ margin:'0 0 22px', fontSize:'1.125rem', lineHeight:1.5, color:'rgba(255,255,255,.86)', maxWidth:520 }}>
                A sweeping new period drama returns for its most dramatic season yet, free to stream on the PBS app.</p>
              <div style={{ display:'flex', gap:12 }}>
                <Button variant="primary" iconLeft={<Icon name="play" />} onClick={()=>onOpen('masterpiece')}>Start Watching</Button>
                <Button variant="inverse" iconLeft={<Icon name="plus" />}>My List</Button>
              </div>
            </div>
          </div>
        </div>
      </section>

      <Row title="Continue Watching" shows={SHOWS.filter(s=>s.progress)} onOpen={onOpen} />
      <Row title="Featured Programs" shows={[findShow('nature'),findShow('masterpiece'),findShow('antiques'),findShow('nova'),findShow('frontline')]} onOpen={onOpen} />
      <Row title="Local & Regional" shows={byCat('Local')} onOpen={onOpen} />
      <Row title="For Kids" shows={byCat('Kids').concat(findShow('nature'))} onOpen={onOpen} />

      {/* Membership band */}
      <section style={{ marginTop:56 }}>
        <PatternPanel pattern="community" overlay="brand"
          style={{ padding:'56px 24px', background: patternBg(ASSETS.community, OVERLAY_BRAND) }}>
          <div style={{ maxWidth:1240, margin:'0 auto', display:'flex', alignItems:'center', gap:32, flexWrap:'wrap' }}>
            <div style={{ flex:'1 1 420px' }}>
              <div style={{ fontSize:'.6875rem', fontWeight:700, letterSpacing:'.08em', textTransform:'uppercase', color:'var(--teal)' }}>Support public media</div>
              <h2 style={{ margin:'10px 0 10px', fontSize:'2.5rem', fontWeight:800, lineHeight:1.05, letterSpacing:'-.02em' }}>
                Bring the world a little closer</h2>
              <p style={{ margin:0, fontSize:'1.0625rem', lineHeight:1.5, color:'rgba(255,255,255,.88)', maxWidth:560 }}>
                Nashville PBS is a nonprofit powered by local donors. Your membership keeps trusted, educational
                programming free for all of Middle Tennessee.</p>
            </div>
            <div style={{ display:'flex', gap:12 }}>
              <Button variant="inverse" size="lg">Become a Member</Button>
            </div>
          </div>
        </PatternPanel>
      </section>
    </div>
  );
}
Object.assign(window, { HomePage, Row });