// NRL Header — E-Synthese
const NRLHeader = ({ onNavigate, activeSection }) => {
  const [menuOpen, setMenuOpen] = React.useState(false);

  return (
    <header style={hS.header}>
      <div style={hS.inner}>
        <button onClick={() => onNavigate('home')} style={hS.logoBtn} aria-label="Startseite">
          <img src="assets/NRL_Logo_Blau.svg" alt="NRL Norddeutsches Reallabor" style={hS.logo} />
        </button>
        <nav style={hS.nav}>
          <button onClick={() => onNavigate('home')} style={{...hS.navItem, ...(activeSection==='home' ? hS.navActive : {})}}>
            Übersicht
          </button>
          <button onClick={() => onNavigate('themen')} style={{...hS.navItem, ...(activeSection==='themen' ? hS.navActive : {})}}>
            Themen &amp; Ergebnisse
          </button>
          <button onClick={() => onNavigate('projekt')} style={{...hS.navItem, ...(activeSection==='projekt' ? hS.navActive : {})}}>
            Das Projekt
          </button>
        </nav>
        <div style={hS.actions}>
          <a href="https://norddeutsches-reallabor.de" target="_blank" rel="noopener noreferrer" style={hS.externalLink}>
            norddeutsches-reallabor.de
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{marginLeft:4}}>
              <path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/>
            </svg>
          </a>
        </div>
        {/* Mobile hamburger */}
        <button style={hS.hamburger} onClick={() => setMenuOpen(!menuOpen)} aria-label="Menü">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#434343" strokeWidth="2" strokeLinecap="round">
            {menuOpen ? <><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></> : <><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></>}
          </svg>
        </button>
      </div>
      {menuOpen && (
        <div style={hS.mobileMenu}>
          {[['home','Übersicht'],['themen','Themen & Ergebnisse'],['projekt','Das Projekt']].map(([id,label]) => (
            <button key={id} onClick={() => { onNavigate(id); setMenuOpen(false); }} style={hS.mobileItem}>{label}</button>
          ))}
        </div>
      )}
      <div style={hS.border}></div>
    </header>
  );
};

const hS = {
  header: { background: '#fff', position: 'sticky', top: 0, zIndex: 200, },
  inner: { maxWidth: 1200, margin: '0 auto', padding: '0 32px', height: 68, display: 'flex', alignItems: 'center', gap: 32, },
  logoBtn: { background: 'none', border: 'none', cursor: 'pointer', padding: 0, flexShrink: 0, },
  logo: { height: 42, width: 'auto', display: 'block', },
  nav: { display: 'flex', gap: 4, flex: 1, },
  navItem: { background: 'none', border: 'none', cursor: 'pointer', fontFamily: "'Nunito Sans', Arial, sans-serif", fontSize: 14, fontWeight: 600, color: '#515456', padding: '6px 12px', borderRadius: 3, transition: 'color 150ms ease', whiteSpace: 'nowrap', },
  navActive: { color: '#569EBE', },
  actions: { display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0, },
  externalLink: { fontFamily: "'Nunito Sans', Arial, sans-serif", fontSize: 12, fontWeight: 600, color: '#569EBE', textDecoration: 'none', display: 'flex', alignItems: 'center', opacity: 0.85, },
  hamburger: { display: 'none', background: 'none', border: 'none', cursor: 'pointer', padding: 4, },
  mobileMenu: { display: 'flex', flexDirection: 'column', background: '#fff', borderTop: '1px solid #ECECEC', padding: '8px 16px 16px', },
  mobileItem: { background: 'none', border: 'none', cursor: 'pointer', fontFamily: "'Nunito Sans', Arial, sans-serif", fontSize: 15, fontWeight: 600, color: '#434343', padding: '12px 0', textAlign: 'left', borderBottom: '1px solid #ECECEC', },
  border: { height: 1, background: '#E8EDEF', },
};

Object.assign(window, { NRLHeader });