/* global React, IconPhone, IconArrow, IconMenu */

const NAV = [
  { id: "home", label: "Home" },
  { id: "treatments", label: "Treatments" },
  { id: "dentists", label: "Our Dentists" },
  { id: "reviews", label: "Reviews" },
  { id: "contact", label: "Contact" }
];

function Header({ activeId, onNav, onBook }) {
  const [stuck, setStuck] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setStuck(window.scrollY > 20);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <header className={"hdr" + (stuck ? " is-stuck" : "")}>
      <div className="container hdr__inner">
        <a className="hdr__brand" href="#home" onClick={(e) => { e.preventDefault(); onNav("home"); }}>
          <img src="media/logo.webp" alt="Empire Dental Clinic" />
        </a>
        <nav className="hdr__nav" aria-label="Primary">
          {NAV.map(n => (
            <button
              key={n.id}
              className={activeId === n.id ? "is-active" : ""}
              onClick={() => onNav(n.id)}
            >{n.label}</button>
          ))}
        </nav>
        <div className="hdr__cta">
          <a className="hdr__phone" href={CLINIC.phoneHref}>
            <IconPhone size={14} /> {CLINIC.phone}
          </a>
          <button className="btn btn--primary btn--sm" onClick={onBook}>
            Book a Consultation <IconArrow size={14} />
          </button>
        </div>
      </div>
    </header>
  );
}

window.Header = Header;