function SiteHeader() {
  const [active, setActive] = React.useState('Capabilities');
  const items = ['Capabilities', 'Differentiators', 'Solutions', 'Clients'];
  // Sub-pages (about/careers) don't contain these sections, so their links must
  // point back at index.html + the hash. Detect by presence in the DOM rather
  // than by URL shape, which varies between preview and production.
  const [onHome, setOnHome] = React.useState(true);
  React.useEffect(() => {
    setOnHome(!!document.getElementById('capabilities'));
  }, []);
  const base = onHome ? '' : 'index.html';
  return (
    <header className="ez-header">
      <div className="ez-container ez-header-inner">
        <a href="index.html" className="ez-brand">
          <img src="assets/logo.png" alt="EntropyZero"/>
          <span className="wm"><span className="b">entropy</span><span className="o">zero</span></span>
        </a>
        <nav className="ez-nav">
          {items.map(i => {
            const hash = { Capabilities: '#capabilities', Differentiators: '#differentiators', Solutions: '#solutions', Clients: '#clients' }[i] || '#';
            return <a key={i} href={base + hash} className={active===i ? 'active' : ''} onClick={() => setActive(i)}>{i}</a>;
          })}
          <a href="mailto:info@ent0.com" className="ez-btn ez-btn-primary" style={{padding:'10px 18px'}}>Get in touch</a>
        </nav>
      </div>
    </header>
  );
}
window.SiteHeader = SiteHeader;