/* Browse page: category filters + program grid. */
const { ShowCard, Tag } = window.NashvillePBSDesignSystem_8fe663;

function BrowsePage({ onOpen, query }) {
  const cats = ['All','Local','News','Nature','Arts','Kids'];
  const [cat, setCat] = React.useState('All');
  let shows = cat === 'All' ? SHOWS : SHOWS.filter(s => s.cat === cat);
  if (query) shows = shows.filter(s => s.title.toLowerCase().includes(query.toLowerCase()));
  return (
    <div style={{ maxWidth:1240, margin:'0 auto', padding:'40px 24px 64px' }}>
      <h1 style={{ margin:'0 0 6px', fontSize:'2.25rem', fontWeight:800, color:'var(--navy-blue)', letterSpacing:'-.02em' }}>
        {query ? `Results for \u201c${query}\u201d` : 'Browse all programs'}</h1>
      <p style={{ margin:'0 0 22px', color:'var(--text-muted)', fontSize:'1rem' }}>
        {shows.length} program{shows.length!==1?'s':''} &middot; free to stream</p>
      <div style={{ display:'flex', gap:10, flexWrap:'wrap', marginBottom:28 }}>
        {cats.map(c => <Tag key={c} active={cat===c} onClick={()=>setCat(c)}>{c}</Tag>)}
      </div>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fill,minmax(260px,1fr))', gap:22 }}>
        {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>
      {shows.length===0 && <p style={{ color:'var(--text-muted)', marginTop:40 }}>No programs match your search.</p>}
    </div>
  );
}
Object.assign(window, { BrowsePage });