feat: hide all demo badges when demo mode is disabled

shop/components/NavbarClient.tsx

@@ -9,6 +9,7 @@ import { Rocket, Menu, X, User as UserIcon, LogOut } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { signOut } from "@/lib/actions/auth";
 import { resolveSupabaseUrl } from "@/lib/utils";
+import { DemoWrapper } from "./DemoWrapper";
 
 interface NavbarClientProps {
   user: User | null;
@@ -71,18 +72,6 @@ export function NavbarClient({ user, role = "partner" }: NavbarClientProps) {
     };
   }, [supabase]);
 
-  useEffect(() => {
-    const checkBanner = () => {
-      const disabled = localStorage.getItem('demo_banner_disabled') === 'true';
-      const banner = document.getElementById('demo-banner');
-      if (banner) banner.style.display = disabled ? 'none' : 'block';
-    };
-
-    checkBanner();
-    window.addEventListener('storage_demo_changed', checkBanner);
-    return () => window.removeEventListener('storage_demo_changed', checkBanner);
-  }, []);
-
   const handleSignOut = async () => {
     try {
       await signOut();
@@ -101,9 +90,11 @@ export function NavbarClient({ user, role = "partner" }: NavbarClientProps) {
       <header className="px-4 lg:px-6 h-16 flex items-center justify-between border-b border-white/5 backdrop-blur-md sticky top-0 z-50 bg-[#020617]/85">
         <Link className="flex items-center justify-center gap-2 group" href="/">
           <span className="font-bold text-xl tracking-tighter text-white">CASPOS Store</span>
-          <span className="text-[10px] bg-amber-500/20 text-amber-400 px-2 py-0.5 rounded-full font-semibold uppercase tracking-wider border border-amber-500/30">
-            Demo
-          </span>
+          <DemoWrapper>
+            <span className="text-[10px] bg-amber-500/20 text-amber-400 px-2 py-0.5 rounded-full font-semibold uppercase tracking-wider border border-amber-500/30">
+              Demo
+            </span>
+          </DemoWrapper>
         </Link>
 
         {/* Desktop Navigation */}