Refactor interactive links

Update interactive links to generate unique URLs and categorize the pebble placement interactive under "Puzzles" while removing it from "DSA" and "Games".

src/App.tsx

@@ -50,6 +50,7 @@ import SunnyLinesPuzzlePage from './pages/SunnyLinesPuzzlePage';
 import SikiniaParliamentPuzzlePage from './pages/SikiniaParliamentPuzzlePage';
 import NQueensPuzzlePage from './pages/NQueensPuzzlePage';
 import RulesOfInferencePlaygroundPage from './pages/RulesOfInferencePlaygroundPage';
+import PebblePlacementGamePage from './pages/PebblePlacementGamePage';
 
 const queryClient = new QueryClient();
 
@@ -102,6 +103,7 @@ const App = () => (
           <Route path="/games/nim" element={<NimGamePage />} />
           <Route path="/games/assisted-nim" element={<AssistedNimGamePage />} />
                   <Route path="/games/gold-coin" element={<GoldCoinGamePage />} />
+        <Route path="/puzzles/pebble-placement" element={<PebblePlacementGamePage />} />
         <Route path="/puzzles/sikinia-parliament" element={<SikiniaParliamentPuzzlePage />} />
         <Route path="/puzzles/plate-swap" element={<PlateSwapPuzzlePage />} />
         <Route path="/puzzles/chessboard-repaint" element={<ChessboardRepaintPuzzlePage />} />

src/components/GamesGallery.tsx

@@ -10,7 +10,6 @@ import NimGame from '@/components/NimGame';
 import AssistedNimGame from '@/components/AssistedNimGame';
 import GoldCoinGame from '@/components/GoldCoinGame';
 import GuessingGame from '@/components/GuessingGame';
-import PebblePlacementGame from '@/components/PebblePlacementGame';
 
 interface Game {
   id: string;
@@ -21,13 +20,6 @@ interface Game {
 }
 
 const games: Game[] = [
-  {
-    id: 'pebble-placement-game',
-    title: 'Pebble Placement Strategy Game',
-    description: 'Test your strategic thinking! Place pebbles following specific rules to reach the furthest position possible.',
-    tags: ['strategy', 'logic', 'game', 'placement', 'optimization', 'puzzle'],
-    component: PebblePlacementGame
-  },
   {
     id: 'guessing-game',
     title: 'Number Guessing Game',

src/components/InteractiveGallery.tsx

@@ -7,7 +7,6 @@ import Layout from '@/components/Layout';
 import BinarySearchTrick from '@/components/BinarySearchTrick';
 import TernarySearchTrick from '@/components/TernarySearchTrick';
 import GuessingGame from '@/components/GuessingGame';
-import PebblePlacementGame from '@/components/PebblePlacementGame';
 
 interface Interactive {
   id: string;
@@ -39,13 +38,6 @@ const interactives: Interactive[] = [
     tags: ['ternary', 'magic', 'numbers', 'trick', 'data-structures', 'search'],
     component: TernarySearchTrick
   },
-  {
-    id: 'pebble-placement-game',
-    title: 'Pebble Placement Strategy Game',
-    description: 'Test your strategic thinking! Place pebbles following specific rules to reach the furthest position possible.',
-    tags: ['strategy', 'logic', 'game', 'placement', 'optimization', 'puzzle'],
-    component: PebblePlacementGame
-  },
 ];
 const InteractiveGallery = () => {
   const [searchTerm, setSearchTerm] = useState('');

src/pages/PebblePlacementGamePage.tsx

@@ -0,0 +1,7 @@
+import PebblePlacementGame from "@/components/PebblePlacementGame";
+
+const PebblePlacementGamePage = () => {
+  return <PebblePlacementGame showSocialShare={true} />;
+};
+
+export default PebblePlacementGamePage;

src/pages/theme-pages/Puzzles.tsx

@@ -6,6 +6,16 @@ const Puzzles = () => {
   const navigate = useNavigate();
   
   const puzzles = [
+    {
+      id: "pebble-placement",
+      title: "Pebble Placement Strategy Game",
+      description: "Place pebbles following specific rules to reach the furthest position possible. A strategic optimization puzzle!",
+      path: "/puzzles/pebble-placement",
+      tags: ["Strategy", "Logic", "Placement", "Optimization"],
+      difficulty: "Intermediate" as const,
+      duration: "5-15 min",
+      participants: "1 player"
+    },
     {
       id: "sikinia-parliament",
       title: "Parliament of Sikinia Puzzle",