function Header({ onBook, route, navigate }) {
  const disciplines = [
    { id: "speech-therapy", label: "Speech Therapy", icon: "messages-square", tone: "sky" },
    { id: "occupational-therapy", label: "Occupational Therapy", icon: "puzzle", tone: "sage", soon: true },
    { id: "physical-therapy", label: "Physical Therapy", icon: "footprints", tone: "honey", soon: true },
    { id: "feeding-therapy", label: "Feeding Therapy", icon: "utensils", tone: "blush", soon: true },
  ];
  const links = [
    { id: "home", label: "Home" },
    { id: "services", label: "Services", children: disciplines },
    { id: "about", label: "About" },
    { id: "getting-started", label: "Getting Started" },
    { id: "contact", label: "Contact" },
  ];
  const toneBg = { sky: "var(--sky-100)", sage: "var(--sage-100)", honey: "var(--honey-100)", blush: "var(--blush-100)" };
  const toneFg = { sky: "var(--sky-600)", sage: "var(--sage-600)", honey: "var(--honey-600)", blush: "var(--blush-500)" };
  const path = (id) => (window.ROUTE_PATHS && window.ROUTE_PATHS[id]) || "#";
  const go = (e, id) => { e.preventDefault(); navigate(id); };
  // Close the hover menu after a jump so it doesn't hang open under the cursor.
  const goAndBlur = (e, id) => {
    e.preventDefault();
    if (e.currentTarget && e.currentTarget.blur) e.currentTarget.blur();
    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 childIds = l.children ? l.children.map((c) => c.id) : [];
            const on = l.id === route || childIds.includes(route);
            const linkStyle = {
              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)",
            };
            if (!l.children) {
              return <a key={l.id} href={path(l.id)} onClick={(e) => go(e, l.id)} style={linkStyle}>{l.label}</a>;
            }
            return (
              <div key={l.id} className="bw-nav__group">
                <a href={path(l.id)} onClick={(e) => go(e, l.id)} style={{ ...linkStyle, gap: 5 }}>
                  {l.label}
                  <Icon name="chevron-down" size={15} style={{ marginTop: 1 }} />
                </a>
                <div className="bw-nav__menu" role="group" aria-label="Services">
                  {l.children.map((c) => (
                    <a key={c.id} href={path(c.id)} onClick={(e) => goAndBlur(e, c.id)}
                       className={c.id === route ? "is-current" : undefined}>
                      <span className="bw-nav__menu-icon" style={{ background: toneBg[c.tone], color: toneFg[c.tone] }}>
                        <Icon name={c.icon} size={17} />
                      </span>
                      <span className="bw-nav__menu-label">
                        {c.label}
                        {c.soon && <span className="bw-soon bw-soon--sm">Soon</span>}
                      </span>
                    </a>
                  ))}
                  <a href={path("services")} onClick={(e) => goAndBlur(e, "services")} className="bw-nav__menu-all">
                    All programs <Icon name="arrow-right" size={15} />
                  </a>
                </div>
              </div>
            );
          })}
        </nav>
        <div className="bw-header__actions">
          <a href="#" onClick={(e) => e.preventDefault()} 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;