function Header({ page, onNavigate }) {
  const [hovered, setHovered] = React.useState(null);
  const links = [{ key: "home", label: "Home" },{ key: "rooms", label: "Rooms & Suites" },{ key: "experiences", label: "Experiences" },{ key: "contact", label: "Contact" }];
  return (
    <header style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "20px 48px", background: "var(--white-soft)", borderBottom: "1px solid var(--color-border)", fontFamily: "var(--font-sans-body)" }}>
      <div onClick={() => onNavigate("home")} style={{ font: "600 1.3rem/1 var(--font-serif-display)", letterSpacing: "var(--tracking-wordmark)", textTransform: "uppercase", cursor: "pointer" }}>
        The Hide <span style={{ display: "block", font: "400 0.55rem/1 var(--font-sans-body)", letterSpacing: "0.3em", textAlign: "center", marginTop: 4, color: "var(--color-text-muted)" }}>NONGOMA</span>
      </div>
      <nav style={{ display: "flex", gap: 32 }}>
        {links.map((l) => (
          <span key={l.key} onMouseEnter={() => setHovered(l.key)} onMouseLeave={() => setHovered(null)} onClick={() => onNavigate(l.key === "rooms" ? "rooms" : page)} style={{ font: "var(--text-label-md)", cursor: "pointer", color: hovered === l.key ? "var(--color-text-primary)" : "var(--color-text-secondary)", borderBottom: hovered === l.key ? "1px solid var(--color-brand-accent)" : "1px solid transparent", paddingBottom: 4 }}>{l.label}</span>
        ))}
      </nav>
      <button onClick={() => onNavigate("rooms")} style={{ background: "var(--color-brand-primary)", color: "var(--color-text-inverse)", border: "none", borderRadius: "var(--radius-md)", padding: "10px 20px", font: "var(--text-label-md)", cursor: "pointer" }}>Book Now</button>
    </header>
  );
}
window.Header = Header;