only front-end init

app/produit/[id]/page.tsx

@@ -0,0 +1,166 @@
+"use client";
+
+import { useState } from "react";
+import { Star, ChevronLeft, Check } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useLanguage } from "@/contexts/LanguageContext";
+import { useCart } from "@/contexts/CartContext";
+import { products } from "@/data/products";
+import ProductCard from "@/components/ProductCard";
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import { toast } from "sonner";
+
+export default function ProductDetail() {
+  const { id } = useParams();
+  const { t } = useLanguage();
+  const { addItem } = useCart();
+  const product = products.find((p) => p.id === id);
+
+  const [selectedImage, setSelectedImage] = useState(0);
+  const [selectedColor, setSelectedColor] = useState("");
+  const [selectedLength, setSelectedLength] = useState("");
+
+  if (!product) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <p className="text-muted-foreground">Produit non trouvé</p>
+      </div>
+    );
+  }
+
+  const similar = products.filter((p) => p.category === product.category && p.id !== product.id).slice(0, 4);
+
+  const handleAddToCart = () => {
+    const color = selectedColor || product.colors[0];
+    const length = selectedLength || product.lengths[0];
+    addItem(product, color, length);
+    toast.success(`Ajouté au panier - ${product.name} - ${color}, ${length}`);
+  };
+
+  return (
+    <div className="min-h-screen py-6 lg:py-12">
+      <div className="container mx-auto px-4 lg:px-8">
+        <Link href="/boutique" className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground mb-6">
+          <ChevronLeft className="h-4 w-4" /> {t("nav.shop")}
+        </Link>
+
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-16">
+          {/* Images */}
+          <div className="space-y-3">
+            <div className="aspect-[3/4] rounded-lg overflow-hidden bg-muted">
+              <img src={product.images[selectedImage]} alt={product.name} className="w-full h-full object-cover" />
+            </div>
+            {product.images.length > 1 && (
+              <div className="flex gap-2">
+                {product.images.map((img, i) => (
+                  <button
+                    key={i}
+                    onClick={() => setSelectedImage(i)}
+                    className={`w-16 h-20 rounded-md overflow-hidden border-2 transition-colors ${
+                      i === selectedImage ? "border-primary" : "border-transparent"
+                    }`}
+                  >
+                    <img src={img} alt="" className="w-full h-full object-cover" />
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* Details */}
+          <div className="space-y-6">
+            <div>
+              <h1 className="font-serif text-2xl lg:text-4xl font-semibold mb-2">{product.name}</h1>
+              <div className="flex items-center gap-2 mb-4">
+                <div className="flex gap-0.5">
+                  {Array.from({ length: 5 }).map((_, i) => (
+                    <Star key={i} className={`h-4 w-4 ${i < Math.floor(product.rating) ? "fill-primary text-primary" : "text-muted"}`} />
+                  ))}
+                </div>
+                <span className="text-sm text-muted-foreground">({product.reviewCount} avis)</span>
+              </div>
+              <div className="flex items-baseline gap-3">
+                <span className="text-2xl font-semibold">{product.price} €</span>
+                {product.originalPrice && (
+                  <span className="text-lg text-muted-foreground line-through">{product.originalPrice} €</span>
+                )}
+              </div>
+            </div>
+
+            <p className="text-muted-foreground leading-relaxed">{product.description}</p>
+
+            {/* Color selector */}
+            <div>
+              <h3 className="text-sm font-medium mb-2">{t("product.color")}</h3>
+              <div className="flex flex-wrap gap-2">
+                {product.colors.map((color) => (
+                  <button
+                    key={color}
+                    onClick={() => setSelectedColor(color)}
+                    className={`px-3 py-1.5 rounded-full text-sm border transition-colors cursor-pointer ${
+                      (selectedColor || product.colors[0]) === color
+                        ? "border-primary bg-accent text-accent-foreground"
+                        : "border-border text-muted-foreground hover:border-primary"
+                    }`}
+                  >
+                    {color}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            {/* Length selector */}
+            <div>
+              <h3 className="text-sm font-medium mb-2">{t("product.length")}</h3>
+              <div className="flex gap-2">
+                {product.lengths.map((length) => (
+                  <button
+                    key={length}
+                    onClick={() => setSelectedLength(length)}
+                    className={`px-4 py-2 rounded-md text-sm border transition-colors cursor-pointer ${
+                      (selectedLength || product.lengths[0]) === length
+                        ? "border-primary bg-accent text-accent-foreground"
+                        : "border-border text-muted-foreground hover:border-primary"
+                    }`}
+                  >
+                    {length}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            <Button size="lg" className="w-full text-sm tracking-wide" onClick={handleAddToCart}>
+              {t("cart.add")}
+            </Button>
+
+            {/* Features */}
+            <div>
+              <h3 className="text-sm font-medium mb-3">{t("product.features")}</h3>
+              <ul className="space-y-2">
+                {product.features.map((feature) => (
+                  <li key={feature} className="flex items-center gap-2 text-sm text-muted-foreground">
+                    <Check className="h-4 w-4 text-primary" />
+                    {feature}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </div>
+        </div>
+
+        {/* Similar */}
+        {similar.length > 0 && (
+          <section className="mt-16 lg:mt-24">
+            <h2 className="font-serif text-2xl mb-8">{t("product.similar")}</h2>
+            <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-6">
+              {similar.map((p) => (
+                <ProductCard key={p.id} product={p} />
+              ))}
+            </div>
+          </section>
+        )}
+      </div>
+    </div>
+  );
+};