feat: Add randomization toggle and emoji buttons to BinarySearchTrick

- Add toggle switch to control randomized vs ordered numbers
- Replace 'Present' and 'Absent' buttons with ✅ and ❌ emojis
- Fix copy link functionality by adding proper URL parameter
- Improve user experience with better visual indicators

src/components/BinarySearchTrick.tsx

@@ -16,6 +16,7 @@ const BinarySearchTrick = ({ showSocialShare = true }: BinarySearchTrickProps) =
   const [result, setResult] = useState<number | null>(null);
   const [showResult, setShowResult] = useState(false);
   const [isOneByOne, setIsOneByOne] = useState(false);
+  const [isRandomized, setIsRandomized] = useState(true);
   const [currentCardIndex, setCurrentCardIndex] = useState(0);
   const [cards, setCards] = useState<Array<{id: number; title: string; numbers: number[]}>>([]);
 
@@ -29,7 +30,7 @@ const BinarySearchTrick = ({ showSocialShare = true }: BinarySearchTrickProps) =
     return shuffled;
   };
 
-  // Generate cards with randomized numbers but maintaining binary logic
+  // Generate cards with optional randomization
   const generateCards = () => {
     const baseCards = [
       {
@@ -59,17 +60,17 @@ const BinarySearchTrick = ({ showSocialShare = true }: BinarySearchTrickProps) =
       }
     ];
 
-    // Randomize the order of numbers within each card
+    // Apply randomization based on toggle state
     return baseCards.map(card => ({
       ...card,
-      numbers: shuffleArray(card.numbers)
+      numbers: isRandomized ? shuffleArray(card.numbers) : card.numbers
     }));
   };
 
   // Initialize cards on component mount
   useEffect(() => {
     setCards(generateCards());
-  }, []);
+  }, [isRandomized]);
 
   // Handle mode toggle
   const handleModeToggle = (checked: boolean) => {
@@ -79,6 +80,14 @@ const BinarySearchTrick = ({ showSocialShare = true }: BinarySearchTrickProps) =
     setShowResult(false);
   };
 
+  // Handle randomization toggle
+  const handleRandomizationToggle = (checked: boolean) => {
+    setIsRandomized(checked);
+    setCardStates({});
+    setShowResult(false);
+    setCurrentCardIndex(0);
+  };
+
   // Navigation functions for one-by-one mode
   const goToPreviousCard = () => {
     setCurrentCardIndex(prev => Math.max(0, prev - 1));
@@ -109,7 +118,7 @@ const BinarySearchTrick = ({ showSocialShare = true }: BinarySearchTrickProps) =
     setResult(null);
     setShowResult(false);
     setCurrentCardIndex(0);
-    setCards(generateCards()); // Regenerate with new randomized order
+    setCards(generateCards()); // Regenerate with current randomization setting
   };
 
   // Check if at least one card has been selected (present or absent)
@@ -201,6 +210,20 @@ const BinarySearchTrick = ({ showSocialShare = true }: BinarySearchTrickProps) =
                 One by one
               </Label>
             </div>
+
+            <div className="flex items-center justify-center gap-3 pt-4">
+              <Label htmlFor="randomization-toggle" className="text-sm font-medium">
+                Randomize numbers
+              </Label>
+              <Switch
+                id="randomization-toggle"
+                checked={isRandomized}
+                onCheckedChange={handleRandomizationToggle}
+              />
+              <Label htmlFor="randomization-toggle" className="text-sm font-medium">
+                Ordered numbers
+              </Label>
+            </div>
           </div>
         </CardContent>
       </Card>
@@ -259,14 +282,14 @@ const BinarySearchTrick = ({ showSocialShare = true }: BinarySearchTrickProps) =
                       variant={cardState === 'present' ? 'default' : 'outline'}
                       onClick={() => handleCardSelection(card.id, 'present')}
                     >
-                      Present
+                      ✅
                     </Button>
                     <Button
                       size="sm"
                       variant={cardState === 'absent' ? 'destructive' : 'outline'}
                       onClick={() => handleCardSelection(card.id, 'absent')}
                     >
-                      Absent
+                      ❌
                     </Button>
                   </div>
                 </div>
@@ -326,6 +349,7 @@ const BinarySearchTrick = ({ showSocialShare = true }: BinarySearchTrickProps) =
             <SocialShare 
               title="Binary Search Magic Trick"
               description="Learn how binary numbers work through this amazing magic trick! Can you figure out how it works?"
+              url={`${window.location.origin}/binary-search-trick`}
             />
           </div>
         )}