// Header / Navigation
const { useEffect: useEffectH, useState: useStateH } = React;

const Brand = ({ go }) => (
  <div className="brand" onClick={() => go('home')} role="button" tabIndex={0}>
    <img src="images/logo-header-transp.png" alt="Immo&amp;Sens" className="brand-logo" />
  </div>
);

const Header = ({ page, go, solid }) => {
  const [scrolled, setScrolled] = useStateH(false);
  const [mobileOpen, setMobileOpen] = useStateH(false);
  const { PAGES } = window.IMMO;

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

  useEffectH(() => {
    document.body.style.overflow = mobileOpen ? 'hidden' : '';
  }, [mobileOpen]);

  const close = () => setMobileOpen(false);

  return (
    <>
      <header className={`header${scrolled ? ' scrolled' : ''}${solid ? ' solid' : ''}`}>
        <div className="shell header-row">
          <Brand go={(p) => { close(); go(p); }} />
          <nav className="nav">
            {PAGES.map((p) => (
              <button
                key={p.id}
                className={page === p.id ? 'active' : ''}
                onClick={() => go(p.id)}
              >
                {p.label}
              </button>
            ))}
          </nav>
          <div className="header-cta" />
          <button
            className={`menu-toggle${mobileOpen ? ' open' : ''}`}
            onClick={() => setMobileOpen(!mobileOpen)}
            aria-label="Menu"
          >
            <span />
          </button>
        </div>
      </header>

      <div className={`mobile-nav${mobileOpen ? ' open' : ''}`}>
        {PAGES.map((p) => (
          <button key={p.id} onClick={() => { close(); go(p.id); }}>
            {p.label}
          </button>
        ))}
        <div className="mobile-cta" />
      </div>
    </>
  );
};

window.Header = Header;
window.Brand = Brand;