function Nav({ view, go }) {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const items = [
    { id: 'board',  label: 'Board' },
    { id: 'join',   label: 'Become a Model' },
    { id: 'agency', label: 'Contact Us' },
  ];
  return (
    <header style={{
      position:'sticky', top:0, zIndex:50,
      background: scrolled ? 'rgba(255,255,255,0.78)' : 'rgba(255,255,255,0.86)',
      backdropFilter:'blur(' + (scrolled ? 16 : 10) + 'px)',
      WebkitBackdropFilter:'blur(' + (scrolled ? 16 : 10) + 'px)',
      borderBottom:'1px solid ' + (scrolled ? 'transparent' : 'var(--line)'),
      boxShadow: scrolled ? '0 10px 30px -18px rgba(11,11,11,0.30)' : '0 0 0 rgba(0,0,0,0)',
      transition:'background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease)'
    }}>
      <div className="shell" style={{
        display:'flex', alignItems:'center', justifyContent:'space-between',
        height:48
      }}>
        <nav style={{display:'flex', gap:'clamp(18px,3vw,38px)'}}>
          {items.map(it => (
            <a key={it.id} role="link" tabIndex={0} onClick={()=>go(it.id)}
               onKeyDown={e=>{ if (e.key==='Enter' || e.key===' ') { e.preventDefault(); go(it.id); } }}
               style={{cursor:'pointer'}}>
              <span className="ts-label" style={{
                color: view===it.id ? 'var(--ink)' : 'var(--ink-2)',
                transition:'color var(--dur-fast) var(--ease)',
                paddingBottom:6, display:'inline-block',
                borderBottom: view===it.id ? '1px solid var(--ink)' : '1px solid transparent'
              }}>{it.label}</span>
            </a>
          ))}
        </nav>
        <img src="assets/logo-mark.png" alt="" className="nav-logo-mark" style={{
          display:'none', height:36, width:'auto', opacity:0.9, flexShrink:0,
        }} />
      </div>
    </header>
  );
}
window.Nav = Nav;