/* Top header — utility strip + sticky main nav. */

const NAV_ITEMS = [
  ["Zertifizierungen", "home"],
  ["Antragsverfahren", "antrag"],
  ["Aktuelles", "news"],
  ["Kontakt", "kontakt"],
];

const TopStrip = () => (
  <div className="dlg-top">
    <div className="dlg-top__inner container">
      <div className="dlg-top__left">
        <OfficialStamp>Zertifizierungsstelle · Berlin</OfficialStamp>
        <span className="dlg-top__sep">·</span>
        <a href="mailto:info@deutsche-legat.de"><Icon d={Icons.mail} size={12}/> info@deutsche-legat.de</a>
      </div>
      <div className="dlg-top__right">
        <a href="#">DE</a>
        <span className="dlg-top__sep">·</span>
        <a href="#" style={{opacity:0.55,pointerEvents:"none"}}>EN</a>
      </div>
    </div>
  </div>
);

const Header = ({ route, onNav }) => (
  <header className="dlg-header" data-screen-label="Header">
    <HeaderStyles/>
    <TopStrip/>
    <div className="dlg-header__main">
      <div className="dlg-header__inner container">
        <a href="#" className="dlg-brand" onClick={(e)=>{e.preventDefault();onNav("home");}}>
          <img src="assets/dlg-seal.svg" alt="" width="56" height="56"/>
          <div className="dlg-brand__text">
            <div className="dlg-brand__name">Deutsche Legat Gesellschaft</div>
            <div className="dlg-brand__sub">für Zertifizierung mbH · Berlin</div>
          </div>
        </a>

        <nav className="dlg-nav">
          {NAV_ITEMS.map(([label, key]) => (
            <a key={key} href="#" data-active={route === key ? "true" : "false"}
               onClick={(e)=>{e.preventDefault();onNav(key);}}>{label}</a>
          ))}
        </nav>

        <div className="dlg-header__cta">
          <Button variant="primary" size="md" iconRight="arrowR" onClick={()=>onNav("antrag")}>
            Antrag stellen
          </Button>
        </div>
      </div>
    </div>
  </header>
);

const HeaderStyles = () => (
  <style>{`
    .dlg-header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--border); }
    .dlg-top { background: var(--dlg-navy-900); color: var(--dlg-ink-200); font-size: 12px; }
    .dlg-top__inner { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; gap: 14px; flex-wrap: wrap; }
    .dlg-top__left, .dlg-top__right { display: flex; align-items: center; gap: 14px; }
    .dlg-top a { color: var(--dlg-ink-200); text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
    .dlg-top a:hover { color: var(--dlg-gold-400); }
    .dlg-top__sep { color: var(--dlg-navy-600); }

    .dlg-header__main { background: #fff; }
    .dlg-header__inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; padding: 14px 0; }
    .dlg-brand { display: flex; gap: 14px; align-items: center; text-decoration: none; color: var(--fg); }
    .dlg-brand__name { font-family: var(--font-serif); font-weight: 700; font-size: 19px; color: var(--dlg-navy-900); line-height: 1.1; letter-spacing: -0.01em; white-space: nowrap; }
    .dlg-brand__sub  { font-size: 12px; color: var(--dlg-navy-700); font-weight: 600; letter-spacing: 0.4px; margin-top: 2px; white-space: nowrap; }

    .dlg-nav { display: flex; gap: 26px; justify-content: center; }
    .dlg-nav a { font-size: 14px; color: var(--dlg-navy-800); text-decoration: none; padding: 8px 0; border-bottom: 2px solid transparent; font-weight: 500; transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out); }
    .dlg-nav a:hover { color: var(--dlg-navy-900); border-bottom-color: var(--dlg-gold-500); }
    .dlg-nav a[data-active="true"] { color: var(--dlg-navy-900); border-bottom-color: var(--dlg-navy-700); }

    .dlg-header__cta { display: flex; gap: 8px; align-items: center; justify-self: end; }
  `}</style>
);

Object.assign(window, { Header });