// NavBar
function NavBar() {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);

  useEffect(() => {
    const h = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', h, { passive: true });
    h();
    return () => window.removeEventListener('scroll', h);
  }, []);

  const links = [
    { label: 'Work', href: '#work' },
    { label: 'Results', href: '#case-studies' },
    { label: 'Services', href: '#services' },
    { label: 'Process', href: '#process' },
    { label: 'About', href: '#about' },
  ];

  return (
    <header style={{
      position:'fixed', top:0, left:0, right:0, zIndex:50,
      display:'flex', justifyContent:'center',
      padding:'14px 20px 0',
      pointerEvents:'none',
    }}>
      <nav style={{
        pointerEvents:'auto',
        width:'100%', maxWidth:1240,
        display:'flex', alignItems:'center', justifyContent:'space-between',
        padding:'10px 16px 10px 18px',
        borderRadius:18,
        background: scrolled ? 'rgba(6,20,34,0.82)' : 'transparent',
        backdropFilter: scrolled ? 'blur(24px) saturate(140%)' : 'none',
        WebkitBackdropFilter: scrolled ? 'blur(24px) saturate(140%)' : 'none',
        border: `1px solid ${scrolled ? 'var(--border-strong)' : 'transparent'}`,
        transition:'all .3s',
      }}>
        <a href="#hero" style={{ display:'flex', alignItems:'center', gap:10 }}>
          <div style={{
            width:34, height:34, borderRadius:9,
            background:'rgba(var(--accent-rgb),0.14)',
            border:'1px solid rgba(var(--accent-rgb),0.34)',
            display:'flex', alignItems:'center', justifyContent:'center',
            fontFamily:'var(--font-mono)', color:'var(--accent)',
            fontSize:12, fontWeight:700, letterSpacing:'0.05em',
          }}>SA</div>
          <div>
            <div className="serif" style={{ fontSize:15, fontWeight:700, letterSpacing:'-0.01em', lineHeight:1 }}>Shinabaze Ajiya</div>
            <div className="mono logo-subtitle" style={{ fontSize:9.5, color:'var(--muted)', letterSpacing:'0.14em', marginTop:2, textTransform:'uppercase' }}>AI Automation Architect</div>
          </div>
        </a>

        <div style={{ display:'flex', alignItems:'center', gap:28 }} className="nav-links-desktop">
          {links.map(l => (
            <a key={l.href} href={l.href} style={{
              fontSize:13, fontWeight:500, color:'var(--muted-strong)',
              transition:'color .2s', position:'relative',
            }} onMouseEnter={e=>e.currentTarget.style.color='var(--text)'}
               onMouseLeave={e=>e.currentTarget.style.color='var(--muted-strong)'}
            >
              {l.label}
            </a>
          ))}
        </div>

        <div style={{ display:'flex', alignItems:'center', gap:10 }}>
          <a href="https://dreamfoxverse.com" target="_blank" rel="noopener noreferrer" className="nav-cta-ghost" style={{
            fontSize:12, fontWeight:500, color:'var(--accent)',
            border:'1px solid rgba(var(--accent-rgb),0.35)',
            padding:'7px 14px', borderRadius:9,
            fontFamily:'var(--font-mono)', letterSpacing:'0.02em',
          }}>DFV Agency →</a>
          <a href="#contact" className="btn-primary" style={{ padding:'9px 18px', fontSize:12, borderRadius:9 }}>
            Hire Me
          </a>
        </div>
      </nav>

      <style>{`
        @media (max-width: 900px) {
          .nav-links-desktop { display: none !important; }
          .nav-cta-ghost { display: none !important; }
        }
        @media (max-width: 480px) {
          .logo-subtitle { display: none !important; }
        }
      `}</style>
    </header>
  );
}

window.NavBar = NavBar;