// Header.jsx — sticky nav with logo + nav links + CTA
(function () {
  function Header({ current, onNav }) {
    const [scrolled, setScrolled] = React.useState(false);
    React.useEffect(() => {
      const onScroll = () => setScrolled(window.scrollY > 10);
      window.addEventListener('scroll', onScroll);
      return () => window.removeEventListener('scroll', onScroll);
    }, []);
    const pages = [
      { id: 'home', label: 'Home' },
      { id: 'servizi', label: 'Servizi' },
      { id: 'contatti', label: 'Contattaci' },
    ];
    return (
      <header className={`dg-header ${scrolled ? 'is-scrolled' : ''}`}>
        <div className="dg-header-inner">
          <a className="dg-brand" href="#" onClick={(e) => { e.preventDefault(); onNav('home'); }}>
            <img src="../../assets/logo.png" alt="D.G. Aspirazione" />
          </a>
          <nav className="dg-nav">
            {pages.map((p) => (
              <a
                key={p.id}
                href="#"
                className={`dg-nav-link ${current === p.id ? 'is-active' : ''}`}
                onClick={(e) => { e.preventDefault(); onNav(p.id); }}
              >
                {p.label}
              </a>
            ))}
          </nav>
        </div>
      </header>
    );
  }
  window.Header = Header;
})();