/* global React */

function Header({ active }) {
  const items = [
    { label: "Hoe het werkt", href: "hoe-het-werkt.html", id: "hoe" },
    { label: "Voor wie", href: "voor-wie.html", id: "voor-wie" },
    { label: "Prijzen", href: "prijzen.html", id: "prijzen" },
    { label: "Blog", href: "#", id: "blog" },
  ];
  return (
    <header style={{ position: "sticky", top: 0, zIndex: 30 }}>
      {/* groene gradient strip bovenaan */}
      <div style={{ height: 4, background: "linear-gradient(90deg, #10D9A0 0%, #0EA47A 100%)" }} />
      <div style={{ background: "rgba(255,255,255,0.96)", backdropFilter: "saturate(140%) blur(8px)", borderBottom: "1px solid #E5E7EB" }}>
        <div style={{ maxWidth: 1200, margin: "0 auto", padding: "14px 32px", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24 }}>
          <a href="index.html" style={{ display: "flex", alignItems: "center", gap: 10, border: 0, textDecoration: "none" }}>
            <img src="assets/logo-mark.svg" height="28" alt="" />
            <img src="assets/logo-wordmark.svg" height="20" alt="Pandbeer" />
          </a>
          <nav style={{ display: "flex", gap: 4, alignItems: "center" }}>
            {items.map(it => (
              <a key={it.id} href={it.href} style={{
                fontSize: 14, fontWeight: 500, padding: "8px 14px", borderRadius: 8,
                color: active === it.id ? "var(--fg-1)" : "var(--fg-2)",
                background: active === it.id ? "var(--bg-subtle)" : "transparent",
                border: 0, textDecoration: "none",
              }}>{it.label}</a>
            ))}
          </nav>
          <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
            <a href="#" style={{ fontSize: 14, fontWeight: 500, color: "var(--fg-2)", padding: "8px 14px", border: 0, textDecoration: "none" }}>Inloggen</a>
            <a href="#demo" style={{
              fontFamily: "var(--font-sans)", fontWeight: 500, fontSize: 14,
              background: "var(--color-forest)", color: "#fff",
              border: 0, borderRadius: 8, padding: "10px 16px",
              textDecoration: "none", display: "inline-flex", alignItems: "center", gap: 6,
            }}>Gratis demo</a>
          </div>
        </div>
      </div>
    </header>
  );
}

window.PbHeader = Header;