/* global React */
function Nav({ active }) {
  const { t, lang, setLang } = window.useT();
  const [openMenu, setOpenMenu] = React.useState(null); // 'services' | 'lang' | 'mobile' | null
  const rootRef = React.useRef(null);

  // Close desktop dropdowns on outside click (not mobile panel)
  React.useEffect(() => {
    function onDoc(e) {
      if (!rootRef.current) return;
      if (!rootRef.current.contains(e.target)) {
        setOpenMenu(prev => prev === 'mobile' ? prev : null);
      }
    }
    document.addEventListener("mousedown", onDoc);
    return () => document.removeEventListener("mousedown", onDoc);
  }, []);

  // Lock body scroll + signal open state when mobile menu is open
  React.useEffect(() => {
    const isOpen = openMenu === 'mobile';
    document.body.style.overflow = isOpen ? 'hidden' : '';
    document.body.classList.toggle('vsc-menu-open', isOpen);
    return () => {
      document.body.style.overflow = '';
      document.body.classList.remove('vsc-menu-open');
    };
  }, [openMenu]);

  const toggle = (k) => setOpenMenu((cur) => (cur === k ? null : k));
  const closeMobile = () => setOpenMenu(null);
  const isServices = active === "services" || active === "massages" || active === "facials" || active === "waxing";
  const isMobileOpen = openMenu === 'mobile';

  return (
    <header className="vsc-nav" data-screen-label="Nav" ref={rootRef}>
      <div className="vsc-nav-inner">
        <a className="vsc-nav-logo" href="index.html" aria-label="Victoria Skincare — home">
          <img src="assets/logo-color.webp" alt="Victoria Skincare Curaçao" />
        </a>

        {/* Desktop nav */}
        <nav aria-label="Primary">
          <ul className="vsc-nav-links">
            <li>
              <a href="index.html" className={active === "home" ? "is-active" : ""}>{t("nav.home")}</a>
            </li>
            <li className={"vsc-nav-drop " + (openMenu === "services" ? "is-open" : "")}>
              <button
                type="button"
                aria-haspopup="true"
                aria-expanded={openMenu === "services"}
                className={isServices ? "is-active" : ""}
                onClick={() => toggle("services")}
              >
                {t("nav.services")}
                <span className="chev" aria-hidden="true"></span>
              </button>
              <ul>
                <li><a href="massages.html">{t("nav.services.massages")}<small>60 — 90 min</small></a></li>
                <li><a href="facials.html">{t("nav.services.facials")}<small>45 — 90 min</small></a></li>
                <li><a href="waxing.html">{t("nav.services.waxing")}<small>20 — 45 min</small></a></li>
              </ul>
            </li>
            <li><a href="about.html" className={active === "about" ? "is-active" : ""}>{t("nav.about")}</a></li>
            <li><a href="contact.html" className={active === "contact" ? "is-active" : ""}>{t("nav.contact")}</a></li>
          </ul>
        </nav>

        {/* Desktop right */}
        <div className="vsc-nav-right">
          <div className={"vsc-lang " + (openMenu === "lang" ? "is-open" : "")}>
            <button type="button" onClick={() => toggle("lang")} aria-haspopup="true" aria-expanded={openMenu === "lang"}>
              <span className="globe" aria-hidden="true"></span>
              {lang.toUpperCase()}
              <span className="chev" aria-hidden="true" style={{width:7,height:7,borderRight:'1.2px solid currentColor',borderBottom:'1.2px solid currentColor',transform:'rotate(45deg)',marginTop:-3,display:'inline-block'}}></span>
            </button>
            <ul>
              <li>
                <button type="button" className={lang === "en" ? "is-active" : ""} onClick={() => { setLang("en"); setOpenMenu(null); }}>
                  {t("common.lang_en")}<span className="code">EN</span>
                </button>
              </li>
              <li>
                <button type="button" className={lang === "es" ? "is-active" : ""} onClick={() => { setLang("es"); setOpenMenu(null); }}>
                  {t("common.lang_es")}<span className="code">ES</span>
                </button>
              </li>
            </ul>
          </div>
          <BookBtn>{t("common.book_short")}</BookBtn>

          {/* Hamburger button */}
          <button
            type="button"
            className={"vsc-hamburger " + (isMobileOpen ? "is-open" : "")}
            onClick={() => toggle("mobile")}
            aria-label={isMobileOpen ? "Close menu" : "Open menu"}
            aria-expanded={isMobileOpen}
          >
            <span></span>
            <span></span>
            <span></span>
          </button>
        </div>
      </div>

      {/* Mobile nav panel */}
      <div className={"vsc-mobile-nav " + (isMobileOpen ? "is-open" : "")} aria-hidden={!isMobileOpen}>
        <div className="vsc-mobile-nav-backdrop" onClick={closeMobile} aria-hidden="true" />
        <div className="vsc-mobile-nav-panel" role="dialog" aria-label="Navigation menu">
          {/* Panel header */}
          <div className="vsc-mobile-nav-header">
            <img src="assets/logo-color.webp" alt="Victoria Skincare" />
            <button type="button" className="vsc-mobile-nav-close" onClick={closeMobile} aria-label="Close menu">
              ×
            </button>
          </div>

          {/* Nav links */}
          <ul className="vsc-mobile-nav-links">
            <li>
              <a href="index.html" className={active === "home" ? "is-active" : ""} onClick={closeMobile}>
                {t("nav.home")}
              </a>
            </li>
            <li className="vsc-mobile-nav-group">
              <span className="vsc-mobile-nav-label">{t("nav.services")}</span>
              <ul className="vsc-mobile-nav-sub">
                <li>
                  <a href="massages.html" onClick={closeMobile}>
                    {t("nav.services.massages")}
                    <small>60 — 90 min</small>
                  </a>
                </li>
                <li>
                  <a href="facials.html" onClick={closeMobile}>
                    {t("nav.services.facials")}
                    <small>45 — 90 min</small>
                  </a>
                </li>
                <li>
                  <a href="waxing.html" onClick={closeMobile}>
                    {t("nav.services.waxing")}
                    <small>20 — 45 min</small>
                  </a>
                </li>
              </ul>
            </li>
            <li>
              <a href="about.html" className={active === "about" ? "is-active" : ""} onClick={closeMobile}>
                {t("nav.about")}
              </a>
            </li>
            <li>
              <a href="contact.html" className={active === "contact" ? "is-active" : ""} onClick={closeMobile}>
                {t("nav.contact")}
              </a>
            </li>
          </ul>

          {/* Panel footer */}
          <div className="vsc-mobile-nav-footer">
            <BookBtn className="vsc-btn vsc-btn-primary">{t("common.book_now")}</BookBtn>
            <a className="vsc-btn vsc-btn-ghost" href="https://wa.me/59995279021" target="_blank" rel="noopener noreferrer">
              WhatsApp
            </a>
            <div className="vsc-mobile-nav-lang">
              <button type="button" className={lang === "en" ? "is-active" : ""} onClick={() => { setLang("en"); closeMobile(); }}>
                {t("common.lang_en")} · EN
              </button>
              <span className="sep">|</span>
              <button type="button" className={lang === "es" ? "is-active" : ""} onClick={() => { setLang("es"); closeMobile(); }}>
                {t("common.lang_es")} · ES
              </button>
            </div>
          </div>
        </div>
      </div>
    </header>
  );
}
window.Nav = Nav;