feat: Wabenhain Honig-Shop Anwendung

Vollstaendige Next.js/Prisma-E-Commerce-Anwendung fuer eine Imkerei:
Shop, Warenkorb, Stripe-Checkout, Kundenkonto mit 2FA, Admin-Bereich
(Produkte, Ernten, Chargen, Bestellungen, Gutscheine, admin-editierbare
Website-Inhalte), i18n (DE/EN), Rate-Limiting/CSP/Audit-Log-Haertung,
PostgreSQL- und MySQL-Unterstuetzung ueber austauschbare Prisma-
Treiber-Adapter, Unit-/Komponenten-/E2E-Tests.

src/components/product-gallery.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { useState } from "react";
+import { PlaceholderImage } from "@/components/placeholder-image";
+
+type Slide = { src: string } | { tone: "forest" | "cream" | "honey"; label: string };
+
+function isImageSlide(slide: Slide): slide is { src: string } {
+  return "src" in slide;
+}
+
+// Solange keine echte Produktfotografie hinterlegt ist (product.images ist
+// aktuell bei allen Produkten leer, siehe README), zeigt die Galerie diese
+// vier Platzhalter-Kacheln an — sobald echte Bild-URLs gepflegt werden,
+// ersetzen sie diese Kacheln automatisch (siehe Verzweigung unten).
+const PLACEHOLDER_SLIDES: Slide[] = [
+  { tone: "honey", label: "Glas frontal" },
+  { tone: "cream", label: "Glas seitlich" },
+  { tone: "forest", label: "Bienenstand" },
+  { tone: "honey", label: "Landschaft" },
+];
+
+interface ProductGalleryProps {
+  images: string[];
+  productName: string;
+}
+
+export function ProductGallery({ images, productName }: ProductGalleryProps) {
+  const slides: Slide[] = images.length > 0 ? images.map((src) => ({ src })) : PLACEHOLDER_SLIDES;
+  const [activeIndex, setActiveIndex] = useState(0);
+  const active = slides[activeIndex] ?? slides[0];
+
+  return (
+    <div>
+      <div className="aspect-[4/3] overflow-hidden">
+        {isImageSlide(active) ? (
+          // eslint-disable-next-line @next/next/no-img-element -- externe Bildquelle noch unbekannt, next/image braucht dafuer eine feste remotePatterns-Konfiguration.
+          <img src={active.src} alt={productName} className="w-full h-full object-cover" />
+        ) : (
+          <PlaceholderImage tone={active.tone} label={active.label} className="w-full h-full" />
+        )}
+      </div>
+      {slides.length > 1 ? (
+        <div className="mt-3 grid grid-cols-4 gap-3">
+          {slides.map((slide, index) => (
+            <button
+              key={index}
+              type="button"
+              onClick={() => setActiveIndex(index)}
+              aria-label={`${isImageSlide(slide) ? `Produktbild ${index + 1}` : slide.label} – Bild ${index + 1} von ${slides.length} anzeigen`}
+              aria-current={index === activeIndex}
+              className={`aspect-square overflow-hidden border-2 transition-colors ${
+                index === activeIndex ? "border-forest" : "border-transparent hover:border-ink/20"
+              }`}
+            >
+              {isImageSlide(slide) ? (
+                // eslint-disable-next-line @next/next/no-img-element -- s.o.
+                <img src={slide.src} alt="" className="w-full h-full object-cover" />
+              ) : (
+                <PlaceholderImage tone={slide.tone} label={slide.label} className="w-full h-full" />
+              )}
+            </button>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}