function Header({ page, setPage, showBlog = false }) {
  const [open, setOpen] = React.useState(false);

  const pages = [
    { id: "home", label: "Início" },
    { id: "services", label: "Serviços" },
    { id: "about", label: "Sobre" },
    showBlog && { id: "blog", label: "Blog" },
    { id: "contact", label: "Contato" }
  ].filter(Boolean);

  const go = (id) => {
    setOpen(false);
    setPage(id);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  React.useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [open]);

  const waLink = "https://wa.me/5522992072619?text=" +
    encodeURIComponent("Olá, tenho interesse no Condominize. Gostaria de mais informações.");

  return (
    <header className="hdr">
      <div className="container">
        <div className="hdr-inner">
          <button className="hdr-logo" onClick={() => go("home")} aria-label="Condominize — início">
            <img src="assets/logo-condominize-tight.png" alt="Condominize" />
          </button>

          <nav className="hdr-nav">
            {pages.map(p => (
              <button key={p.id}
                className={page === p.id ? "active" : ""}
                onClick={() => go(p.id)}>
                {p.label}
              </button>
            ))}
            <a className="btn btn-primary hdr-cta"
              href={waLink} target="_blank" rel="noopener">
              <Icon name="whatsapp" size={16} />
              Conversar
            </a>
          </nav>

          <button
            className={`hdr-burger ${open ? "open" : ""}`}
            aria-label={open ? "Fechar menu" : "Abrir menu"}
            aria-expanded={open}
            onClick={() => setOpen(!open)}>
            <span></span>
            <span></span>
            <span></span>
          </button>
        </div>
      </div>

      <div className={`hdr-drawer ${open ? "open" : ""}`}>
        {open && (
          <button
            className="hdr-drawer-close"
            aria-label="Fechar menu"
            onClick={() => setOpen(false)}>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M6 6 L18 18"/><path d="M18 6 L6 18"/></svg>
          </button>
        )}
        <nav className="hdr-drawer-inner">
          {pages.map(p => (
            <button key={p.id}
              className={page === p.id ? "active" : ""}
              onClick={() => go(p.id)}>
              {p.label}
            </button>
          ))}
          <a className="btn btn-primary"
            href={waLink} target="_blank" rel="noopener">
            <Icon name="whatsapp" size={18} />
            Conversar no WhatsApp
          </a>
        </nav>
      </div>
    </header>
  );
}

window.Header = Header;