// Fixed top nav — FPDS brand, page links, Request Briefing CTA.
// Dispatches navigation via hash routing.

const NAV_ITEMS = [
  { label: 'Architecture', href: '#/architecture' },
  { label: 'Methodology', href: '#/methodology' },
  { label: 'Evidence', href: '#/case-studies' },
  { label: 'About', href: '#/about' },
  { label: 'Team', href: '#/team' },
];

const Navbar = ({ currentRoute }) => {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      background: scrolled ? 'rgba(255,255,255,0.88)' : 'rgba(255,255,255,0.8)',
      backdropFilter: 'blur(14px)', WebkitBackdropFilter: 'blur(14px)',
      borderBottom: `1px solid ${scrolled ? 'var(--slate-200)' : 'rgba(226,232,240,0.6)'}`,
      transition: 'background 0.25s, border-color 0.25s',
    }}>
      <div style={{position:'absolute', top:0, left:0, right:0, height:2, background:'linear-gradient(90deg, #000080 0%, #3B82F6 36%, rgba(59,130,246,0) 36%)'}}/>
      <div className="container-wide" style={{display:'flex', alignItems:'center', height:68, gap:24}}>
        <BrandLockup />
        <span className="chip chip-live" style={{marginLeft:4}}>
          <span className="chip-dot"/>
          Live · v2.2
        </span>

        <div style={{marginLeft:'auto', display:'flex', alignItems:'center', gap:2}}>
          {NAV_ITEMS.map(item => {
            const isActive = currentRoute.startsWith(item.href);
            return (
              <a key={item.href} href={item.href}
                 style={{
                   padding:'8px 14px', borderRadius:8, fontSize:14, fontWeight:600,
                   color: isActive ? '#000080' : 'var(--slate-600)',
                   background: isActive ? 'rgba(0,0,128,0.06)' : 'transparent',
                   transition: 'all 0.2s',
                 }}
                 onMouseEnter={e => { if (!isActive) { e.currentTarget.style.color='#000080'; e.currentTarget.style.background='rgba(0,0,128,0.04)'; } }}
                 onMouseLeave={e => { if (!isActive) { e.currentTarget.style.color='var(--slate-600)'; e.currentTarget.style.background='transparent'; } }}
              >{item.label}</a>
            );
          })}
        </div>

        <div style={{display:'flex', alignItems:'center', gap:8, padding:'6px 10px', borderRadius:8, background:'var(--slate-50)', border:'1px solid var(--slate-200)', fontFamily:'var(--font-mono)', fontSize:11, color:'var(--slate-500)', minWidth:180}}>
          <span style={{color:'#000080', fontWeight:700}}>➜</span>
          <span style={{color:'var(--slate-400)'}}>query the substrate…</span>
          <kbd style={{marginLeft:'auto', padding:'2px 6px', background:'#fff', border:'1px solid var(--slate-200)', borderRadius:4, fontSize:9}}>⌘K</kbd>
        </div>

        <a href="#/contact" className="btn-primary" style={{padding:'10px 16px', fontSize:13}}>
          Request Briefing <Icon name="arrow" size={14}/>
        </a>
      </div>
    </nav>
  );
};

window.Navbar = Navbar;