function Nav({ current = 'home' }) {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const on = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', on);
    return () => window.removeEventListener('scroll', on);
  }, []);

  const links = [
    { label: 'Approach',    href: 'approach.html',    key: 'approach' },
    { label: 'Framework',   href: 'framework.html',   key: 'framework' },
    { label: 'White Paper', href: 'white-paper.html', key: 'white-paper' },
    { label: 'About',       href: 'about.html',       key: 'about' },
  ];

  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 10,
      background: 'var(--s4-paper)',
      borderBottom: scrolled ? '1px solid var(--s4-rule)' : '1px solid transparent',
      transition: 'border-color 200ms var(--ease-out)',
    }}>
      <div style={{
        maxWidth: 1160, margin: '0 auto', padding: '18px 40px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <a href="index.html" style={{ display: 'flex', alignItems: 'center', textDecoration: 'none' }}>
          <img src="../../assets/step4-logo.png" alt="Step 4 Consulting" style={{ height: 38 }} />
        </a>
        <div style={{ display: 'flex', gap: 32, alignItems: 'center' }}>
          {links.map(l => {
            const active = current === l.key;
            return (
              <a key={l.key} href={l.href} style={{
                fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 500,
                color: active ? 'var(--s4-amber-ink)' : 'var(--fg-1)',
                textDecoration: 'none', letterSpacing: 0,
                position: 'relative', paddingBottom: 2,
                borderBottom: active ? '1px solid var(--s4-amber)' : '1px solid transparent',
                transition: 'color 200ms var(--ease-out)',
              }}
                 onMouseEnter={e => { if (!active) e.currentTarget.style.color = 'var(--s4-amber)'; }}
                 onMouseLeave={e => { if (!active) e.currentTarget.style.color = 'var(--fg-1)'; }}>
                {l.label}
              </a>
            );
          })}
          <a href="contact.html" style={{
            fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 600,
            padding: '10px 18px', border: '1px solid var(--s4-ink)',
            background: 'var(--s4-ink)', color: 'var(--s4-paper)',
            textDecoration: 'none', borderRadius: 2,
            transition: 'background 200ms var(--ease-out), color 200ms var(--ease-out)',
          }}
          onMouseEnter={e => { e.currentTarget.style.background = 'var(--s4-paper)'; e.currentTarget.style.color = 'var(--s4-ink)'; }}
          onMouseLeave={e => { e.currentTarget.style.background = 'var(--s4-ink)'; e.currentTarget.style.color = 'var(--s4-paper)'; }}>
            Book an assessment
          </a>
        </div>
      </div>
    </nav>
  );
}

window.Nav = Nav;