/* ============================================================
   NAVIGATION — nav.jsx
   ============================================================ */
function Nav({ view, go, account }) {
  const t = useT();
  const { lang, setLang } = useLang();
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  useEffect(() => { setOpen(false); }, [view]);

  const items = [
    ["events", t("Events", "Eventos")],
    ["menu", t("Menu", "Menú")],
    ["experiences", t("Experiences", "Experiencias")],
    ["venue", t("Venue", "Venue")],
    ["store", t("Store", "Tienda")],
    ["membership", t("Membership", "Membresía")],
  ];

  const onHome = view === "home";
  const solid = scrolled || !onHome;

  return (
    <React.Fragment>
      <header className={"fixed top-0 inset-x-0 z-40 transition-all duration-500 " +
        (solid ? "py-3 bg-ink/85 backdrop-blur-xl border-b border-white/8" : "py-6")}>
        <div className="container flex items-center justify-between gap-4">
          <button onClick={() => go("home")} className="z-50 group flex items-center shrink-0">
            <img src={window.__asset ? window.__asset("assets/logo-white.png") : "assets/logo-white.png"} alt="Pink Pony Club"
              className={"w-auto object-contain drop-shadow-lg transition-all duration-500 group-hover:scale-105 " + (solid ? "h-4 md:h-5" : "h-6 md:h-7")} />
          </button>

          <nav className="hidden lg:flex items-center gap-6">
            {items.map(([id, lbl]) => (
              <button key={id} onClick={() => go(id)}
                className={"nav-link text-[12px] font-semibold uppercase tracking-[0.2em] transition-colors " +
                  (view === id ? "text-white active" : "text-white/75 hover:text-white")}>
                {lbl}
              </button>
            ))}
          </nav>

          <div className="flex items-center gap-3">
            <div className="hidden sm:flex items-center rounded-full border border-white/15 overflow-hidden text-[11px] font-bold tracking-widest">
              {["en", "es"].map((l) => (
                <button key={l} onClick={() => setLang(l)}
                  className={"px-3 py-1.5 transition-colors uppercase " + (lang === l ? "bg-white text-black" : "text-white/60 hover:text-white")}>
                  {l}
                </button>
              ))}
            </div>
            <button onClick={() => go("account")} aria-label={t("Members", "Miembros")}
              className="hidden sm:flex items-center gap-2 text-[12px] font-semibold uppercase tracking-[0.18em] text-white/85 hover:text-gold-soft transition-colors">
              <Icon name="user" className="w-4 h-4" />
              <span className="hidden md:inline">{t("Members", "Miembros")}</span>
            </button>
            <button onClick={() => go("reserve")}
              className="gbtn hidden sm:inline-flex px-5 py-2.5 rounded-full bg-coral-deep hover:bg-coral text-white text-[12px] font-bold uppercase tracking-[0.18em] transition-colors">
              {t("Reserve", "Reservar")}
            </button>
            <button onClick={() => setOpen(true)} className="lg:hidden text-white z-50 p-1" aria-label="Menu">
              <Icon name="menu" className="w-7 h-7" />
            </button>
          </div>
        </div>
      </header>

      {/* Mobile menu */}
      <div className={"fixed inset-0 z-50 bg-ink/98 backdrop-blur-xl flex-col items-center justify-center gap-7 transition-opacity duration-300 " +
        (open ? "flex opacity-100" : "hidden opacity-0")}>
        <button onClick={() => setOpen(false)} aria-label={t("Close menu", "Cerrar menú")} className="absolute top-7 right-7 text-white/70"><Icon name="x" className="w-8 h-8" /></button>
        {[["home", t("Home", "Inicio")], ...items, ["account", t("Members", "Miembros")]].map(([id, lbl]) => (
          <button key={id} onClick={() => go(id)} className="text-3xl serif-it text-white hover:text-coral transition-colors">{lbl}</button>
        ))}
        <button onClick={() => go("reserve")} className="text-4xl serif-it text-coral">{t("Reserve a Table", "Reservar Mesa")}</button>
        <div className="flex items-center rounded-full border border-white/15 overflow-hidden text-sm font-bold tracking-widest mt-4">
          {["en", "es"].map((l) => (
            <button key={l} onClick={() => setLang(l)} className={"px-5 py-2 uppercase " + (lang === l ? "bg-white text-black" : "text-white/60")}>{l}</button>
          ))}
        </div>
      </div>
    </React.Fragment>
  );
}

window.Nav = Nav;