/* Header + nav routing */
const Header = ({ route, setRoute }) => {
  const items = [
    { k:'home',     label:'Overview' },
    { k:'method',   label:'Method' },
    { k:'explore',  label:'Explore' },
    { k:'compare',  label:'Compare' },
  ];
  return (
    <header style={{
      position:'sticky', top:0, zIndex:50,
      background:'rgba(250,250,247,0.82)',
      backdropFilter:'blur(18px)', WebkitBackdropFilter:'blur(18px)',
      borderBottom:'1px solid var(--line)',
    }}>
      <div className="site-wrap" style={{height:72,display:'flex',alignItems:'center',justifyContent:'space-between'}}>
        <a href="#" onClick={e=>{e.preventDefault();setRoute({page:'home'});}} style={{textDecoration:'none',display:'flex',alignItems:'center',gap:12}}>
          <img src="assets/logos/kestrel-mark.svg" style={{height:40}}/>
          <span style={{fontFamily:'var(--font-sans)',fontWeight:600,fontSize:24,color:'var(--ink)',letterSpacing:'-0.02em'}}>Kestrel</span>
        </a>
        <nav style={{display:'flex',alignItems:'center',gap:28}}>
          {items.map(it=>{
            const active = route.page === it.k || (it.k==='home' && route.page === 'home');
            const isCompany = it.k==='explore' && route.page==='company';
            return (
              <a key={it.k} href="#" onClick={e=>{e.preventDefault();setRoute({page:it.k});}}
                style={{textDecoration:'none',fontSize:14,color: (active||isCompany)?'var(--ink)':'var(--ink-2)',fontWeight:500,position:'relative'}}>
                {it.label}
                {(active||isCompany) && <span style={{position:'absolute',left:0,right:0,bottom:-22,height:1,background:'var(--ink)'}}/>}
              </a>
            );
          })}
          <button className="btn btn-ghost" style={{padding:'8px 14px'}}>Sign in</button>
          <button className="btn btn-primary" style={{padding:'8px 14px'}}>Request access <Icon name="arrow-right" size={14} style={{marginLeft:2}} /></button>
        </nav>
      </div>
    </header>
  );
};
window.Header = Header;