/* Site header: logo, primary nav, search, member actions. */
const { Button, IconButton, Logo } = window.NashvillePBSDesignSystem_8fe663;

function Header({ onNav, current, onSearch }) {
  const links = ['Home', 'Shows', 'Schedule', 'Kids', 'Local'];
  return (
    <header style={{ position:'sticky', top:0, zIndex:50, background:'var(--navy-blue)', color:'#fff',
      borderBottom:'1px solid rgba(255,255,255,.08)' }}>
      <div style={{ maxWidth:1240, margin:'0 auto', padding:'0 24px', height:68, display:'flex', alignItems:'center', gap:28 }}>
        <a onClick={()=>onNav('home')} style={{ cursor:'pointer', display:'flex', alignItems:'center' }}>
          <Logo orientation="horizontal" tone="white" height={30} src={ASSETS.logoHWhite} />
        </a>
        <nav style={{ display:'flex', gap:6, marginLeft:8 }}>
          {links.map(l => {
            const active = (l==='Home' && current==='home') || (l==='Shows' && current==='browse');
            return <a key={l} onClick={()=> onNav(l==='Shows'?'browse':l==='Home'?'home':'browse')}
              style={{ cursor:'pointer', padding:'8px 12px', borderRadius:8, fontSize:'.9375rem', fontWeight:600,
                color: active ? '#fff' : 'rgba(255,255,255,.72)', background: active ? 'rgba(255,255,255,.12)':'transparent',
                textDecoration:'none' }}>{l}</a>;
          })}
        </nav>
        <div style={{ flex:1 }} />
        <div style={{ display:'flex', alignItems:'center', gap:10 }}>
          <div style={{ display:'flex', alignItems:'center', gap:8, background:'rgba(255,255,255,.12)',
            borderRadius:999, padding:'8px 14px', width:200 }}>
            <Icon name="search" style={{ color:'rgba(255,255,255,.8)' }} />
            <input placeholder="Search" onChange={e=>onSearch && onSearch(e.target.value)}
              style={{ border:'none', outline:'none', background:'transparent', color:'#fff', fontFamily:'inherit',
                fontSize:'.875rem', width:'100%' }} />
          </div>
          <IconButton label="Account" variant="inverse"><Icon name="user" /></IconButton>
          <Button variant="inverse" size="sm">Donate</Button>
        </div>
      </div>
    </header>
  );
}
Object.assign(window, { Header });