background remover fix

components/portal/BuyingGuideSwitcher.tsx

@@ -5,7 +5,6 @@ import { useSearchParams, useRouter } from "next/navigation";
 import dynamic from "next/dynamic";
 import { cn } from "@/lib/utils";
 
-// these should already exist under components/buying-guide/*
 const BuyingGuideList = dynamic(
     () => import("@/components/buying-guide/BuyingGuideList"),
                                 { ssr: false }
@@ -14,36 +13,41 @@ const LaserFinderPanel = dynamic(
     () => import("@/components/buying-guide/LaserFinderPanel"),
                                  { ssr: false }
 );
+const BuyingGuideProductClient = dynamic(
+    () => import("@/components/buying-guide/BuyingGuideProductClient"),
+                                         { ssr: false }
+);
 
 const TABS = [
-    { key: "list", label: "Guide" },
+    { key: "list", label: "Buying Guide" },
 { key: "finder", label: "Laser Finder" },
-] as const;
+];
 
 export default function BuyingGuideSwitcher() {
-    const sp = useSearchParams();
+    const searchParams = useSearchParams();
     const router = useRouter();
 
-    const active = useMemo(() => {
-        const t = (sp.get("bg") || TABS[0].key).toLowerCase();
-        return TABS.some(x => x.key === t) ? t : TABS[0].key;
-    }, [sp]);
+    const active = useMemo(() => searchParams.get("tab") || "list", [searchParams]);
+    const productId = searchParams.get("product");
 
-    function setTab(k: string) {
-        const q = new URLSearchParams(sp.toString());
-        q.set("bg", k);
-        router.replace(`/portal/buying-guide?${q.toString()}`, { scroll: false });
-    }
+    const setTab = (key: string) => {
+        const sp = new URLSearchParams(Array.from(searchParams.entries()));
+        sp.set("tab", key);
+        // When changing tabs, ensure product detail (if open) is cleared
+        sp.delete("product");
+        router.push(`?${sp.toString()}`, { scroll: false });
+    };
 
     return (
         <div className="space-y-4">
-        <div className="flex gap-2">
-        {TABS.map(t => (
+        {/* Tabs */}
+        <div className="inline-flex rounded-md border overflow-hidden">
+        {TABS.map((t) => (
             <button
             key={t.key}
             onClick={() => setTab(t.key)}
             className={cn(
-                "rounded-md border px-3 py-1.5 text-sm",
+                "px-3 py-2 text-sm transition-colors",
                 active === t.key ? "bg-primary text-primary-foreground" : "hover:bg-muted"
             )}
             >
@@ -52,8 +56,15 @@ export default function BuyingGuideSwitcher() {
         ))}
         </div>
 
+        {/* Body */}
         <div className="rounded-md border p-4">
-        {active === "finder" ? <LaserFinderPanel /> : <BuyingGuideList />}
+        {productId ? (
+            <BuyingGuideProductClient />
+        ) : active === "finder" ? (
+            <LaserFinderPanel />
+        ) : (
+            <BuyingGuideList />
+        )}
         </div>
         </div>
     );