Add Social Choice listing

Add a Social Choice theme page listing interactives, including Envy-Free Rent Division, with a structured gallery similar to Games and Rent Division pages, using icons and descriptive cards.

X-Lovable-Edit-ID: edt-a900553a-3f11-49b7-90bc-4ea5f2b4481e

src/pages/theme-pages/SocialChoice.tsx

@@ -1,12 +1,125 @@
-import ComingSoon from "@/components/ComingSoon";
+import { Link } from "react-router-dom";
+import Layout from "@/components/Layout";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Users, Vote, Scale, Puzzle } from "lucide-react";
+
+interface Interactive {
+  id: string;
+  title: string;
+  description: string;
+  path: string;
+  tags: string[];
+  icon: React.ComponentType<{ className?: string }>;
+}
+
+const interactives: Interactive[] = [
+  {
+    id: "rent-division",
+    title: "Envy-Free Rent Division",
+    description: "Explore fair division by assigning rooms and setting rents. Can you find an allocation where no one envies another?",
+    path: "/themes/social-choice/rent-division",
+    tags: ["fair-division", "envy-free", "allocation", "game-theory"],
+    icon: Users,
+  },
+];
+
+const comingSoon: { title: string; description: string; icon: React.ComponentType<{ className?: string }> }[] = [
+  {
+    title: "Voting Systems",
+    description: "Compare plurality, ranked-choice, Borda count, and other voting methods through interactive elections.",
+    icon: Vote,
+  },
+  {
+    title: "Arrow's Theorem",
+    description: "Discover why no voting system can satisfy all fairness criteria simultaneously.",
+    icon: Scale,
+  },
+  {
+    title: "Stable Matching",
+    description: "Explore the Gale-Shapley algorithm and the stable marriage problem.",
+    icon: Puzzle,
+  },
+];
 
 const SocialChoice = () => {
   return (
-    <ComingSoon 
+    <Layout>
-      title="Social Choice Theory"
+      <div className="container mx-auto px-4 py-8">
-      description="Understand voting systems, fairness criteria, and collective decision-making through interactive simulations. Explore Arrow's theorem, voting paradoxes, and electoral systems."
+        <div className="space-y-8">
-    />
+          <div className="space-y-4">
+            <h1 className="text-3xl font-bold text-foreground">Social Choice Theory</h1>
+            <p className="text-muted-foreground text-lg max-w-3xl">
+              Understand voting systems, fairness criteria, and collective decision-making through 
+              interactive simulations. Explore how groups make decisions and the mathematical 
+              principles behind fair allocation.
+            </p>
+          </div>
+
+          {/* Available Interactives */}
+          <div className="space-y-4">
+            <h2 className="text-xl font-semibold text-foreground">Interactives</h2>
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+              {interactives.map((item) => {
+                const Icon = item.icon;
+                return (
+                  <Link key={item.id} to={item.path}>
+                    <Card className="h-full cursor-pointer hover:shadow-lg transition-all duration-200 hover:scale-105">
+                      <CardHeader className="space-y-3">
+                        <div className="flex items-center gap-3">
+                          <div className="p-2 rounded-lg bg-primary/10">
+                            <Icon className="w-5 h-5 text-primary" />
+                          </div>
+                          <CardTitle className="text-lg text-foreground">{item.title}</CardTitle>
+                        </div>
+                        <CardDescription className="text-muted-foreground">
+                          {item.description}
+                        </CardDescription>
+                      </CardHeader>
+                      <CardContent>
+                        <div className="flex flex-wrap gap-2">
+                          {item.tags.map((tag) => (
+                            <Badge key={tag} variant="secondary" className="text-xs">
+                              {tag}
+                            </Badge>
+                          ))}
+                        </div>
+                      </CardContent>
+                    </Card>
+                  </Link>
+                );
+              })}
+            </div>
+          </div>
+
+          {/* Coming Soon */}
+          <div className="space-y-4">
+            <h2 className="text-xl font-semibold text-muted-foreground">Coming Soon</h2>
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+              {comingSoon.map((item) => {
+                const Icon = item.icon;
+                return (
+                  <Card key={item.title} className="h-full opacity-60">
+                    <CardHeader className="space-y-3">
+                      <div className="flex items-center gap-3">
+                        <div className="p-2 rounded-lg bg-muted">
+                          <Icon className="w-5 h-5 text-muted-foreground" />
+                        </div>
+                        <CardTitle className="text-lg text-muted-foreground">{item.title}</CardTitle>
+                      </div>
+                      <CardDescription className="text-muted-foreground">
+                        {item.description}
+                      </CardDescription>
+                    </CardHeader>
+                  </Card>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      </div>
+    </Layout>
   );
 };
 
-export default SocialChoice;
+export default SocialChoice;