/* Nav - sticky top bar.
   Desktop: brand · [Compare courses · Daily Digest links] · Sign in button.
   Mobile: brand + hamburger only; drawer holds Compare courses, Daily Digest,
   Free guide, Sign in. */

function Nav({ route, onNavigate, onOpenChat }) {
  const [menuOpen, setMenuOpen] = React.useState(false);
  const [user, setUser] = React.useState(window.TRAuth ? window.TRAuth.user : null);

  React.useEffect(() => {
    if (!window.TRAuth) return;
    return window.TRAuth.onChange(setUser);
  }, []);

  function openAuth() { setMenuOpen(false); if (window.TRAuth) window.TRAuth.openModal(); }
  function signOut() { setMenuOpen(false); if (window.TRAuth) window.TRAuth.signOut(); }

  function go(r) { setMenuOpen(false); onNavigate(r); }
  function goCompare() { setMenuOpen(false); window.location.href = "compare.html"; }
  function openGuide() { setMenuOpen(false); window.location.href = "/guide/how-to-navigate-fitness-career-dubai/"; }

  const coursesActive = route === "directory" || route === "course";
  const newsActive = route === "news" || route === "article";

  return (
    <React.Fragment>

      <nav className="tr-nav">
        <div className="container tr-nav-inner">
          <a className="tr-nav-brand" onClick={() => go("home")} style={{ cursor: "pointer" }}>
            <span style={{ color: "var(--tr-brand-500)", fontWeight: 700, marginRight: 7 }}>[tr]</span>
            <span style={{ letterSpacing: "0.01em" }}>Trainer&nbsp;Registry</span>
          </a>
          <span className="tr-nav-spacer"></span>

          <div className="tr-nav-cta">
            <div className="tr-nav-links">
              <a className={coursesActive ? "is-active" : ""} onClick={goCompare} style={{ cursor: "pointer" }}>Compare&nbsp;courses</a>
              <a className={newsActive ? "is-active" : ""} onClick={() => go("news")} style={{ cursor: "pointer" }}>Daily&nbsp;Digest</a>
            </div>
            <span className="tr-nav-div"></span>
            <button className="tr-btn tr-btn-primary tr-btn-sm" onClick={user ? signOut : openAuth} title={user ? (user.email || "Account") : "Sign in"}>{user ? "Sign out" : "Sign in"}</button>
          </div>

          <button
            className={"tr-nav-burger" + (menuOpen ? " is-open" : "")}
            aria-label="Menu"
            aria-expanded={menuOpen}
            onClick={() => setMenuOpen((o) => !o)}
          >
            <span></span><span></span><span></span>
          </button>
        </div>

        <div className={"tr-drawer" + (menuOpen ? " is-open" : "")}>
          <a className={coursesActive ? "is-active" : ""} onClick={goCompare}>Compare courses<Icon name="chevron-right" size={18} /></a>
          <a className={newsActive ? "is-active" : ""} onClick={() => go("news")}>Daily Digest<Icon name="chevron-right" size={18} /></a>
          <a onClick={openGuide}>Free guide<Icon name="chevron-right" size={18} /></a>
          <button className="tr-btn tr-btn-primary tr-drawer-signin" onClick={user ? signOut : openAuth}>{user ? "Sign out" : "Sign in"}</button>
        </div>
      </nav>
    </React.Fragment>
  );
}

window.Nav = Nav;