From 4e2e099094e2228741847d1ac388facf2a7ae4f8 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Wed, 21 Jan 2026 15:45:45 +0000
Subject: [PATCH] Changes

---
 src/App.tsx                           |   2 +
 src/components/InteractiveIndex.tsx   |   9 +
 src/components/LadybugClockPuzzle.tsx | 704 ++++++++++++++++++++++++++
 src/pages/LadybugClockPuzzlePage.tsx  |  30 ++
 src/pages/theme-pages/Puzzles.tsx     |  10 +
 5 files changed, 755 insertions(+)
 create mode 100644 src/components/LadybugClockPuzzle.tsx
 create mode 100644 src/pages/LadybugClockPuzzlePage.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 37d4718..55ab15d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -66,6 +66,7 @@ import RentDivisionPuzzlePage from './pages/RentDivisionPuzzlePage';
 import BagchalGamePage from './pages/BagchalGamePage';
 import AscDescGridPuzzlePage from './pages/AscDescGridPuzzlePage';
 import EternalDominationGamePage from './pages/EternalDominationGamePage';
+import LadybugClockPuzzlePage from './pages/LadybugClockPuzzlePage';
 
 const queryClient = new QueryClient();
 
@@ -142,6 +143,7 @@ const App = () => (
         <Route path="/puzzles/n-queens" element={<NQueensPuzzlePage />} />
         <Route path="/puzzles/domino-retiling" element={<DominoRetilingPuzzlePage />} />
         <Route path="/puzzles/asc-desc-grid" element={<AscDescGridPuzzlePage />} />
+        <Route path="/puzzles/ladybug-clock" element={<LadybugClockPuzzlePage />} />
         <Route path="/discrete-math/foundations/zeckendorf" element={<ZeckendorfGamePage />} />
         <Route path="/discrete-math/foundations/zeckendorf-search" element={<ZeckendorfSearchTrickPage />} />
         <Route path="/discrete-math/foundations/rules-of-inference" element={<RulesOfInferencePlaygroundPage />} />
diff --git a/src/components/InteractiveIndex.tsx b/src/components/InteractiveIndex.tsx
index 799694d..a9ce43c 100644
--- a/src/components/InteractiveIndex.tsx
+++ b/src/components/InteractiveIndex.tsx
@@ -279,6 +279,15 @@ const allInteractives: Interactive[] = [
     path: '/themes/discrete-math/uncertainty/presents-puzzle',
     theme: 'Discrete Math',
     dateAdded: '2025-11-19'
+  },
+  {
+    id: 'ladybug-clock',
+    title: 'The Ladybug Clock Puzzle',
+    description: 'A ladybug walks randomly on a clock face. Discover the surprising probability that any given number is painted last!',
+    tags: ['probability', 'random-walk', 'simulation', 'statistics', 'cover-time', 'puzzle'],
+    path: '/puzzles/ladybug-clock',
+    theme: 'Puzzles',
+    dateAdded: '2025-01-21'
   }
 ];
 
diff --git a/src/components/LadybugClockPuzzle.tsx b/src/components/LadybugClockPuzzle.tsx
new file mode 100644
index 0000000..67e28b6
--- /dev/null
+++ b/src/components/LadybugClockPuzzle.tsx
@@ -0,0 +1,704 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { Button } from '@/components/ui/button';
+import { Slider } from '@/components/ui/slider';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Play, Pause, RotateCcw, SkipForward, FastForward, Info, ExternalLink, BarChart3 } from 'lucide-react';
+import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, ReferenceLine, Cell } from 'recharts';
+import SocialShare from '@/components/SocialShare';
+
+interface LadybugClockPuzzleProps {
+  showSocialShare?: boolean;
+}
+
+interface SimulationState {
+  position: number; // 0-11 (0 = 12 o'clock, 1 = 1 o'clock, etc.)
+  visited: Set<number>;
+  path: number[];
+  lastPainted: number | null;
+  isComplete: boolean;
+  moveCount: number;
+}
+
+const CLOCK_NUMBERS = [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
+
+const LadybugClockPuzzle: React.FC<LadybugClockPuzzleProps> = ({ showSocialShare = true }) => {
+  // Simulation state
+  const [simulation, setSimulation] = useState<SimulationState>({
+    position: 0,
+    visited: new Set([0]),
+    path: [0],
+    lastPainted: null,
+    isComplete: false,
+    moveCount: 0
+  });
+  
+  // Controls
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [speed, setSpeed] = useState(50); // 1-100, maps to delay
+  const [numPositions, setNumPositions] = useState(12);
+  
+  // Statistics
+  const [lastPaintedCounts, setLastPaintedCounts] = useState<Record<number, number>>({});
+  const [totalSimulations, setTotalSimulations] = useState(0);
+  const [averageMoves, setAverageMoves] = useState(0);
+  const [totalMoves, setTotalMoves] = useState(0);
+  
+  // User prediction
+  const [userPrediction, setUserPrediction] = useState<number | null>(null);
+  const [showPredictionResult, setShowPredictionResult] = useState(false);
+  
+  // Refs
+  const animationRef = useRef<number | null>(null);
+  const isPlayingRef = useRef(isPlaying);
+  
+  useEffect(() => {
+    isPlayingRef.current = isPlaying;
+  }, [isPlaying]);
+
+  // Get delay from speed (inverse relationship)
+  const getDelay = useCallback(() => {
+    return Math.max(50, 1000 - (speed * 9));
+  }, [speed]);
+
+  // Reset simulation
+  const resetSimulation = useCallback(() => {
+    setIsPlaying(false);
+    if (animationRef.current) {
+      cancelAnimationFrame(animationRef.current);
+    }
+    setSimulation({
+      position: 0,
+      visited: new Set([0]),
+      path: [0],
+      lastPainted: null,
+      isComplete: false,
+      moveCount: 0
+    });
+  }, []);
+
+  // Perform one step
+  const step = useCallback(() => {
+    setSimulation(prev => {
+      if (prev.isComplete) return prev;
+      
+      // Random move: clockwise or counterclockwise
+      const direction = Math.random() < 0.5 ? 1 : -1;
+      const newPosition = ((prev.position + direction) % numPositions + numPositions) % numPositions;
+      
+      const newVisited = new Set(prev.visited);
+      const wasNewlyPainted = !newVisited.has(newPosition);
+      newVisited.add(newPosition);
+      
+      const isNowComplete = newVisited.size === numPositions;
+      const lastPainted = isNowComplete && wasNewlyPainted ? newPosition : prev.lastPainted;
+      
+      return {
+        position: newPosition,
+        visited: newVisited,
+        path: [...prev.path, newPosition],
+        lastPainted: lastPainted,
+        isComplete: isNowComplete,
+        moveCount: prev.moveCount + 1
+      };
+    });
+  }, [numPositions]);
+
+  // Auto-play loop
+  useEffect(() => {
+    if (!isPlaying || simulation.isComplete) {
+      return;
+    }
+
+    const timeoutId = setTimeout(() => {
+      if (isPlayingRef.current && !simulation.isComplete) {
+        step();
+      }
+    }, getDelay());
+
+    return () => clearTimeout(timeoutId);
+  }, [isPlaying, simulation, step, getDelay]);
+
+  // Handle simulation completion
+  useEffect(() => {
+    if (simulation.isComplete && simulation.lastPainted !== null) {
+      setIsPlaying(false);
+    }
+  }, [simulation.isComplete, simulation.lastPainted]);
+
+  // Run instant simulation (no animation)
+  const runInstantSimulation = useCallback(() => {
+    let position = 0;
+    const visited = new Set([0]);
+    let moveCount = 0;
+    let lastPainted = 0;
+    
+    while (visited.size < numPositions) {
+      const direction = Math.random() < 0.5 ? 1 : -1;
+      position = ((position + direction) % numPositions + numPositions) % numPositions;
+      
+      if (!visited.has(position)) {
+        lastPainted = position;
+        visited.add(position);
+      }
+      moveCount++;
+    }
+    
+    return { lastPainted, moveCount };
+  }, [numPositions]);
+
+  // Run to completion
+  const runToCompletion = useCallback(() => {
+    setIsPlaying(false);
+    
+    let currentSim = simulation;
+    let position = currentSim.position;
+    const visited = new Set(currentSim.visited);
+    let moveCount = currentSim.moveCount;
+    let lastPainted = currentSim.lastPainted;
+    const path = [...currentSim.path];
+    
+    while (visited.size < numPositions) {
+      const direction = Math.random() < 0.5 ? 1 : -1;
+      position = ((position + direction) % numPositions + numPositions) % numPositions;
+      path.push(position);
+      
+      if (!visited.has(position)) {
+        lastPainted = position;
+        visited.add(position);
+      }
+      moveCount++;
+    }
+    
+    setSimulation({
+      position,
+      visited,
+      path,
+      lastPainted,
+      isComplete: true,
+      moveCount
+    });
+  }, [simulation, numPositions]);
+
+  // Run batch simulations
+  const runBatchSimulations = useCallback((count: number) => {
+    const newCounts = { ...lastPaintedCounts };
+    let batchMoves = 0;
+    
+    for (let i = 0; i < count; i++) {
+      const result = runInstantSimulation();
+      newCounts[result.lastPainted] = (newCounts[result.lastPainted] || 0) + 1;
+      batchMoves += result.moveCount;
+    }
+    
+    setLastPaintedCounts(newCounts);
+    setTotalSimulations(prev => prev + count);
+    setTotalMoves(prev => prev + batchMoves);
+    setAverageMoves((totalMoves + batchMoves) / (totalSimulations + count));
+  }, [lastPaintedCounts, runInstantSimulation, totalMoves, totalSimulations]);
+
+  // Clear statistics
+  const clearStats = useCallback(() => {
+    setLastPaintedCounts({});
+    setTotalSimulations(0);
+    setAverageMoves(0);
+    setTotalMoves(0);
+    setUserPrediction(null);
+    setShowPredictionResult(false);
+  }, []);
+
+  // Reset everything when numPositions changes
+  useEffect(() => {
+    resetSimulation();
+    clearStats();
+  }, [numPositions, resetSimulation, clearStats]);
+
+  // Convert position index to display number
+  const positionToNumber = (pos: number) => {
+    if (numPositions === 12) {
+      return pos === 0 ? 12 : pos;
+    }
+    return pos + 1;
+  };
+
+  // Calculate clock position for a given index
+  const getClockPosition = (index: number, radius: number) => {
+    const angle = (index / numPositions) * 2 * Math.PI - Math.PI / 2;
+    return {
+      x: Math.cos(angle) * radius,
+      y: Math.sin(angle) * radius
+    };
+  };
+
+  // Prepare chart data
+  const chartData = Array.from({ length: numPositions - 1 }, (_, i) => {
+    const pos = i + 1; // 1 to n-1 (0/12 can't be last)
+    const count = lastPaintedCounts[pos] || 0;
+    const percentage = totalSimulations > 0 ? (count / totalSimulations) * 100 : 0;
+    return {
+      position: positionToNumber(pos),
+      count,
+      percentage,
+      label: `${positionToNumber(pos)}`
+    };
+  });
+
+  const theoreticalProbability = 100 / (numPositions - 1);
+
+  const shareUrl = typeof window !== 'undefined' 
+    ? `${window.location.origin}/puzzles/ladybug-clock`
+    : '';
+
+  return (
+    <div className="w-full max-w-6xl mx-auto px-4 space-y-6">
+      {/* Header */}
+      <div className="text-center space-y-2">
+        <h1 className="text-3xl font-bold text-foreground">The Ladybug Clock Puzzle</h1>
+        <p className="text-muted-foreground max-w-2xl mx-auto">
+          A ladybug walks randomly on a clock face. What's the probability each number is painted last?
+        </p>
+        {showSocialShare && (
+          <div className="flex justify-center">
+            <SocialShare 
+              title="Ladybug Clock Puzzle" 
+              description="Explore random walks on a clock face!" 
+              url={shareUrl}
+            />
+          </div>
+        )}
+      </div>
+
+      <div className="grid lg:grid-cols-2 gap-6">
+        {/* Clock Visualization */}
+        <Card className="bg-[#1a1a2e] border-slate-700">
+          <CardContent className="p-6">
+            <div className="relative w-full aspect-square max-w-md mx-auto">
+              <svg viewBox="-150 -150 300 300" className="w-full h-full">
+                {/* Clock face background */}
+                <circle cx="0" cy="0" r="140" fill="#2d2d44" stroke="#4a4a6a" strokeWidth="3" />
+                <circle cx="0" cy="0" r="120" fill="none" stroke="#3d3d5c" strokeWidth="1" strokeDasharray="4 4" />
+                
+                {/* Hour markers and numbers */}
+                {Array.from({ length: numPositions }, (_, i) => {
+                  const pos = getClockPosition(i, 100);
+                  const isPainted = simulation.visited.has(i);
+                  const isLast = simulation.isComplete && simulation.lastPainted === i;
+                  const isCurrent = simulation.position === i;
+                  
+                  return (
+                    <g key={i}>
+                      {/* Tick mark */}
+                      <line
+                        x1={getClockPosition(i, 115).x}
+                        y1={getClockPosition(i, 115).y}
+                        x2={getClockPosition(i, 125).x}
+                        y2={getClockPosition(i, 125).y}
+                        stroke={isPainted ? '#f59e0b' : '#6b7280'}
+                        strokeWidth="2"
+                      />
+                      
+                      {/* Number circle background */}
+                      <circle
+                        cx={pos.x}
+                        cy={pos.y}
+                        r="20"
+                        fill={isLast ? '#ef4444' : isPainted ? '#f59e0b' : '#374151'}
+                        className={`transition-all duration-300 ${isPainted && !simulation.isComplete ? 'animate-pulse' : ''}`}
+                      />
+                      
+                      {/* Glow effect for newly painted or last */}
+                      {(isPainted || isLast) && (
+                        <circle
+                          cx={pos.x}
+                          cy={pos.y}
+                          r="24"
+                          fill="none"
+                          stroke={isLast ? '#ef4444' : '#f59e0b'}
+                          strokeWidth="2"
+                          opacity="0.5"
+                        />
+                      )}
+                      
+                      {/* Number text */}
+                      <text
+                        x={pos.x}
+                        y={pos.y}
+                        textAnchor="middle"
+                        dominantBaseline="central"
+                        fill={isPainted ? '#1a1a2e' : '#d1d5db'}
+                        fontSize="14"
+                        fontWeight="bold"
+                        className="select-none"
+                      >
+                        {positionToNumber(i)}
+                      </text>
+                      
+                      {/* Current position indicator */}
+                      {isCurrent && (
+                        <circle
+                          cx={pos.x}
+                          cy={pos.y}
+                          r="26"
+                          fill="none"
+                          stroke="#22c55e"
+                          strokeWidth="3"
+                          strokeDasharray="6 3"
+                          className="animate-spin"
+                          style={{ animationDuration: '3s' }}
+                        />
+                      )}
+                    </g>
+                  );
+                })}
+                
+                {/* Ladybug */}
+                {(() => {
+                  const ladybugPos = getClockPosition(simulation.position, 100);
+                  return (
+                    <g 
+                      transform={`translate(${ladybugPos.x}, ${ladybugPos.y})`}
+                      className="transition-transform duration-200"
+                    >
+                      {/* Ladybug body */}
+                      <ellipse cx="0" cy="-30" rx="12" ry="15" fill="#dc2626" />
+                      {/* Head */}
+                      <circle cx="0" cy="-48" r="6" fill="#1f2937" />
+                      {/* Center line */}
+                      <line x1="0" y1="-45" x2="0" y2="-15" stroke="#1f2937" strokeWidth="2" />
+                      {/* Spots */}
+                      <circle cx="-5" cy="-35" r="3" fill="#1f2937" />
+                      <circle cx="5" cy="-35" r="3" fill="#1f2937" />
+                      <circle cx="-4" cy="-24" r="2.5" fill="#1f2937" />
+                      <circle cx="4" cy="-24" r="2.5" fill="#1f2937" />
+                      {/* Antennae */}
+                      <line x1="-3" y1="-52" x2="-6" y2="-58" stroke="#1f2937" strokeWidth="1.5" />
+                      <line x1="3" y1="-52" x2="6" y2="-58" stroke="#1f2937" strokeWidth="1.5" />
+                    </g>
+                  );
+                })()}
+                
+                {/* Center decoration */}
+                <circle cx="0" cy="0" r="8" fill="#4a4a6a" />
+              </svg>
+            </div>
+            
+            {/* Status display */}
+            <div className="mt-4 text-center space-y-2">
+              <div className="flex justify-center gap-4 text-sm">
+                <Badge variant="outline" className="bg-slate-800 text-slate-200">
+                  Position: {positionToNumber(simulation.position)}
+                </Badge>
+                <Badge variant="outline" className="bg-slate-800 text-slate-200">
+                  Moves: {simulation.moveCount}
+                </Badge>
+                <Badge variant="outline" className="bg-slate-800 text-slate-200">
+                  Painted: {simulation.visited.size}/{numPositions}
+                </Badge>
+              </div>
+              
+              {simulation.isComplete && simulation.lastPainted !== null && (
+                <div className="p-3 bg-red-500/20 border border-red-500/50 rounded-lg">
+                  <p className="text-red-400 font-semibold">
+                    🎉 Complete! Last painted: <span className="text-red-300 text-lg">{positionToNumber(simulation.lastPainted)}</span>
+                  </p>
+                </div>
+              )}
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Controls and Stats */}
+        <div className="space-y-4">
+          {/* Simulation Controls */}
+          <Card>
+            <CardHeader className="pb-3">
+              <CardTitle className="text-lg">Simulation Controls</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="flex flex-wrap gap-2">
+                <Button
+                  onClick={() => setIsPlaying(!isPlaying)}
+                  disabled={simulation.isComplete}
+                  variant={isPlaying ? "destructive" : "default"}
+                  size="sm"
+                >
+                  {isPlaying ? <Pause className="w-4 h-4 mr-1" /> : <Play className="w-4 h-4 mr-1" />}
+                  {isPlaying ? 'Pause' : 'Play'}
+                </Button>
+                
+                <Button
+                  onClick={step}
+                  disabled={simulation.isComplete || isPlaying}
+                  variant="outline"
+                  size="sm"
+                >
+                  <SkipForward className="w-4 h-4 mr-1" />
+                  Step
+                </Button>
+                
+                <Button
+                  onClick={runToCompletion}
+                  disabled={simulation.isComplete}
+                  variant="outline"
+                  size="sm"
+                >
+                  <FastForward className="w-4 h-4 mr-1" />
+                  Complete
+                </Button>
+                
+                <Button onClick={resetSimulation} variant="outline" size="sm">
+                  <RotateCcw className="w-4 h-4 mr-1" />
+                  Reset
+                </Button>
+              </div>
+              
+              <div className="space-y-2">
+                <label className="text-sm text-muted-foreground">Animation Speed</label>
+                <Slider
+                  value={[speed]}
+                  onValueChange={(v) => setSpeed(v[0])}
+                  min={1}
+                  max={100}
+                  step={1}
+                  className="w-full"
+                />
+              </div>
+              
+              <div className="space-y-2">
+                <label className="text-sm text-muted-foreground">Number of Positions: {numPositions}</label>
+                <Slider
+                  value={[numPositions]}
+                  onValueChange={(v) => setNumPositions(v[0])}
+                  min={4}
+                  max={24}
+                  step={2}
+                  className="w-full"
+                />
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Batch Simulations */}
+          <Card>
+            <CardHeader className="pb-3">
+              <CardTitle className="text-lg flex items-center gap-2">
+                <BarChart3 className="w-5 h-5" />
+                Batch Simulations
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="flex flex-wrap gap-2">
+                {[100, 1000, 10000].map(count => (
+                  <Button
+                    key={count}
+                    onClick={() => runBatchSimulations(count)}
+                    variant="outline"
+                    size="sm"
+                  >
+                    Run {count.toLocaleString()}
+                  </Button>
+                ))}
+                <Button onClick={clearStats} variant="ghost" size="sm">
+                  Clear Stats
+                </Button>
+              </div>
+              
+              <div className="text-sm space-y-1">
+                <p className="text-muted-foreground">
+                  Total simulations: <span className="text-foreground font-medium">{totalSimulations.toLocaleString()}</span>
+                </p>
+                {totalSimulations > 0 && (
+                  <p className="text-muted-foreground">
+                    Average moves to complete: <span className="text-foreground font-medium">{averageMoves.toFixed(1)}</span>
+                  </p>
+                )}
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* User Prediction */}
+          {totalSimulations === 0 && (
+            <Card className="border-primary/50 bg-primary/5">
+              <CardHeader className="pb-3">
+                <CardTitle className="text-lg">Make a Prediction! 🤔</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <p className="text-sm text-muted-foreground mb-3">
+                  Which number do you think is most likely to be painted last?
+                </p>
+                <div className="flex flex-wrap gap-2">
+                  {Array.from({ length: numPositions - 1 }, (_, i) => i + 1).map(pos => (
+                    <Button
+                      key={pos}
+                      onClick={() => setUserPrediction(pos)}
+                      variant={userPrediction === pos ? "default" : "outline"}
+                      size="sm"
+                      className="w-10 h-10"
+                    >
+                      {positionToNumber(pos)}
+                    </Button>
+                  ))}
+                </div>
+                {userPrediction !== null && (
+                  <p className="mt-3 text-sm text-primary">
+                    You predicted: <strong>{positionToNumber(userPrediction)}</strong>. Run some simulations to see!
+                  </p>
+                )}
+              </CardContent>
+            </Card>
+          )}
+        </div>
+      </div>
+
+      {/* Statistics Chart */}
+      {totalSimulations > 0 && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              Statistics: Which number was painted last?
+              <Badge variant="secondary">{totalSimulations.toLocaleString()} simulations</Badge>
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="h-64">
+              <ResponsiveContainer width="100%" height="100%">
+                <BarChart data={chartData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
+                  <CartesianGrid strokeDasharray="3 3" stroke="#374151" />
+                  <XAxis dataKey="label" stroke="#9ca3af" />
+                  <YAxis 
+                    stroke="#9ca3af" 
+                    tickFormatter={(v) => `${v.toFixed(1)}%`}
+                    domain={[0, Math.max(theoreticalProbability * 1.5, 15)]}
+                  />
+                  <Tooltip 
+                    contentStyle={{ backgroundColor: '#1f2937', border: '1px solid #374151' }}
+                    labelStyle={{ color: '#f3f4f6' }}
+                    formatter={(value: number) => [`${value.toFixed(2)}%`, 'Probability']}
+                  />
+                  <ReferenceLine 
+                    y={theoreticalProbability} 
+                    stroke="#22c55e" 
+                    strokeDasharray="5 5" 
+                    label={{ 
+                      value: `Theory: ${theoreticalProbability.toFixed(2)}%`, 
+                      fill: '#22c55e',
+                      fontSize: 12,
+                      position: 'right'
+                    }} 
+                  />
+                  <Bar dataKey="percentage" radius={[4, 4, 0, 0]}>
+                    {chartData.map((entry, index) => (
+                      <Cell 
+                        key={`cell-${index}`} 
+                        fill={userPrediction === index + 1 ? '#8b5cf6' : '#f59e0b'} 
+                      />
+                    ))}
+                  </Bar>
+                </BarChart>
+              </ResponsiveContainer>
+            </div>
+            
+            {userPrediction !== null && (
+              <div className="mt-4 p-3 bg-purple-500/10 border border-purple-500/30 rounded-lg">
+                <p className="text-sm">
+                  <strong className="text-purple-400">Your prediction ({positionToNumber(userPrediction)}):</strong>{' '}
+                  {((lastPaintedCounts[userPrediction] || 0) / totalSimulations * 100).toFixed(2)}%
+                  {' '}— Theory predicts all numbers have equal probability of{' '}
+                  <span className="text-green-400">{theoreticalProbability.toFixed(2)}%</span>!
+                </p>
+              </div>
+            )}
+            
+            <div className="mt-4 p-3 bg-amber-500/10 border border-amber-500/30 rounded-lg">
+              <p className="text-sm text-amber-200">
+                <strong>The Surprising Result:</strong> Despite {numPositions === 12 ? '6' : Math.floor(numPositions / 2)} being the farthest from the start, 
+                every number (1-{numPositions - 1}) has an equal probability of being painted last: exactly 1/{numPositions - 1} ≈ {theoreticalProbability.toFixed(2)}%!
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Path History */}
+      {simulation.path.length > 1 && (
+        <Card>
+          <CardHeader className="pb-3">
+            <CardTitle className="text-lg">Path History</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="flex flex-wrap gap-1 max-h-32 overflow-y-auto">
+              {simulation.path.map((pos, i) => (
+                <Badge 
+                  key={i} 
+                  variant={i === 0 ? "default" : "outline"}
+                  className={`${
+                    simulation.isComplete && i === simulation.path.length - 1 
+                      ? 'bg-red-500 text-white' 
+                      : ''
+                  }`}
+                >
+                  {positionToNumber(pos)}
+                </Badge>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Educational Info */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Info className="w-5 h-5" />
+            About This Puzzle
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="prose prose-sm dark:prose-invert max-w-none">
+            <h4 className="text-foreground">The Rules</h4>
+            <ul className="text-muted-foreground">
+              <li>A ladybug starts at the 12 o'clock position</li>
+              <li>Each second, it randomly moves one step clockwise or counterclockwise (50/50 chance)</li>
+              <li>When the ladybug visits a number, that number gets "painted"</li>
+              <li>The simulation ends when all numbers have been visited at least once</li>
+            </ul>
+            
+            <h4 className="text-foreground">The Surprising Result</h4>
+            <p className="text-muted-foreground">
+              Intuitively, you might expect the number 6 (opposite to 12) to be the most likely to be painted last, 
+              since it's the farthest from the starting point. However, the probability is exactly <strong>1/{numPositions - 1}</strong> for 
+              every number from 1 to {numPositions - 1}! This is because once all but one number is painted, the random walk 
+              will eventually reach that last number, regardless of where it is.
+            </p>
+            
+            <h4 className="text-foreground">Mathematical Connections</h4>
+            <ul className="text-muted-foreground">
+              <li><strong>Random Walks on Cycles:</strong> This is an example of a random walk on a cycle graph</li>
+              <li><strong>Cover Time:</strong> The number of moves to visit all vertices is called the "cover time"</li>
+              <li><strong>Gambler's Ruin:</strong> Related to the classic probability problem of a gambler with a finite amount</li>
+            </ul>
+          </div>
+          
+          <div className="flex flex-wrap gap-2 pt-2 border-t">
+            <Badge variant="outline" className="text-xs">
+              <ExternalLink className="w-3 h-3 mr-1" />
+              <a href="https://momath.org/mindbenders/" target="_blank" rel="noopener noreferrer" className="hover:underline">
+                Mindbenders (MoMath)
+              </a>
+            </Badge>
+            <Badge variant="outline" className="text-xs">
+              <ExternalLink className="w-3 h-3 mr-1" />
+              <a href="https://www.youtube.com/shorts/t3jZ2xGOvYg" target="_blank" rel="noopener noreferrer" className="hover:underline">
+                YouTube Short
+              </a>
+            </Badge>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+export default LadybugClockPuzzle;
diff --git a/src/pages/LadybugClockPuzzlePage.tsx b/src/pages/LadybugClockPuzzlePage.tsx
new file mode 100644
index 0000000..df6554a
--- /dev/null
+++ b/src/pages/LadybugClockPuzzlePage.tsx
@@ -0,0 +1,30 @@
+import Layout from '@/components/Layout';
+import LadybugClockPuzzle from '@/components/LadybugClockPuzzle';
+import { useLocation, Link } from 'react-router-dom';
+import { ArrowLeft } from 'lucide-react';
+
+const LadybugClockPuzzlePage = () => {
+  const location = useLocation();
+  const fromPuzzles = location.search.includes('from=puzzles');
+  
+  return (
+    <Layout>
+      {fromPuzzles && (
+        <div className="max-w-6xl mx-auto px-4 pt-4">
+          <Link 
+            to="/themes/puzzles" 
+            className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground transition-colors"
+          >
+            <ArrowLeft className="w-4 h-4 mr-1" />
+            Back to Puzzles
+          </Link>
+        </div>
+      )}
+      <div className="py-8">
+        <LadybugClockPuzzle />
+      </div>
+    </Layout>
+  );
+};
+
+export default LadybugClockPuzzlePage;
diff --git a/src/pages/theme-pages/Puzzles.tsx b/src/pages/theme-pages/Puzzles.tsx
index 14a38a9..323270e 100644
--- a/src/pages/theme-pages/Puzzles.tsx
+++ b/src/pages/theme-pages/Puzzles.tsx
@@ -105,6 +105,16 @@ const Puzzles = () => {
       difficulty: "Intermediate" as const,
       duration: "5-15 min",
       participants: "1 player"
+    },
+    {
+      id: "ladybug-clock",
+      title: "The Ladybug Clock Puzzle",
+      description: "A ladybug walks randomly on a clock face, painting numbers as it visits. What's the probability that any number is painted last?",
+      path: "/puzzles/ladybug-clock",
+      tags: ["Probability", "Random Walk", "Simulation", "Statistics"],
+      difficulty: "Intermediate" as const,
+      duration: "5-15 min",
+      participants: "1 player"
     }
   ];