(function() {
  const { useState, useEffect } = React;

  function Header() {
    const brand = window.BRAND_CONFIG;
    const [menuOpen, setMenuOpen] = useState(false);
    const [hash, setHash] = useState(window.location.hash || '#/');

    useEffect(() => {
      const onHash = () => {
        setHash(window.location.hash || '#/');
        setMenuOpen(false);
      };
      window.addEventListener('hashchange', onHash);
      return () => window.removeEventListener('hashchange', onHash);
    }, []);

    const nameParts = brand.shortName.split(' ');

    return (
      <header className="site-header">
        <div className="page-container header-inner">
          <a href="#/" className="logo">
            {brand.logoUrl
              ? <img src={brand.logoUrl} alt={brand.shortName} />
              : <span>
                  {nameParts.map((word, i) =>
                    i === nameParts.length - 1
                      ? <span key={i} style={{color: 'var(--brand-accent)'}}>{(i > 0 ? ' ' : '') + word}</span>
                      : (i > 0 ? ' ' : '') + word
                  )}
                </span>
            }
          </a>
          <button className="hamburger" onClick={() => setMenuOpen(o => !o)} aria-label="Toggle menu">
            {menuOpen ? '✕' : '☰'}
          </button>
          <nav className={`site-nav${menuOpen ? ' open' : ''}`}>
            <a href="#/" className={hash === '#/' || hash.startsWith('#/property') ? 'active' : ''}>
              Properties
            </a>
            <a href="#/contact" className={hash === '#/contact' ? 'active' : ''}>
              Contact
            </a>
            <a href="#/contact" className="nav-cta">Get in Touch</a>
          </nav>
        </div>
      </header>
    );
  }

  window.Header = Header;
})();