/* Navigation bar + mobile menu */
function Logo() {
  return (
    <a href="/" className="po-logo" aria-label="beHired home">
      <img className="po-logo-mark" src="/logo.svg" alt="" width="32" height="32" />
      <span className="po-word" aria-hidden="true">beH<span className="po-word-i">&#x0131;</span>red</span>
    </a>
  );
}

// Top-level locations, highlighted by where the user currently is.
const NAV_LINKS = [
  { href: "/", label: "Home", active: (r) => !r || r.name === "landing" },
  { href: "/learn/module-1", label: "Modules", active: (r) => !!r && r.name === "lesson" },
  { href: "/checkout", label: "Enroll", active: (r) => !!r && (r.name === "checkout" || r.name === "success") },
];

// the signed-in user's avatar (Google picture, or initial fallback)
function NavAvatar({ user }) {
  if (user.picture) return <img src={user.picture} alt="" className="po-nav-avatar" referrerPolicy="no-referrer" />;
  const initial = (user.name || user.email || "?").trim().charAt(0).toUpperCase();
  return <span className="po-nav-avatar po-nav-avatar-fallback">{initial}</span>;
}

function Nav({ route }) {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  const user = useUser();
  const paid = !!(user && user.paid);
  const onLanding = !route || route.name === "landing";
  const firstName = user ? (user.name || "").split(" ")[0] || "Account" : null;
  // once purchased, drop the "Enroll" link
  const links = NAV_LINKS.filter((l) => !(paid && l.label === "Enroll"));
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 14);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  useEffect(() => { document.body.style.overflow = open ? "hidden" : ""; }, [open]);

  return (
    <header className={"po-nav" + (scrolled ? " is-scrolled" : "")}>
      <div className="wrap po-nav-row">
        <div className="po-nav-left">
          <Logo />
          <nav className="po-nav-links" aria-label="Primary">
            {links.map((l) => {
              const on = l.active(route);
              return <a key={l.href} href={l.href} className={on ? "is-active" : ""} aria-current={on ? "page" : undefined}>{l.label}</a>;
            })}
          </nav>
        </div>
        <div className="po-nav-cta">
          {user
            ? <a href="/signup" className="po-nav-user" title={user.email}><NavAvatar user={user} /><span className="po-nav-uname">{firstName}</span></a>
            : <a href="/signup" className="po-signin">Sign in</a>}
          {onLanding && <a href="/learn/module-1" className="btn btn-primary">Go to Modules <Icon name="arrow" size={17} /></a>}
        </div>
        <button className="po-burger" aria-label="Menu" aria-expanded={open} onClick={() => setOpen((v) => !v)}>
          <Icon name={open ? "close" : "menu"} size={24} />
        </button>
      </div>

      <div className={"po-mobile" + (open ? " open" : "")} onClick={() => setOpen(false)}>
        <div className="po-mobile-inner" onClick={(e) => e.stopPropagation()}>
          {links.map((l) => {
            const on = l.active(route);
            return <a key={l.href} href={l.href} className={on ? "is-active" : ""} onClick={() => setOpen(false)}>{l.label}<Icon name="arrow" size={18} /></a>;
          })}
          {user
            ? <a href="/signup" className="is-active" onClick={() => setOpen(false)}>Signed in · {firstName}<Icon name="user" size={18} /></a>
            : <a href="/signup" onClick={() => setOpen(false)}>Sign in<Icon name="arrow" size={18} /></a>}
          {onLanding && <a href="/learn/module-1" className="btn btn-primary po-mobile-start" onClick={() => setOpen(false)}>Go to Modules</a>}
        </div>
      </div>
    </header>
  );
}

window.Nav = Nav;