const Navbar = ({ page, setPage, cartCount, onCartOpen, onSearchOpen, lang, setLang, user, onLogout, announcementActive }) => {
  const [menuOpen,     setMenuOpen]     = React.useState(false);
  const [userMenuOpen, setUserMenuOpen] = React.useState(false);
  const [scrolled,     setScrolled]     = React.useState(false);
  const ACCENT = "#a9744f";

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

  React.useEffect(() => {
    const handler = () => setUserMenuOpen(false);
    if (userMenuOpen) document.addEventListener("click", handler);
    return () => document.removeEventListener("click", handler);
  }, [userMenuOpen]);

  const handleLogoClick = () => { setPage("home"); setMenuOpen(false); };

  const navLinks = [
    { id:"home",    en:"Home",     id2:"Beranda" },
    { id:"catalog", en:"Products", id2:"Produk"  },
    { id:"about",   en:"About",    id2:"Tentang" },
    { id:"contact", en:"Contact",  id2:"Kontak"  },
  ];
  const t = (en, id2) => lang === "id" ? id2 : en;
  const iconBtn = { width:38, height:38, borderRadius:"50%", background:"#f5f5f7", border:"none", display:"flex", alignItems:"center", justifyContent:"center", cursor:"pointer", transition:"background 0.2s" };

  return (
    <nav style={{
      position:"fixed", top:announcementActive?38:0, left:0, right:0, zIndex:1000,
      background:"rgba(255,255,255,0.72)", backdropFilter:"saturate(180%) blur(20px)",
      borderBottom:`1px solid ${scrolled?"#ececf0":"transparent"}`,
      boxShadow: scrolled ? "0 4px 24px rgba(0,0,0,0.05)" : "none",
      fontFamily:"'Inter',sans-serif", transition:"all 0.3s"
    }}>
      <div style={{ maxWidth:1200, margin:"0 auto", padding:"0 24px", height:66, display:"flex", alignItems:"center", justifyContent:"space-between" }}>

        {/* Logo */}
        <div onClick={handleLogoClick} style={{ cursor:"pointer", display:"flex", alignItems:"center", gap:10 }}>
          <img src="uploads/logo-1777527805215.jpg" alt="LOPOBYA" style={{ height:34, width:"auto", objectFit:"contain" }} />
        </div>

        {/* Desktop Nav */}
        <div className="desktop-nav" style={{ display:"flex", alignItems:"center", gap:30 }}>
          {navLinks.map(link => (
            <button key={link.id} onClick={() => setPage(link.id)} style={{
              background:"none", border:"none", cursor:"pointer",
              fontFamily:"'Inter',sans-serif", fontSize:14, fontWeight:500,
              color:page===link.id?"#1d1d1f":"#6e6e73", transition:"color 0.2s"
            }}
            onMouseEnter={e=>e.currentTarget.style.color="#1d1d1f"}
            onMouseLeave={e=>e.currentTarget.style.color=page===link.id?"#1d1d1f":"#6e6e73"}
            >{t(link.en,link.id2)}</button>
          ))}
        </div>

        {/* Right */}
        <div style={{ display:"flex", alignItems:"center", gap:10 }}>
          {/* Lang */}
          <button onClick={() => setLang(lang==="en"?"id":"en")} style={{
            ...iconBtn, width:"auto", padding:"0 12px", height:36, fontSize:12, fontWeight:600, color:"#6e6e73"
          }}>{lang==="en"?"ID":"EN"}</button>

          {/* Search */}
          <button onClick={onSearchOpen} aria-label="Search" style={iconBtn}
            onMouseEnter={e=>e.currentTarget.style.background="#ececf0"}
            onMouseLeave={e=>e.currentTarget.style.background="#f5f5f7"}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#1d1d1f" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
              <circle cx="11" cy="11" r="7"/><path d="M21 21l-4.35-4.35"/>
            </svg>
          </button>

          {/* User */}
          {user ? (
            <div style={{ position:"relative" }} onClick={e => e.stopPropagation()}>
              <button onClick={() => setUserMenuOpen(o=>!o)} style={{ background:"none", border:"none", cursor:"pointer", display:"flex", alignItems:"center", gap:6 }}>
                <div style={{ width:36, height:36, borderRadius:"50%", background:ACCENT, color:"#fff", display:"flex", alignItems:"center", justifyContent:"center", fontFamily:"'Inter',sans-serif", fontSize:13, fontWeight:600 }}>
                  {user.name.charAt(0).toUpperCase()}
                </div>
              </button>
              {userMenuOpen && (
                <div style={{ position:"absolute", top:"calc(100% + 12px)", right:0, background:"#fff", border:"1px solid #ececf0", borderRadius:14, minWidth:190, boxShadow:"0 18px 50px rgba(20,20,30,0.12)", overflow:"hidden" }}>
                  <div style={{ padding:"14px 18px", borderBottom:"1px solid #f5f5f7" }}>
                    <p style={{ fontFamily:"'Inter',sans-serif", fontSize:14, fontWeight:600, color:"#1d1d1f" }}>{user.name}</p>
                    <p style={{ fontFamily:"'Inter',sans-serif", fontSize:12, color:"#a1a1a6", marginTop:2 }}>{user.email}</p>
                  </div>
                  <button onClick={() => { setPage("account"); setUserMenuOpen(false); }} style={{
                    display:"block", width:"100%", textAlign:"left", background:"none", border:"none", cursor:"pointer",
                    padding:"13px 18px", fontFamily:"'Inter',sans-serif", fontSize:14, color:"#1d1d1f", borderBottom:"1px solid #f5f5f7"
                  }}>👤 {t("My Account","Akun Saya")}</button>
                  <button onClick={() => { setPage("account"); setUserMenuOpen(false); }} style={{
                    display:"block", width:"100%", textAlign:"left", background:"none", border:"none", cursor:"pointer",
                    padding:"13px 18px", fontFamily:"'Inter',sans-serif", fontSize:14, color:"#1d1d1f", borderBottom:"1px solid #f5f5f7"
                  }}>📦 {t("My Orders","Pesanan Saya")}</button>
                  <button onClick={() => { onLogout(); setUserMenuOpen(false); }} style={{
                    display:"block", width:"100%", textAlign:"left", background:"none", border:"none", cursor:"pointer",
                    padding:"13px 18px", fontFamily:"'Inter',sans-serif", fontSize:14, color:"#e5484d"
                  }}>{t("Logout","Keluar")}</button>
                </div>
              )}
            </div>
          ) : (
            <button onClick={() => setPage("login")} className="lh-hide-mobile" style={{
              ...iconBtn, width:"auto", padding:"0 16px", height:36, fontSize:13, fontWeight:600, color:"#1d1d1f"
            }}>{t("Login","Masuk")}</button>
          )}

          {/* Cart */}
          <button onClick={onCartOpen} style={{
            background:"#1d1d1f", color:"#fff", border:"none", borderRadius:30, cursor:"pointer",
            padding:"9px 16px", display:"flex", alignItems:"center", gap:8,
            fontFamily:"'Inter',sans-serif", fontSize:13, fontWeight:600, transition:"transform 0.2s"
          }}
          onMouseEnter={e=>e.currentTarget.style.transform="translateY(-1px)"}
          onMouseLeave={e=>e.currentTarget.style.transform="none"}>
            {t("Bag","Tas")}
            <span style={{ background:cartCount>0?"#f0c89a":"rgba(255,255,255,0.25)", color:cartCount>0?"#1d1d1f":"#fff", borderRadius:20, fontSize:11, padding:"1px 7px", fontWeight:700, minWidth:18, textAlign:"center" }}>
              {cartCount > 9 ? "9+" : cartCount}
            </span>
          </button>

          {/* Hamburger mobile */}
          <button onClick={() => setMenuOpen(o=>!o)} className="hamburger-btn"
            style={{ background:"none", border:"none", cursor:"pointer", display:"none", flexDirection:"column", gap:5, padding:4 }}>
            <span style={{ display:"block", width:22, height:1.5, background:"#1d1d1f", transform:menuOpen?"translateY(6.5px) rotate(45deg)":"none", transition:"transform 0.25s" }} />
            <span style={{ display:"block", width:22, height:1.5, background:"#1d1d1f", opacity:menuOpen?0:1, transition:"opacity 0.25s" }} />
            <span style={{ display:"block", width:22, height:1.5, background:"#1d1d1f", transform:menuOpen?"translateY(-6.5px) rotate(-45deg)":"none", transition:"transform 0.25s" }} />
          </button>
        </div>
      </div>

      {/* Mobile menu */}
      {menuOpen && (
        <div style={{ background:"#fff", borderTop:"1px solid #ececf0", padding:"16px 24px 24px" }}>
          <button onClick={() => { onSearchOpen && onSearchOpen(); setMenuOpen(false); }} style={{
            display:"flex", alignItems:"center", gap:12, width:"100%", textAlign:"left",
            background:"#f5f5f7", border:"none", cursor:"pointer",
            fontFamily:"'Inter',sans-serif", fontSize:14, color:"#6e6e73", padding:"13px 16px", marginBottom:14, borderRadius:30
          }}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#6e6e73" strokeWidth="2" strokeLinecap="round">
              <circle cx="11" cy="11" r="7"/><path d="M21 21l-4.35-4.35"/>
            </svg>
            {t("Search products...","Cari produk...")}
          </button>
          {navLinks.map(link => (
            <button key={link.id} onClick={() => { setPage(link.id); setMenuOpen(false); }} style={{
              display:"block", width:"100%", textAlign:"left", background:"none", border:"none", cursor:"pointer",
              fontFamily:"'Inter',sans-serif", fontSize:15, fontWeight:page===link.id?600:500,
              color:page===link.id?"#1d1d1f":"#6e6e73", padding:"14px 0", borderBottom:"1px solid #f5f5f7"
            }}>{t(link.en,link.id2)}</button>
          ))}
          <div style={{ marginTop:16 }}>
            {user ? (
              <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center" }}>
                <span style={{ fontFamily:"'Inter',sans-serif", fontSize:14, color:"#1d1d1f" }}>👤 {user.name}</span>
                <button onClick={() => { onLogout(); setMenuOpen(false); }} style={{ background:"none", border:"none", cursor:"pointer", fontSize:13, color:"#e5484d" }}>{t("Logout","Keluar")}</button>
              </div>
            ) : (
              <button onClick={() => { setPage("login"); setMenuOpen(false); }} style={{
                width:"100%", padding:"13px", background:"#1d1d1f", color:"#fff",
                border:"none", borderRadius:30, cursor:"pointer", fontFamily:"'Inter',sans-serif",
                fontSize:14, fontWeight:600
              }}>{t("Login","Masuk")}</button>
            )}
          </div>
        </div>
      )}
    </nav>
  );
};
Object.assign(window, { Navbar });
