function Header({ onBook, active, setActive }) {
  const items = [
    { id: "flota", label: "Kamper" },
    { id: "cennik", label: "Cennik" },
    { id: "serwis", label: "Mobilny serwis" },
    { id: "podroze", label: "Podróże" },
    { id: "kontakt", label: "Kontakt" },
  ];
  return (
    <header className="hdr">
      <div className="container hdr-inner">
        <a href="#" className="brand" onClick={(e) => { e.preventDefault(); window.scrollTo({top:0,behavior:"smooth"}); }}>
          <img src="https://kamperland.com.pl/wp-content/uploads/2024/07/cropped-kamperland-logo-1.jpg"
               alt="Kamperland" className="brand-logo"
               onError={(e) => { e.target.style.display = "none"; e.target.nextSibling.style.display = "inline"; }}/>
          <span className="brand-fallback">Kamperland</span>
        </a>
        <nav className="nav">
          {items.map(it => (
            <a key={it.id} href={`#${it.id}`}
               className={active === it.id ? "active" : ""}
               onClick={() => setActive(it.id)}>
              {it.label}
            </a>
          ))}
        </nav>
        <div className="hdr-cta">
          <span className="hdr-phone"><span className="pulse"></span>+48 790 419 336</span>
          <button className="btn btn-ember btn-sm" onClick={onBook}>
            Zarezerwuj kampera <window.Icon name="arrowUR" size={14} />
          </button>
        </div>
      </div>
    </header>
  );
}

window.Header = Header;