feat: build game detail page with header, info panel, and screenshot gallery

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

apps/web/src/components/game/ScreenshotGallery.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import Image from "next/image";
+import { useState } from "react";
+import type { StrapiMedia } from "@afterlife/shared";
+
+interface ScreenshotGalleryProps {
+  screenshots: StrapiMedia[];
+}
+
+export function ScreenshotGallery({ screenshots }: ScreenshotGalleryProps) {
+  const [selected, setSelected] = useState(0);
+
+  if (screenshots.length === 0) return null;
+
+  return (
+    <div className="mt-12">
+      <div className="relative aspect-video rounded-lg overflow-hidden mb-4">
+        <Image
+          src={screenshots[selected].url}
+          alt={screenshots[selected].alternativeText || "Screenshot"}
+          fill
+          className="object-cover"
+        />
+      </div>
+      {screenshots.length > 1 && (
+        <div className="flex gap-2 overflow-x-auto pb-2">
+          {screenshots.map((ss, i) => (
+            <button
+              key={ss.id}
+              onClick={() => setSelected(i)}
+              className={`relative w-24 h-16 rounded overflow-hidden flex-shrink-0 border-2 transition-colors ${
+                i === selected ? "border-blue-500" : "border-transparent"
+              }`}
+            >
+              <Image
+                src={ss.url}
+                alt={ss.alternativeText || `Screenshot ${i + 1}`}
+                fill
+                className="object-cover"
+              />
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}