// Header — logo, globale zoekbalk, teller "1.234.567 vergunningen, laatst bijgewerkt: ..."

function Header({ q, onQ, totaalLandelijk, laatsteUpdate, totaalFilters }) {
  return (
    <header className="border-b border-slate-200 bg-white">
      <div className="px-6 py-3 flex items-center gap-6">
        {/* Logo */}
        <a href="/" className="flex items-baseline gap-2 shrink-0 group">
          <span className="font-serif text-[19px] text-slate-900 leading-none tracking-tight">
            omgevingsvergunning-register
          </span>
          <span className="font-serif text-[15px] text-slate-500 leading-none">.nl</span>
        </a>
        <div className="hidden md:block h-6 w-px bg-slate-200"></div>

        {/* Search */}
        <div className="flex-1 max-w-2xl relative">
          <svg viewBox="0 0 20 20" className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" aria-hidden>
            <circle cx="9" cy="9" r="6" fill="none" stroke="currentColor" strokeWidth="1.5" />
            <path d="M13.5 13.5 L17 17" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
          </svg>
          <input
            type="text"
            value={q}
            onChange={(e) => onQ(e.target.value)}
            placeholder="Zoek op postcode, adres, zaaknummer of koop-id…"
            aria-label="Zoeken"
            className="w-full bg-slate-50 border border-slate-200 rounded-md pl-9 pr-3 py-1.5 text-sm text-slate-900 placeholder-slate-400 focus:outline-none focus:border-emerald-900 focus:bg-white focus:ring-2 focus:ring-emerald-900/10"
          />
        </div>

        {/* Counter */}
        <div className="hidden lg:flex flex-col items-end text-right shrink-0">
          <div className="text-[13px] text-slate-900 tabular-nums">
            <span className="font-medium">{fmt.number(totaalLandelijk)}</span>
            <span className="text-slate-500"> kennisgevingen sinds 1-1-2024</span>
          </div>
          <div className="text-[11px] text-slate-500 tabular-nums">
            Laatst bijgewerkt {fmt.dateLong(laatsteUpdate)}, {fmt.time(laatsteUpdate)}
          </div>
        </div>
      </div>
    </header>
  );
}

Object.assign(window, { Header });