// nav.jsx — sticky nav with scroll state
const { useEffect: useEffectNav, useState: useStateNav } = React;

function Nav() {
  const [scrolled, setScrolled] = useStateNav(false);
  useEffectNav(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
    { href: '#systems', label: 'Systems' },
    { href: '#services', label: 'Services' },
    { href: '#industries', label: 'Industries' },
    { href: '#research', label: 'Research' },
    { href: '#news', label: 'News' },
  ];

  return (
    <nav className={`nav ${scrolled ? 'nav--scrolled' : ''}`}>
      <div className="container nav__row">
        <a href="#top" className="nav__logo">
          <img src="assets/mindwaves-icon-gradient-circle.png" alt="" />
          <span>Mindwaves</span>
        </a>
        <div className="nav__links">
          {links.map((l) => (
            <a key={l.href} href={l.href} className="nav__link">{l.label}</a>
          ))}
        </div>
        <a href="#contact" data-action="contact" className="btn btn--ghost nav__cta">
          Get in touch
          <i data-lucide="arrow-up-right"></i>
        </a>
      </div>
    </nav>
  );
}

Object.assign(window, { Nav });