function Nav({ view, setView }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const items = [
    { k: 'home',       label: 'Home' },
    { k: 'private',    label: 'Particulier' },
    { k: 'corporate',  label: 'Bedrijven' },
    { k: 'methodiek',  label: 'Methodiek' },
  ];

  function go(k) {
    setView(k);
    setOpen(false);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }

  return (
    <header
      className={`fixed top-0 inset-x-0 z-50 transition-all ${scrolled ? 'nav-scrolled' : ''}`}
      style={{ paddingTop: scrolled ? 14 : 22, paddingBottom: scrolled ? 14 : 22 }}
    >
      <div className="max-w-[1320px] mx-auto px-6 md:px-10 flex items-center justify-between gap-6">
        <button onClick={() => go('home')} className="flex items-center gap-3 group" aria-label="Yelloow home">
          <div className="flex items-end gap-1" aria-hidden="true">
            {window.COLORS.map((c, i) => (
              <span
                key={c.key}
                style={{
                  width: 4,
                  height: 8 + (i % 3) * 4,
                  background: c.hex,
                  borderRadius: 1,
                  transition: 'transform .3s ease',
                }}
                className="group-hover:translate-y-[-1px]"
              />
            ))}
          </div>
          <span className="font-display text-[22px] tracking-tight text-yel-ink">yelloow<span className="text-yel-primary">.</span></span>
        </button>

        <nav className="hidden md:flex items-center gap-7">
          {items.map(it => (
            <button
              key={it.k}
              onClick={() => go(it.k)}
              className={`text-[14px] transition-colors ${view === it.k ? 'text-yel-ink' : 'text-yel-mute hover:text-yel-ink'}`}
            >
              <span className={view === it.k ? 'ulink' : ''}>{it.label}</span>
            </button>
          ))}
        </nav>

        <div className="hidden md:flex items-center gap-3">
          <button onClick={() => go('test')} className="btn-yellow text-[13px] py-3 px-4">
            <span className="dot-x" style={{ width: 6, height: 6, borderRadius: 999, background: '#1A1A1A' }}></span>
            Doe de mini-test
          </button>
        </div>

        <button
          className="md:hidden w-10 h-10 grid place-items-center border border-black/15 rounded-full"
          onClick={() => setOpen(o => !o)}
          aria-label="Menu"
        >
          <div className="flex flex-col gap-[3px]">
            <span className="w-4 h-px bg-yel-ink"></span>
            <span className="w-4 h-px bg-yel-ink"></span>
            <span className="w-4 h-px bg-yel-ink"></span>
          </div>
        </button>
      </div>

      {open && (
        <div className="md:hidden border-t border-black/10 bg-yel-50/95 backdrop-blur">
          <div className="px-6 py-6 flex flex-col gap-4">
            {items.map(it => (
              <button key={it.k} onClick={() => go(it.k)} className="text-left font-display text-2xl">
                {it.label}
              </button>
            ))}
            <button onClick={() => go('test')} className="btn-yellow self-start mt-2">Doe de mini-test</button>
          </div>
        </div>
      )}
    </header>
  );
}

window.Nav = Nav;