/* global React */
/* Shared global navigation — sticky white bar.
   Desktop: inline links. Mobile: hamburger menu that opens a full-width panel.
*/
const { useState, useEffect, useRef } = React;

function Nav({ route, navigate }) {
  const [aboutOpen, setAboutOpen] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  const lang = (typeof window !== "undefined" && window.d52CurrentLang) ? window.d52CurrentLang() : "en";
  const aboutRef = useRef(null);

  useEffect(() => {
    const onClick = (e) => {
      if (aboutRef.current && !aboutRef.current.contains(e.target)) setAboutOpen(false);
    };
    document.addEventListener("click", onClick);
    return () => document.removeEventListener("click", onClick);
  }, []);

  // Lock body scroll when the mobile menu is open
  useEffect(() => {
    document.body.style.overflow = menuOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [menuOpen]);

  const is = (r) => route === r || (r === "about" && route === "agents");

  const go = (e, r) => { e.preventDefault(); setAboutOpen(false); setMenuOpen(false); navigate(r); };

  return (
    <header className="gnav">
      <div className="gnav-inner">
        <a className="gnav-brand notranslate" href="#/home" onClick={(e) => go(e, "home")}>
          <span className="gnav-brand-mark">D52</span>
          <span className="gnav-brand-word">District 52</span>
        </a>

        {/* Desktop links */}
        <nav className="gnav-links">
          <a href="#/home" className={"gnav-link" + (is("home") ? " active" : "")} onClick={(e) => go(e, "home")}>Home</a>
          <a href="#/opportunities" className={"gnav-link" + (is("opportunities") ? " active" : "")} onClick={(e) => go(e, "opportunities")}>Opportunities</a>
          <div ref={aboutRef} style={{ position: "relative" }}>
            <a href="#/about" className={"gnav-link" + (is("about") ? " active" : "")} onClick={(e) => { e.preventDefault(); setAboutOpen(o => !o); }}>
              About us
              <svg className="chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <polyline points="6 9 12 15 18 9"></polyline>
              </svg>
            </a>
            {aboutOpen && (
              <div className="gnav-menu" role="menu">
                <a href="#/about" onClick={(e) => go(e, "about")}>About the district</a>
                <a href="#/agents" onClick={(e) => go(e, "agents")}>Our agents</a>
              </div>
            )}
          </div>
          <a href="#/contact" className={"gnav-link" + (is("contact") ? " active" : "")} onClick={(e) => go(e, "contact")}>Contact us</a>
        </nav>

        <button
          type="button"
          className="gnav-lang gnav-login-desktop"
          onClick={() => window.d52SetLang(window.d52CurrentLang() === "es" ? "en" : "es")}
          aria-label="Translate site"
        >
          <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>
          <span className="notranslate">{lang === "es" ? "English" : "Español"}</span>
        </button>

        <a
          href="https://portal.dfwfarmersinsurance.com"
          target="_blank"
          rel="noopener noreferrer"
          className="gnav-login gnav-login-desktop"
        >
          Log In
        </a>

        {/* Mobile hamburger */}
        <button
          className="gnav-burger"
          aria-label={menuOpen ? "Close menu" : "Open menu"}
          aria-expanded={menuOpen}
          onClick={() => setMenuOpen(o => !o)}
        >
          {menuOpen ? (
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
          ) : (
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
          )}
        </button>
      </div>

      {/* Mobile menu panel */}
      {menuOpen && (
        <div className="gnav-mobile">
          <a href="#/home" className={"gnav-mobile-link" + (is("home") ? " active" : "")} onClick={(e) => go(e, "home")}>Home</a>
          <a href="#/opportunities" className={"gnav-mobile-link" + (route === "opportunities" ? " active" : "")} onClick={(e) => go(e, "opportunities")}>Opportunities</a>
          <a href="#/about" className={"gnav-mobile-link" + (route === "about" ? " active" : "")} onClick={(e) => go(e, "about")}>About us</a>
          <a href="#/agents" className={"gnav-mobile-link gnav-mobile-sub" + (route === "agents" ? " active" : "")} onClick={(e) => go(e, "agents")}>Our agents</a>
          <a href="#/contact" className={"gnav-mobile-link" + (route === "contact" ? " active" : "")} onClick={(e) => go(e, "contact")}>Contact us</a>
          <button
            type="button"
            className="gnav-mobile-link notranslate"
            style={{ textAlign: "left", background: "none", border: 0, borderBottom: "1px solid var(--color-divider-soft)", cursor: "pointer", display: "flex", alignItems: "center", gap: 8 }}
            onClick={() => window.d52SetLang(window.d52CurrentLang() === "es" ? "en" : "es")}
          >
            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>
            {lang === "es" ? "View in English" : "Ver en Español"}
          </button>
          <a
            href="https://portal.dfwfarmersinsurance.com"
            target="_blank"
            rel="noopener noreferrer"
            className="gnav-mobile-login"
            onClick={() => setMenuOpen(false)}
          >
            Log In
          </a>
        </div>
      )}
    </header>
  );
}

window.Nav = Nav;