/* global React */
const { useState: useNavState, useEffect: useNavEffect } = React;
const KW_BASE = (typeof window !== "undefined" && window.KW_BASE) || "";
const KW_HOME = (typeof window !== "undefined" && window.KW_HOME) || "";

function Nav({ solid = false } = {}) {
  const [scrolled, setScrolled] = useNavState(solid);
  const [open, setOpen] = useNavState(null);            // desktop dropdown key
  const [drawer, setDrawer] = useNavState(false);       // mobile drawer
  const [expand, setExpand] = useNavState(null);        // mobile accordion key

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

  // Lock body scroll while drawer is open
  useNavEffect(() => {
    document.body.style.overflow = drawer ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [drawer]);

  // Close drawer on Escape
  useNavEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") setDrawer(false); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

  const closeAll = () => { setOpen(null); setDrawer(false); setExpand(null); };
  const klass = `nav ${scrolled ? "nav--scrolled" : "nav--hero"} ${drawer ? "nav--drawer-open" : ""}`;

  return (
    <React.Fragment>
    <header className={klass}>
      <div className="nav__inner">
        <a href={KW_HOME || "#"} className="nav__logo" aria-label="K-Well home" onClick={closeAll}>
          {/* Both logos stay mounted; opacity toggles via .nav--hero / .nav--scrolled.
              This avoids a DOM swap and the layout shift that comes with it. */}
          <span className="nav__logo-hero" aria-hidden={scrolled || drawer}>
            <img src={KW_BASE + "assets/K-Well-Logo-White.svg"} alt="" width="210" height="45" />
          </span>
          <span className="nav__logo-scrolled" aria-hidden={!(scrolled || drawer)}>
            <img className="nav__logo-mark" src={KW_BASE + "assets/K-mark.svg"} alt="" width="40" height="40" />
            <span className="nav__logo-text">
              <span>K-Well</span>
              <span>한국한의원</span>
            </span>
          </span>
        </a>

        {/* Desktop menu */}
        <nav className="nav__menu">
          <div className="nav__item" onMouseLeave={() => setOpen(null)}>
            <button className="nav__btn" onMouseEnter={() => setOpen("about")} onClick={() => setOpen(open === "about" ? null : "about")}>
              About <Chevron />
            </button>
            {open === "about" && (
              <div className="nav__dropdown nav__dropdown--single" onMouseEnter={() => setOpen("about")}>
                <a className="nav__drop-link" href={KW_HOME + "#locations"}>
                  <div className="nav__drop-icon"><MapPin /></div>
                  <div>
                    <div className="nav__drop-h">Our locations</div>
                    <div className="nav__drop-sub">Downtown Vancouver · Langley</div>
                  </div>
                </a>
                <a className="nav__drop-link" href={KW_HOME + "#team"}>
                  <div className="nav__drop-icon"><Users /></div>
                  <div>
                    <div className="nav__drop-h">Our team</div>
                    <div className="nav__drop-sub">Practitioners & instructors</div>
                  </div>
                </a>
                <a className="nav__drop-link" href={KW_HOME + "#voices"}>
                  <div className="nav__drop-icon"><Sparkle /></div>
                  <div>
                    <div className="nav__drop-h">Patient reviews</div>
                    <div className="nav__drop-sub">What our patients say</div>
                  </div>
                </a>
              </div>
            )}
          </div>

          <div className="nav__item" onMouseLeave={() => setOpen(null)}>
            <button className="nav__btn" onMouseEnter={() => setOpen("svc")} onClick={() => setOpen(open === "svc" ? null : "svc")}>
              Services <Chevron />
            </button>
            {open === "svc" && (
              <div className="nav__dropdown" onMouseEnter={() => setOpen("svc")}>
                {KWELL_DATA.ways.map((w) => (
                  <a key={w.name} className="nav__drop-link" href={`${KW_BASE}services/${w.slug}.html`}>
                    <div className="nav__drop-icon">
                      <span style={{ fontFamily: "var(--kw-font-brush)", fontSize: 20 }}>{w.num}</span>
                    </div>
                    <div>
                      <div className="nav__drop-h">{w.name}</div>
                      <div className="nav__drop-sub">{w.hangul}</div>
                    </div>
                  </a>
                ))}
              </div>
            )}
          </div>

          <a href={KW_HOME + "#voices"} className="nav__btn">Stories</a>
          <div className="nav__item" onMouseLeave={() => setOpen(null)}>
            <button className="nav__btn" onMouseEnter={() => setOpen("prices")} onClick={() => setOpen(open === "prices" ? null : "prices")}>
              Prices <Chevron />
            </button>
            {open === "prices" && (
              <div className="nav__dropdown" onMouseEnter={() => setOpen("prices")}>
                {KWELL_DATA.ways.map((w) => (
                  <a key={w.name} className="nav__drop-link" href={`${KW_BASE}services/${w.slug}.html#pricing`}>
                    <div className="nav__drop-icon">
                      <span style={{ fontFamily: "var(--kw-font-brush)", fontSize: 20 }}>{w.num}</span>
                    </div>
                    <div>
                      <div className="nav__drop-h">{w.name}</div>
                      <div className="nav__drop-sub">{w.hangul}</div>
                    </div>
                  </a>
                ))}
              </div>
            )}
          </div>
          <a href={KW_BASE + "FAQ.html"} className="nav__btn">FAQ</a>
          <button
            type="button"
            className="nav__lang"
            aria-label={(typeof window !== "undefined" && window.KW_LANG === "ko") ? "Switch to English" : "한국어로 보기"}
            onClick={() => { if (typeof window !== "undefined" && window.KW_TOGGLE_LANG) window.KW_TOGGLE_LANG(); }}
          >
            {(typeof window !== "undefined" && window.KW_LANG === "ko") ? "EN" : "한국어"}
          </button>
          <a href="https://koreanclinic.janeapp.com/" target="_blank" rel="noopener" className="nav__pill">
            Book Now <ArrowUR />
          </a>
        </nav>

      </div>
    </header>

      {/* Mobile hamburger \u2014 sibling of <header> so its z-index sits ABOVE the drawer */}
      <button
        type="button"
        className={`nav__burger ${scrolled ? "nav__burger--solid" : ""} ${drawer ? "nav__burger--open" : ""}`}
        aria-label={drawer ? "Close menu" : "Open menu"}
        aria-expanded={drawer}
        onClick={() => setDrawer(!drawer)}
      >
        <span></span>
        <span></span>
        <span></span>
      </button>

      {/* Mobile drawer */}
      <div className={`drawer ${drawer ? "drawer--open" : ""}`} aria-hidden={!drawer}>
        <div className="drawer__backdrop" onClick={() => setDrawer(false)}></div>
        <aside className="drawer__panel" role="dialog" aria-label="Site navigation">
          <div className="drawer__hangul">한국한의원</div>
          <nav className="drawer__nav">

            <div className="drawer__group">
              <button
                className={`drawer__accordion ${expand === "about" ? "drawer__accordion--open" : ""}`}
                onClick={() => setExpand(expand === "about" ? null : "about")}
                aria-expanded={expand === "about"}
              >
                <span>About</span>
                <Chevron />
              </button>
              {expand === "about" && (
                <div className="drawer__panel-children">
                  <a className="drawer__sub" href={KW_HOME + "#locations"} onClick={closeAll}>
                    <span className="drawer__sub-mark"><MapPin /></span>
                    Our locations
                  </a>
                  <a className="drawer__sub" href={KW_HOME + "#team"} onClick={closeAll}>
                    <span className="drawer__sub-mark"><Users /></span>
                    Our team
                  </a>
                  <a className="drawer__sub" href={KW_HOME + "#voices"} onClick={closeAll}>
                    <span className="drawer__sub-mark"><Sparkle /></span>
                    Patient reviews
                  </a>
                </div>
              )}
            </div>

            <div className="drawer__group">
              <button
                className={`drawer__accordion ${expand === "svc" ? "drawer__accordion--open" : ""}`}
                onClick={() => setExpand(expand === "svc" ? null : "svc")}
                aria-expanded={expand === "svc"}
              >
                <span>Services</span>
                <Chevron />
              </button>
              {expand === "svc" && (
                <div className="drawer__panel-children">
                  {KWELL_DATA.ways.map((w) => (
                    <a key={w.name} className="drawer__sub" href={`${KW_BASE}services/${w.slug}.html`} onClick={closeAll}>
                      <span className="drawer__sub-mark" style={{ fontFamily: "var(--kw-font-brush)", fontSize: 18 }}>{w.num}</span>
                      {w.name} <em>{w.hangul}</em>
                    </a>
                  ))}
                </div>
              )}
            </div>

            <a href={KW_HOME + "#voices"} className="drawer__link" onClick={closeAll}>Stories</a>
            <div className="drawer__group">
              <button
                className={`drawer__accordion ${expand === "prices" ? "drawer__accordion--open" : ""}`}
                onClick={() => setExpand(expand === "prices" ? null : "prices")}
                aria-expanded={expand === "prices"}
              >
                <span>Prices</span>
                <Chevron />
              </button>
              {expand === "prices" && (
                <div className="drawer__panel-children">
                  {KWELL_DATA.ways.map((w) => (
                    <a key={w.name} className="drawer__sub" href={`${KW_BASE}services/${w.slug}.html#pricing`} onClick={closeAll}>
                      <span className="drawer__sub-mark" style={{ fontFamily: "var(--kw-font-brush)", fontSize: 18 }}>{w.num}</span>
                      {w.name} <em>{w.hangul}</em>
                    </a>
                  ))}
                </div>
              )}
            </div>
            <a href={KW_BASE + "FAQ.html"} className="drawer__link" onClick={closeAll}>FAQ</a>
          </nav>

          <div className="drawer__foot">
            <button
              type="button"
              className="drawer__lang"
              onClick={() => { if (typeof window !== "undefined" && window.KW_TOGGLE_LANG) window.KW_TOGGLE_LANG(); }}
            >
              {(typeof window !== "undefined" && window.KW_LANG === "ko") ? "View in English" : "한국어로 보기"}
            </button>
            <a href="https://koreanclinic.janeapp.com/" target="_blank" rel="noopener" className="btn btn--primary btn--lg drawer__cta">
              Book Now <ArrowUR />
            </a>
            <div className="drawer__contact">
              <a href="tel:6046990119"><Phone /> 604-699-0119</a>
              <a href="mailto:info@k-acuwellness.com"><Mail /> info@k-acuwellness.com</a>
            </div>
            <div className="drawer__hours">
              <strong>Downtown</strong>
              <span>Mon – Sat · 8:30 a.m. – 7:30 p.m.</span>
              <strong>Langley</strong>
              <span>Mon–Sat · 9 a.m. – 5:30 p.m.<br />Sun · 10 a.m. – 4 p.m.</span>
            </div>
          </div>
        </aside>
      </div>
    </React.Fragment>
  );
}

window.Nav = Nav;