/* Footer + App shell wiring the screens together. */
const { Logo } = window.NashvillePBSDesignSystem_8fe663;

function Footer() {
  const cols = [
    ['Watch', ['Shows','Schedule','Live TV','PBS KIDS']],
    ['Support', ['Donate','Become a Member','Ways to Give','Volunteer']],
    ['About', ['Our Mission','Press Room','Careers','Contact']],
  ];
  return (
    <footer style={{ background:'var(--navy-blue)', color:'rgba(255,255,255,.72)', paddingTop:48 }}>
      <div style={{ maxWidth:1240, margin:'0 auto', padding:'0 24px', display:'flex', gap:48, flexWrap:'wrap' }}>
        <div style={{ flex:'1 1 240px' }}>
          <Logo orientation="vertical" tone="white" height={78} src={ASSETS.logoVWhite} />
          <p style={{ marginTop:16, fontSize:'.875rem', lineHeight:1.55, maxWidth:280 }}>
            Enriching Middle Tennessee by connecting our community to the wider world through the power of public media.</p>
        </div>
        {cols.map(([h, items]) => (
          <div key={h}>
            <div style={{ fontSize:'.6875rem', fontWeight:700, letterSpacing:'.08em', textTransform:'uppercase', color:'#fff', marginBottom:12 }}>{h}</div>
            <ul style={{ listStyle:'none', margin:0, padding:0, display:'flex', flexDirection:'column', gap:9 }}>
              {items.map(i => <li key={i}><a style={{ color:'rgba(255,255,255,.72)', fontSize:'.9375rem', textDecoration:'none', cursor:'pointer' }}>{i}</a></li>)}
            </ul>
          </div>
        ))}
      </div>
      <div style={{ maxWidth:1240, margin:'40px auto 0', padding:'20px 24px', borderTop:'1px solid rgba(255,255,255,.1)',
        display:'flex', justifyContent:'space-between', flexWrap:'wrap', gap:12, fontSize:'.8125rem' }}>
        <span>&copy; 2026 Nashville PBS (WNPT). A 501(c)(3) nonprofit.</span>
        <span style={{ display:'flex', gap:20 }}><a style={{color:'inherit',cursor:'pointer'}}>Privacy</a><a style={{color:'inherit',cursor:'pointer'}}>Terms</a><a style={{color:'inherit',cursor:'pointer'}}>FCC Public File</a></span>
      </div>
    </footer>
  );
}

function App() {
  const [view, setView] = React.useState('home');
  const [selected, setSelected] = React.useState(null);
  const [query, setQuery] = React.useState('');
  const open = (id) => { setSelected(id); setView('detail'); window.scrollTo(0,0); };
  const nav = (v) => { setView(v); setQuery(''); window.scrollTo(0,0); };
  const search = (q) => { setQuery(q); if (q) setView('browse'); };
  return (
    <div style={{ minHeight:'100vh', display:'flex', flexDirection:'column', background:'var(--surface-page)' }}>
      <Header onNav={nav} current={view} onSearch={search} />
      <main style={{ flex:1 }}>
        {view==='home' && <HomePage onOpen={open} />}
        {view==='browse' && <BrowsePage onOpen={open} query={query} />}
        {view==='detail' && <DetailPage id={selected} onOpen={open} onBack={()=>nav('home')} />}
      </main>
      <Footer />
    </div>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<App/>);