const Nav = ({ theme, setTheme }) => {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);

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

  const links = [
    { href: '#solutions', label: 'Solutions' },
    { href: '#services', label: 'Services' },
    { href: '#aidd-agents', label: 'AIDD' },
    { href: '#industries', label: 'Industries' },
    { href: '#outcomes', label: 'Outcomes' },
    { href: '#capabilities', label: 'Platform' },
  ];

  return (
    <header
      className={`fixed top-0 inset-x-0 z-50 transition-all duration-300 ${
        scrolled ? 'backdrop-blur-xl bg-[var(--bg)]/75 border-b border-token' : ''
      }`}
    >
      <div className="max-w-[1240px] mx-auto px-6 md:px-10 h-20 flex items-center justify-between">
        <a href="#top" className="flex items-center gap-2.5 group">
          <img src="assets/logo.png" alt="Webever" className="h-11 md:h-12 w-auto select-none" />
          <span className="hidden md:inline-flex items-center gap-1.5 text-[11px] font-mono uppercase tracking-[0.18em] text-muted ml-2 pl-3 border-l border-token">
            AI Engineering
          </span>
        </a>

        <nav className="hidden lg:flex items-center gap-1">
          {links.map(l => (
            <a key={l.href} href={l.href}
              className="px-3 py-2 text-[14px] text-muted hover:text-[var(--text)] transition-colors">
              {l.label}
            </a>
          ))}
        </nav>

        <div className="flex items-center gap-2">
          <button
            onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
            className="hidden md:inline-flex w-9 h-9 items-center justify-center rounded-lg border border-token text-muted hover:text-[var(--text)] transition-colors"
            aria-label="Toggle theme"
          >
            {theme === 'dark' ? <I.Sun size={16}/> : <I.Moon size={16}/>}
          </button>
          <a href="#contact" className="hidden md:inline-flex btn btn-ghost">Talk to engineer</a>
          <a href="#contact" className="btn btn-primary">
            Book demo <I.Arrow size={14}/>
          </a>
          <button onClick={() => setOpen(!open)} className="lg:hidden w-9 h-9 inline-flex items-center justify-center rounded-lg border border-token text-muted">
            {open ? <I.Close size={16}/> : <I.Menu size={16}/>}
          </button>
        </div>
      </div>

      {open && (
        <div className="lg:hidden border-t border-token bg-[var(--bg)]">
          <div className="px-6 py-4 flex flex-col gap-1">
            {links.map(l => (
              <a key={l.href} href={l.href} onClick={() => setOpen(false)}
                className="px-3 py-2.5 text-[14px] text-muted hover:text-[var(--text)] rounded-lg">
                {l.label}
              </a>
            ))}
          </div>
        </div>
      )}
    </header>
  );
};

window.Nav = Nav;