// REALIZE.CONTENT — Header / Nav (multi-page aware)
// Pass currentPage = 'home' | 'projetos' | 'realizers' (or a project slug)
const Header = ({ currentPage = 'home', basePath = './' }) => {
  const links = [
  { id: 'home', label: 'Manifesto', href: `${basePath}index.html` },
  { id: 'projetos', label: 'Projetos', href: `${basePath}projetos.html` },
  { id: 'realizers', label: 'Realizers', href: `${basePath}realizers.html` }];

  const [open, setOpen] = React.useState(false);
  const close = () => setOpen(false);

  return (
    <header className={`header${open ? ' nav-open' : ''}`}>
      <div className="header-inner">
        <a href={`${basePath}index.html`} className="brand-mark" onClick={close}>
          <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
            <path d="M20.2 6 3 11l-.9-2.4c-.3-1.1.3-2.2 1.3-2.5l13.5-4c1.1-.3 2.2.3 2.5 1.3Z"/>
            <path d="m6.2 5.3 3.1 3.9"/>
            <path d="m12.4 3.4 3.1 3.8"/>
            <path d="M3 11h18v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z"/>
          </svg>
          <span className="wordmark" style={{ fontWeight: '700' }}>REALIZE.CONTENT</span>
        </a>
        <button
          type="button"
          className="nav-toggle"
          aria-label={open ? 'Fechar menu' : 'Abrir menu'}
          aria-expanded={open}
          onClick={() => setOpen((o) => !o)}>
          <span></span><span></span><span></span>
        </button>
        <nav className="nav" id="primary-nav">
          {links.map((l) =>
          <a key={l.id} href={l.href} className={currentPage === l.id ? 'active' : ''} onClick={close}>
              {l.label}
            </a>
          )}
          <a href={`${basePath}index.html#contato`} className="btn" style={{ padding: '10px 16px', whiteSpace: 'nowrap' }} onClick={close}>
            Realizar projeto
          </a>
        </nav>
      </div>
    </header>);

};

window.Header = Header;