function Header({ onBook, route, navigate }) {
  const links = [
    { id: "home", label: "Home" },
    { id: "services", label: "Services" },
    { id: "about", label: "About" },
    { id: "getting-started", label: "Getting Started" },
    { id: "contact", label: "Contact" },
  ];
  const go = (e, id) => { e.preventDefault(); navigate(id); };
  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 50,
      background: "rgba(251,248,243,0.82)", backdropFilter: "blur(10px)",
      borderBottom: "1px solid var(--border-subtle)",
    }}>
      <div className="bw-header__inner">
        <a href="#" onClick={(e) => go(e, "home")} style={{ display: "flex", alignItems: "center", gap: 10, textDecoration: "none", flex: "none" }}>
          <img src="../../assets/logomark.svg" width="34" height="38" alt="" />
          <span style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 21, letterSpacing: "-0.01em" }}>
            <span style={{ color: "var(--sky-700)" }}>Bloom</span> <span style={{ color: "var(--sage-600)" }}>Well</span>
          </span>
        </a>
        <nav className="bw-header__nav">
          {links.map((l) => {
            const on = l.id === route;
            return (
              <a key={l.id} href="#" onClick={(e) => go(e, l.id)} style={{
                fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 15,
                color: on ? "var(--sky-700)" : "var(--text-muted)",
                background: on ? "var(--sky-50)" : "transparent",
                textDecoration: "none", padding: "8px 13px", borderRadius: "var(--radius-pill)",
              }}>{l.label}</a>
            );
          })}
        </nav>
        <div className="bw-header__actions">
          <a href="#" style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 15, color: "var(--text-body)", textDecoration: "none", display: "flex", alignItems: "center", gap: 6 }}>
            <Icon name="lock" size={16} /> Parent Portal
          </a>
          <Button variant="primary" size="sm" onClick={onBook} trailingIcon={<Icon name="arrow-right" size={16} />}>
            <span className="bw-header__cta-full">Schedule a consultation</span>
            <span className="bw-header__cta-short">Schedule</span>
          </Button>
        </div>
      </div>
    </header>
  );
}
window.Header = Header;