/* nav.jsx — top nav + mobile drawer */

function Nav({ onBookClick }) {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);

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

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

  const links = [
  { href: "#servicios", label: "Servicios" },
  { href: "#resultados", label: "Resultados" },
  { href: "#doctora", label: "La doctora" },
  { href: "#educacion", label: "Educación" },
  { href: "#contacto", label: "Contacto" }];


  const go = (href) => (e) => {
    e.preventDefault();
    setOpen(false);
    const el = href === "#top" ? null : document.querySelector(href);
    if (el) {
      window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 80, behavior: "smooth" });
    } else if (href === "#top" && !window.location.hash) {
      window.scrollTo({ top: 0, behavior: "smooth" });
    } else {
      // On a subpage (article): return to the landing and scroll there once mounted.
      try { sessionStorage.setItem("vd_scrollTo", href); } catch (err) {}
      if (window.location.hash) window.location.hash = "";
    }
  };

  return (
    <React.Fragment>
      <header className={`nav ${scrolled ? "is-scrolled" : ""}`}>
        <div className="wrap nav-row">
          <a href="#top" className="brand" onClick={go("#top")}>
            <img className="brand-mark" src="assets/logo-vd-mark.png" alt="VD" />
            <span className="brand-text">
              <span className="brand-name" style={{ fontFamily: "serif" }}>Dra. Victoria D'janon</span>
              <span className="brand-sub">MEDICINA ESTÉTICA & TRICOLOGÍA · MONTERÍA</span>
            </span>
          </a>

          <nav className="nav-links" aria-label="Principal">
            {links.map((l) =>
            <a key={l.href} className="nav-link" href={l.href} onClick={go(l.href)}>{l.label}</a>
            )}
          </nav>

          <div className="nav-right">
            <a className="btn btn-ghost btn-sm nav-cta-hide" href="https://wa.me/573013083210" target="_blank" rel="noreferrer">
              WhatsApp
            </a>
            <button className="btn btn-primary btn-sm" onClick={onBookClick}>
              Agendar <Arr />
            </button>
            <button className="nav-burger" aria-label="Abrir menú" onClick={() => setOpen(true)}>
              <svg width="18" height="12" viewBox="0 0 18 12" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round">
                <path d="M1 1h16M1 6h16M1 11h10" />
              </svg>
            </button>
          </div>
        </div>
      </header>

      {/* Mobile drawer */}
      <div className={`drawer-bg ${open ? "open" : ""}`} onClick={() => setOpen(false)}></div>
      <aside className={`drawer ${open ? "open" : ""}`} aria-hidden={!open}>
        <div className="drawer-head">
          <span className="brand">
            <img className="brand-mark" src="assets/logo-vd-mark.png" alt="VD" />
            <span className="brand-text">
              <span className="brand-name">Dra. Victoria D'janon</span>
              <span className="brand-sub">Medicina Estética</span>
            </span>
          </span>
          <button onClick={() => setOpen(false)} aria-label="Cerrar" className="arrow-btn" style={{ width: 40, height: 40 }}>
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round">
              <path d="M2 2l10 10M12 2L2 12" />
            </svg>
          </button>
        </div>
        <div className="drawer-links">
          {links.map((l) =>
          <a key={l.href} className="drawer-link" href={l.href} onClick={go(l.href)}>{l.label}</a>
          )}
        </div>
        <div className="drawer-foot">
          <a className="btn btn-ghost" href="https://wa.me/573013083210" target="_blank" rel="noreferrer">WhatsApp · Atención inmediata</a>
          <button className="btn btn-primary" onClick={() => {setOpen(false);onBookClick();}}>
            Agendar valoración <Arr />
          </button>
        </div>
      </aside>
    </React.Fragment>);

}

Object.assign(window, { Nav });