/* global React */
const { useEffect, useState } = React;

function Nav() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onS = () => setScrolled(window.scrollY > 24);
    window.addEventListener('scroll', onS, { passive: true });
    return () => window.removeEventListener('scroll', onS);
  }, []);
  const links = [
    { label: 'Services', href: '#services' },
    { label: 'Work',     href: '#work' },
    { label: 'About',    href: '#about' },
    { label: 'Contact',  href: '#contact' },
  ];
  return (
    <div style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 60,
      display: 'flex', justifyContent: 'center',
      padding: scrolled ? '12px 20px' : '20px 20px',
      transition: 'padding 300ms cubic-bezier(.16,1,.3,1)',
      pointerEvents: 'none',
    }}>
      <div data-nal="nav" style={{
        pointerEvents: 'auto',
        width: '100%', maxWidth: scrolled ? 980 : 1240,
        padding: '10px 14px 10px 20px',
        display: 'flex', alignItems: 'center', gap: 28,
        background: scrolled ? 'rgba(255,255,255,0.82)' : 'rgba(255,255,255,0.0)',
        backdropFilter: scrolled ? 'blur(16px) saturate(160%)' : 'none',
        WebkitBackdropFilter: scrolled ? 'blur(16px) saturate(160%)' : 'none',
        border: scrolled ? '1px solid rgba(14,22,38,0.08)' : '1px solid transparent',
        borderRadius: 999,
        boxShadow: scrolled ? '0 10px 40px rgba(14,22,38,0.08)' : 'none',
        transition: 'all 380ms cubic-bezier(.16,1,.3,1)',
      }}>
        <a href="#" style={{ display: 'flex', alignItems: 'center', gap: 9, textDecoration: 'none' }}>
          <img src="assets/nal-mark.png" style={{ height: 22, width: 'auto' }} alt="NAL" />
          <span style={{ fontWeight: 700, fontSize: 15, color: '#0B1220', letterSpacing: '-0.015em' }}>NAL</span>
        </a>
        <nav style={{ display: 'flex', gap: 4, marginLeft: 8 }}>
          {links.map((l) => (
            <a key={l.label} href={l.href} style={{
              fontSize: 13.5, color: '#3E4B5E', fontWeight: 500, textDecoration: 'none',
              padding: '8px 14px', borderRadius: 999, transition: 'background 180ms, color 180ms',
            }}
              onMouseEnter={e => { e.currentTarget.style.background = 'rgba(14,22,38,0.05)'; e.currentTarget.style.color = '#0B1220'; }}
              onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = '#3E4B5E'; }}
            >{l.label}</a>
          ))}
        </nav>
        <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 12 }}>
          <span data-nal="nav-status" style={{ fontFamily: 'var(--font-mono)', fontSize: 11.5, color: '#5F6E82', display: 'flex', alignItems: 'center', gap: 7, letterSpacing: '0.02em' }}>
            <span style={{ position: 'relative', width: 7, height: 7, background: '#2E9D6E', borderRadius: 999 }}>
              <span style={{ position: 'absolute', inset: -3, borderRadius: 999, background: '#2E9D6E', opacity: 0.35, animation: 'nal-ping 1.8s cubic-bezier(0,0,.2,1) infinite' }} />
            </span>
            Accepting projects
          </span>
          <a href="#contact" data-nal="nav-cta" style={{
            fontWeight: 600, fontSize: 13.5,
            background: '#0B1220', color: '#fff', border: 0, textDecoration: 'none',
            padding: '9px 16px', borderRadius: 999, cursor: 'pointer',
            display: 'inline-flex', alignItems: 'center', gap: 6,
            transition: 'transform 220ms, background 220ms',
          }}
            onMouseEnter={e => { e.currentTarget.style.background = '#172232'; e.currentTarget.style.transform = 'translateY(-1px)'; }}
            onMouseLeave={e => { e.currentTarget.style.background = '#0B1220'; e.currentTarget.style.transform = 'translateY(0)'; }}
          >Get in touch <span style={{ fontSize: 15, lineHeight: 1, transform: 'translateY(-1px)' }}>↗</span></a>
        </div>
      </div>
    </div>
  );
}
window.Nav = Nav;