// Dentstyle — Header with sticky scroll + mobile drawer
const { useState: useStateH, useEffect: useEffectH } = React;

function Header({ onCta }) {
  const [scrolled, setScrolled] = useStateH(false);
  const [open, setOpen] = useStateH(false);

  useEffectH(() => {
    const onScroll = () => setScrolled(window.scrollY > 16);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

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

  const nav = [
    { label: "Inicio", href: "#hero" },
    { label: "Tratamientos", href: "#tratamientos" },
    { label: "Resultados", href: "#resultados" },
    { label: "Experiencia", href: "#experiencia" },
    { label: "Nosotros", href: "#nosotros" },
    { label: "Contacto", href: "#contacto" },
  ];

  return (
    <React.Fragment>
      <header className={`dh ${scrolled ? "scrolled" : ""}`}>
        <div className="container dh-inner">
          <a className="dh-logo" href="#hero" aria-label="Dentstyle inicio">
            <img src="assets/logo-gold.png" alt="Dentstyle" />
          </a>

          <nav className="dh-nav" aria-label="Principal">
            {nav.map((n) => (
              <a key={n.label} href={n.href}>{n.label}</a>
            ))}
          </nav>

          <a className="btn btn-primary dh-cta" href={WA_LINK} target="_blank" rel="noopener noreferrer" onClick={onCta}>
            <Icon.Whatsapp />
            <span>WhatsApp</span>
          </a>

          <button className="dh-burger" onClick={() => setOpen(true)} aria-label="Abrir menú" aria-expanded={open}>
            <Icon.Menu />
          </button>
        </div>
      </header>

      <div
        className={`dh-drawer ${open ? "open" : ""}`}
        onClick={() => setOpen(false)}
        aria-hidden={!open}
      >
        <div
          className="dh-drawer-panel"
          onClick={(e) => e.stopPropagation()}
          role="dialog"
          aria-modal="true"
          aria-label="Menú de navegación"
        >
          <div className="dh-drawer-top">
            <img src="assets/logo-gold.png" alt="Dentstyle" style={{ height: 32 }} />
            <button className="dh-burger" onClick={() => setOpen(false)} aria-label="Cerrar menú">
              <Icon.Close />
            </button>
          </div>
          <nav className="dh-drawer-nav" aria-label="Menú móvil">
            {nav.map((n) => (
              <a key={n.label} href={n.href} onClick={() => setOpen(false)}>{n.label}</a>
            ))}
          </nav>
          <div className="dh-drawer-foot">
            <a
              className="btn btn-primary"
              href={WA_LINK}
              target="_blank"
              rel="noopener noreferrer"
              onClick={() => setOpen(false)}
              style={{ width: "100%", justifyContent: "center" }}
            >
              <Icon.Whatsapp />
              <span>Agenda tu cita</span>
            </a>
            <p style={{ fontSize: 12, color: "var(--ink-mute)", marginTop: 14, textAlign: "center" }}>
              Respuesta personalizada de lunes a sábado.
            </p>
          </div>
        </div>
      </div>
    </React.Fragment>
  );
}

window.Header = Header;