// Kotleto · top nav (responsive with mobile drawer)

function TopNav({ route, setRoute, onOpenAuth }) {
  const { lang, setLang } = useLang();
  const cart = useCart();
  const [scrolled, setScrolled] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  useEffect(() => {
    if (!mobileOpen) return;
    document.body.style.overflow = "hidden";
    const onKey = event => event.key === "Escape" && setMobileOpen(false);
    window.addEventListener("keydown", onKey);
    return () => { document.body.style.overflow = ""; window.removeEventListener("keydown", onKey); };
  }, [mobileOpen]);

  const navItems = [
    { id: "menu",  label: COPY.nav.menu,  href: "#menu" },
    { id: "story", label: COPY.nav.story, href: "#story" },
    { id: "deals", label: COPY.nav.deals, href: "#deals" },
    { id: "track", label: COPY.nav.track, href: "#track" },
    { id: "visit", label: COPY.nav.visit, href: "#visit" },
  ];

  const onAdmin = () => setRoute("admin");
  const onHome = () => { setRoute("home"); window.scrollTo({ top: 0, behavior: "smooth" }); };

  const navigateTo = (href) => {
    setMobileOpen(false);
    if (route !== "home") { setRoute("home"); }
    setTimeout(() => document.querySelector(href)?.scrollIntoView({ behavior: "smooth" }), 60);
  };

  return (
    <>
    <header style={{
      position: "sticky", top: 0, zIndex: 40,
      transition: "all .25s ease",
      background: scrolled ? "rgba(255,244,226,0.94)" : "rgba(255,244,226,0.76)",
      backdropFilter: "saturate(140%) blur(16px)",
      borderBottom: "1px solid var(--line)",
      boxShadow: scrolled ? "0 10px 35px rgba(26,20,16,.08)" : "none",
    }}>
      <Wrap className="wrap-pad nav-wrap" style={{padding:"12px 28px", display:"flex", alignItems:"center", gap: 12}}>
        <button className="nav-brand" onClick={onHome} aria-label={lang === "fa" ? "صفحه اصلی کتلتو" : "Kotleto home"} style={{display:"flex"}}>
          <KotletoMark scale={1.0}/>
        </button>

        <nav className="hide-mobile-md desktop-nav" aria-label={lang === "fa" ? "منوی اصلی" : "Main navigation"} style={{display:"flex", justifyContent:"center", gap: 2, marginInlineStart: 18, flex: 1, minWidth: 0}}>
          {navItems.map(n => (
            <a key={n.id} href={n.href} onClick={(e)=>{ e.preventDefault(); navigateTo(n.href); }}
              style={{
                padding: "10px 14px", borderRadius: 999,
                fontWeight: 650, fontSize: 13.5, whiteSpace: "nowrap",
                color: "var(--ink-2)",
              }}
              onMouseEnter={(e)=>{ e.currentTarget.style.background="rgba(26,20,16,0.06)"; }}
              onMouseLeave={(e)=>{ e.currentTarget.style.background="transparent"; }}
            ><L {...n.label}/></a>
          ))}
        </nav>

        <div style={{display:"flex", alignItems:"center", gap: 8, marginInlineStart: "auto"}}>
          {/* Lang */}
          <div className="lang-switch" aria-label={lang === "fa" ? "انتخاب زبان" : "Choose language"} style={{display:"flex", padding:3, background:"var(--paper-2)", borderRadius:999, border:"1px solid var(--line)"}}>
            {["fa","en"].map(l => (
              <button key={l} onClick={()=>setLang(l)} aria-pressed={lang === l} style={{
                padding:"6px 12px", borderRadius:999, fontWeight:700, fontSize: 13,
                background: lang===l ? "var(--ink)" : "transparent",
                color: lang===l ? "var(--paper)" : "var(--ink-3)",
                fontFamily: l === "en" ? "var(--en)" : "var(--fa)",
              }}>{l === "fa" ? "فا" : "EN"}</button>
            ))}
          </div>

          <button className="btn btn-ghost btn-sm hide-mobile" onClick={onAdmin}><Ico.Cog/><span><L {...COPY.nav.admin}/></span></button>

          {/* Cart */}
          <button onClick={()=>cart.setOpen(true)} className="btn btn-dark btn-sm" style={{position:"relative", paddingInline: 14}} aria-label={lang === "fa" ? "باز کردن سبد سفارش" : "Open order bag"}>
            <Ico.Bag/>
            {cart.count > 0 && <span className="tnum" style={{
              position:"absolute", top:-6, insetInlineEnd:-6, background:"var(--brand)",
              color:"#fff", borderRadius:999, minWidth:22, height:22, display:"grid",
              placeItems:"center", fontSize:12, fontWeight:800, border:"2px solid var(--paper)"
            }}>{lang==="fa"? toFa(cart.count) : cart.count}</span>}
          </button>

          {/* Hamburger — mobile */}
          <button
            onClick={()=>setMobileOpen(true)}
            className="show-mobile"
            aria-label={lang === "fa" ? "باز کردن منو" : "Open menu"}
            aria-expanded={mobileOpen}
            aria-controls="mobile-navigation"
            style={{
            display: "none",
            width: 44, height: 44, borderRadius: 12,
            background: "var(--ink)", color: "var(--paper)",
            alignItems: "center", justifyContent: "center",
          }}><Ico.Menu/></button>
        </div>
      </Wrap>
    </header>

      {/* Mobile drawer */}
      {mobileOpen && (
        <>
          <div aria-hidden="true" onClick={()=>setMobileOpen(false)} style={{
            position: "fixed", inset: 0, zIndex: 90,
            background: "rgba(26,20,16,0.5)", backdropFilter: "blur(4px)",
          }}/>
          <aside id="mobile-navigation" role="dialog" aria-modal="true" aria-label={lang === "fa" ? "منوی موبایل" : "Mobile navigation"} style={{
            position: "fixed", zIndex: 91, top: 0, bottom: 0, height: "100dvh",
            [lang === "fa" ? "right" : "left"]: 0,
            width: "min(340px, 88vw)",
            backgroundColor: "#FFF4E2",
            backgroundImage: "linear-gradient(160deg, #FFF9EF 0%, #FFF4E2 58%, #F7E7D2 100%)",
            padding: "22px 22px",
            display: "flex", flexDirection: "column", gap: 8,
            overflowY: "auto", overscrollBehavior: "contain",
            borderInlineStart: "1px solid rgba(26,20,16,.12)",
            boxShadow: "0 0 60px -10px rgba(0,0,0,0.5)",
            animation: "slideIn .3s ease",
          }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 22 }}>
              <KotletoMark/>
              <button onClick={()=>setMobileOpen(false)} aria-label={lang === "fa" ? "بستن منو" : "Close menu"} className="btn btn-ghost btn-sm" style={{ padding: 10, borderRadius: 999 }}>
                <Ico.X/>
              </button>
            </div>
            {navItems.map(n => (
              <button key={n.id} onClick={()=>navigateTo(n.href)} style={{
                padding: "16px 18px", borderRadius: 16,
                fontWeight: 700, fontSize: 17, textAlign: "start",
                background: "var(--paper-2)", color: "var(--ink)",
                border: "1.5px solid var(--line)",
                display: "flex", justifyContent: "space-between", alignItems: "center",
              }}>
                <L {...n.label}/>
                <Ico.Arrow/>
              </button>
            ))}
            <div style={{ marginTop: "auto", display: "flex", flexDirection: "column", gap: 10, paddingTop: 16, borderTop: "1px solid var(--line)" }}>
              <button onClick={()=>{ setMobileOpen(false); onAdmin(); }} className="btn btn-ghost"><Ico.Cog/> <L {...COPY.nav.admin}/></button>
              <button onClick={()=>{ setMobileOpen(false); document.querySelector("#menu")?.scrollIntoView({ behavior:"smooth" }); }} className="btn btn-primary btn-lg">
                <Ico.Bag/> <L {...COPY.nav.order}/>
              </button>
            </div>
          </aside>
          <style>{`@keyframes slideIn { from { transform: translateX(${lang === "fa" ? "100%" : "-100%"}); } to { transform: translateX(0); } }`}</style>
        </>
      )}
    </>
  );
}

window.TopNav = TopNav;