create-ecom-app 1.0.0

package/templates/ecommerce/app/page.tsx

@@ -0,0 +1,215 @@
+import type { Metadata } from 'next';
+import Link from 'next/link';
+import { ArrowRight, Zap, Shield, RefreshCw, Truck, Shirt, Watch, Laptop, ShoppingBag, Leaf, Headphones } from 'lucide-react';
+import ProductCard from '@/components/ProductCard';
+import productsData from '@/data/products.json';
+import type { Product } from '@/types';
+
+export const metadata: Metadata = {
+  title: 'GenZ Shop — Shop Different. Shop Smarter.',
+  description: 'Discover curated fashion, electronics and lifestyle products at GenZ Shop.',
+};
+
+const products = productsData as Product[];
+const featured = products.filter((p) => p.inStock).slice(0, 8);
+const bestSellers = [...products].sort((a, b) => b.reviewCount - a.reviewCount).slice(0, 4);
+
+const usps = [
+  { icon: Truck, label: 'Free Shipping', desc: 'On orders above ₹999' },
+  { icon: Shield, label: 'Secure Payment', desc: '100% safe checkout' },
+  { icon: RefreshCw, label: '30-Day Returns', desc: 'Hassle-free returns' },
+  { icon: Zap, label: 'Fast Delivery', desc: '2-3 business days' },
+];
+
+export default function HomePage() {
+  return (
+    <div>
+      {/* ── HERO (Mixtas Design) ── */}
+      <section className="relative w-full h-[600px] md:h-[700px] flex items-center bg-gray-100 overflow-hidden">
+        {/* Background Image */}
+        <div 
+          className="absolute inset-0 bg-cover bg-center bg-no-repeat"
+          style={{ 
+            backgroundImage: `url('/images/hero-bg.jpg')`,
+          }} 
+        />
+        {/* Slight gradient overlay for left text readability */}
+        <div className="absolute inset-0 bg-gradient-to-r from-black/40 via-black/10 to-transparent" />
+
+        <div className="container-main relative z-10 w-full flex items-center">
+          
+          {/* Left Arrow */}
+          <button className="hidden md:flex w-10 h-10 bg-white/90 backdrop-blur rounded-full items-center justify-center hover:bg-white transition-colors absolute -left-4 xl:-left-12 shadow-sm">
+            <span className="text-gray-900 border-b-2 border-r-2 border-gray-900 w-2.5 h-2.5 rotate-[135deg] ml-1" />
+          </button>
+
+          {/* Text Content */}
+          <div className="max-w-xl text-white px-4 md:px-12 animate-fade-in py-10">
+            <p className="text-sm font-medium tracking-[0.15em] uppercase mb-4 opacity-90 drop-shadow-sm">
+              Urban Edge
+            </p>
+            <h1 className="text-5xl md:text-6xl font-bold leading-[1.1] mb-8 drop-shadow-md tracking-tight">
+              Jackets for the<br />Modern Man
+            </h1>
+            <Link href="/products" className="inline-flex bg-white text-gray-900 font-semibold px-8 py-3.5 hover:bg-gray-100 transition-colors text-sm rounded-none tracking-wide">
+              Discovery Now
+            </Link>
+          </div>
+
+          {/* Right Arrow */}
+          <button className="hidden md:flex w-10 h-10 bg-white/90 backdrop-blur rounded-full items-center justify-center hover:bg-white transition-colors absolute -right-4 xl:-right-12 shadow-sm">
+            <span className="text-gray-900 border-b-2 border-r-2 border-gray-900 w-2.5 h-2.5 -rotate-45 mr-1" />
+          </button>
+        </div>
+      </section>
+
+
+      {/* ── USP STRIP ── */}
+      <section className="bg-white border-b border-gray-100">
+        <div className="container-main py-5">
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
+            {usps.map(({ icon: Icon, label, desc }) => (
+              <div key={label} className="flex items-center gap-3">
+                <div className="w-10 h-10 bg-gray-900 rounded-xl flex items-center justify-center flex-shrink-0">
+                  <Icon className="w-5 h-5 text-white" />
+                </div>
+                <div>
+                  <p className="text-sm font-bold text-gray-900">{label}</p>
+                  <p className="text-xs text-gray-500">{desc}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ── CATEGORY BENTO GRID (PHLOX inspired) ── */}
+      <section className="container-main py-16">
+        <div className="mb-8">
+          <h2 className="section-title">Shop by Category</h2>
+          <p className="text-gray-500 mt-1 text-sm">Find what you&apos;re looking for</p>
+        </div>
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 auto-rows-[160px]">
+          {/* Clothing — large */}
+          <Link href="/products?category=Clothing" className="col-span-2 group relative rounded-2xl overflow-hidden bg-gray-900 flex items-end p-6 hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
+            <div className="absolute top-5 right-5 w-12 h-12 bg-white/10 rounded-xl flex items-center justify-center">
+              <Shirt className="w-6 h-6 text-white" />
+            </div>
+            <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
+            <div className="relative z-10">
+              <p className="text-white/60 text-xs font-semibold uppercase tracking-wider">Browse</p>
+              <h3 className="text-white text-2xl font-black mt-0.5">Clothing</h3>
+            </div>
+            <ArrowRight className="absolute bottom-6 right-6 w-5 h-5 text-white opacity-0 group-hover:opacity-100 transition-opacity z-10" />
+          </Link>
+
+          <Link href="/products?category=Electronics" className="group relative rounded-2xl overflow-hidden bg-amber-400 flex items-end p-5 hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
+            <div className="absolute top-4 right-4 w-10 h-10 bg-black/15 rounded-xl flex items-center justify-center">
+              <Laptop className="w-5 h-5 text-gray-900" />
+            </div>
+            <div>
+              <p className="text-gray-800/70 text-xs font-semibold uppercase tracking-wider">Trend</p>
+              <h3 className="text-gray-900 text-lg font-black">Electronics</h3>
+            </div>
+          </Link>
+
+          <Link href="/products?category=Footwear" className="group relative rounded-2xl overflow-hidden bg-rose-500 flex items-end p-5 hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
+            <div className="absolute top-4 right-4 w-10 h-10 bg-white/20 rounded-xl flex items-center justify-center">
+              <ShoppingBag className="w-5 h-5 text-white" />
+            </div>
+            <div>
+              <p className="text-white/70 text-xs font-semibold uppercase tracking-wider">New</p>
+              <h3 className="text-white text-lg font-black">Footwear</h3>
+            </div>
+          </Link>
+
+          <Link href="/products?category=Accessories" className="group relative rounded-2xl overflow-hidden bg-slate-700 flex items-end p-5 hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
+            <div className="absolute top-4 right-4 w-10 h-10 bg-white/10 rounded-xl flex items-center justify-center">
+              <Watch className="w-5 h-5 text-white" />
+            </div>
+            <div>
+              <p className="text-white/70 text-xs font-semibold uppercase tracking-wider">Style</p>
+              <h3 className="text-white text-lg font-black">Accessories</h3>
+            </div>
+          </Link>
+
+          <Link href="/products?category=Lifestyle" className="col-span-2 group relative rounded-2xl overflow-hidden bg-emerald-500 flex items-end p-6 hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
+            <div className="absolute top-5 right-5 w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center">
+              <Leaf className="w-6 h-6 text-white" />
+            </div>
+            <div>
+              <p className="text-white/70 text-xs font-semibold uppercase tracking-wider">Live Better</p>
+              <h3 className="text-white text-2xl font-black mt-0.5">Lifestyle</h3>
+            </div>
+            <ArrowRight className="absolute bottom-6 right-6 w-5 h-5 text-white opacity-0 group-hover:opacity-100 transition-opacity" />
+          </Link>
+
+          <Link href="/products" className="group relative rounded-2xl overflow-hidden bg-violet-600 flex items-end p-5 hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
+            <div className="absolute top-4 right-4 w-10 h-10 bg-white/20 rounded-xl flex items-center justify-center">
+              <Headphones className="w-5 h-5 text-white" />
+            </div>
+            <div>
+              <p className="text-white/70 text-xs font-semibold uppercase tracking-wider">Play</p>
+              <h3 className="text-white text-lg font-black">Audio</h3>
+            </div>
+          </Link>
+        </div>
+      </section>
+
+      {/* ── FEATURED PRODUCTS ── */}
+      <section className="container-main pb-16">
+        <div className="flex items-center justify-between mb-8">
+          <div>
+            <h2 className="section-title">Featured Products</h2>
+            <p className="text-gray-500 text-sm mt-1">Handpicked just for you</p>
+          </div>
+          <Link href="/products" className="flex items-center gap-1.5 text-sm font-bold text-gray-900 hover:underline">
+            View all <ArrowRight className="w-4 h-4" />
+          </Link>
+        </div>
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+          {featured.map((product) => (
+            <ProductCard key={product.id} product={product} />
+          ))}
+        </div>
+      </section>
+
+      {/* ── PROMO BANNER ── */}
+      <section className="container-main pb-16">
+        <div className="relative rounded-3xl overflow-hidden bg-gray-900 py-14 px-10 md:px-16 text-white">
+          <div className="absolute inset-0" style={{
+            backgroundImage: `radial-gradient(circle at 0% 50%, rgba(124,58,237,0.4) 0%, transparent 50%),
+                              radial-gradient(circle at 100% 50%, rgba(37,99,235,0.3) 0%, transparent 50%)`,
+          }} />
+          <div className="relative z-10 flex flex-col md:flex-row items-center justify-between gap-6">
+            <div>
+              <p className="text-sm font-bold uppercase tracking-widest text-violet-400 mb-2">Limited Time</p>
+              <h2 className="text-3xl md:text-4xl font-black mb-2">Get 30% off your first order</h2>
+              <p className="text-gray-400">Sign up and unlock exclusive deals, early access & free shipping</p>
+            </div>
+            <Link href="/register" className="flex-shrink-0 flex items-center gap-2 bg-white text-gray-900 font-bold px-8 py-3.5 rounded-xl hover:bg-gray-100 transition-all active:scale-95 text-sm whitespace-nowrap">
+              Get Started Free <ArrowRight className="w-4 h-4" />
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      {/* ── BEST SELLERS ── */}
+      <section className="bg-gray-50 py-16">
+        <div className="container-main">
+          <div className="flex items-center justify-between mb-8">
+            <div>
+              <h2 className="section-title">Best Sellers</h2>
+              <p className="text-gray-500 text-sm mt-1">Most loved by our community</p>
+            </div>
+          </div>
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+            {bestSellers.map((product) => (
+              <ProductCard key={product.id} product={product} />
+            ))}
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}

package/templates/ecommerce/app/product/[id]/page.tsx

@@ -0,0 +1,417 @@
+'use client';
+
+import { notFound } from 'next/navigation';
+import Image from 'next/image';
+import Link from 'next/link';
+import { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { ShoppingCart, Heart, Star, ThumbsUp, ChevronDown } from 'lucide-react';
+import { useCartStore } from '@/store/useCartStore';
+import { useWishlistStore } from '@/store/useWishlistStore';
+import { useAuthStore } from '@/store/useAuthStore';
+import { useReviewStore } from '@/store/useReviewStore';
+import productsData from '@/data/products.json';
+import type { Product, Review } from '@/types';
+import { formatPrice, getDiscount, generateId } from '@/lib/utils';
+
+const products = productsData as Product[];
+
+type SortKey = 'recent' | 'rating' | 'helpful';
+
+// ⚠️ Defined OUTSIDE to avoid focus loss bug
+interface StarInputProps {
+  value: number;
+  onChange: (v: number) => void;
+}
+function StarInput({ value, onChange }: StarInputProps) {
+  const [hover, setHover] = useState(0);
+  return (
+    <div className="flex gap-1">
+      {[1, 2, 3, 4, 5].map((s) => (
+        <button
+          key={s}
+          type="button"
+          onClick={() => onChange(s)}
+          onMouseEnter={() => setHover(s)}
+          onMouseLeave={() => setHover(0)}
+          className="p-0.5"
+        >
+          <Star
+            className={`w-6 h-6 transition-colors ${
+              s <= (hover || value) ? 'text-amber-400 fill-amber-400' : 'text-gray-300 fill-gray-300'
+            }`}
+          />
+        </button>
+      ))}
+    </div>
+  );
+}
+
+export default function ProductDetailPage({ params }: { params: { id: string } }) {
+  const product = products.find((p) => p.id === params.id);
+  if (!product) notFound();
+
+  const addItem = useCartStore((s) => s.addItem);
+  const { toggle, isWishlisted } = useWishlistStore();
+  const { user, isAuthenticated } = useAuthStore();
+  const { addReview, getProductReviews, hasReviewed, markHelpful } = useReviewStore();
+  const wishlisted = isWishlisted(product.id);
+  const [added, setAdded] = useState(false);
+  const [quantity, setQuantity] = useState(1);
+
+  // Review state
+  const [reviewRating, setReviewRating] = useState(0);
+  const [reviewTitle, setReviewTitle] = useState('');
+  const [reviewBody, setReviewBody] = useState('');
+  const [reviewSort, setReviewSort] = useState<SortKey>('recent');
+  const [reviewError, setReviewError] = useState('');
+  const [reviewSubmitted, setReviewSubmitted] = useState(false);
+
+  const reviews = getProductReviews(product.id);
+  const alreadyReviewed = user ? hasReviewed(product.id, user.id) : false;
+
+  const sortedReviews = [...reviews].sort((a: Review, b: Review) => {
+    if (reviewSort === 'rating') return b.rating - a.rating;
+    if (reviewSort === 'helpful') return b.helpful - a.helpful;
+    return new Date(b.date).getTime() - new Date(a.date).getTime();
+  });
+
+  const avgRating =
+    reviews.length > 0
+      ? reviews.reduce((s, r) => s + r.rating, 0) / reviews.length
+      : product.rating;
+
+  const related = products
+    .filter((p) => p.category === product.category && p.id !== product.id)
+    .slice(0, 4);
+
+  const discount = product.originalPrice ? getDiscount(product.originalPrice, product.price) : null;
+
+  const handleAddToCart = () => {
+    for (let i = 0; i < quantity; i++) addItem(product);
+    setAdded(true);
+    setTimeout(() => setAdded(false), 2000);
+  };
+
+  const handleSubmitReview = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!isAuthenticated || !user) { setReviewError('Please login to write a review.'); return; }
+    if (reviewRating === 0) { setReviewError('Please select a star rating.'); return; }
+    if (!reviewTitle.trim()) { setReviewError('Please add a review title.'); return; }
+    if (!reviewBody.trim()) { setReviewError('Please write your review.'); return; }
+    addReview({
+      productId: product.id,
+      userId: user.id,
+      userName: user.name,
+      rating: reviewRating,
+      title: reviewTitle.trim(),
+      body: reviewBody.trim(),
+    });
+    setReviewTitle('');
+    setReviewBody('');
+    setReviewRating(0);
+    setReviewError('');
+    setReviewSubmitted(true);
+  };
+
+  return (
+    <motion.div
+      className="container-main py-10"
+      initial={{ opacity: 0, y: 16 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.4 }}
+    >
+      {/* Breadcrumb */}
+      <nav className="mb-8 flex items-center gap-2 text-sm text-gray-400">
+        <Link href="/" className="hover:text-gray-900 transition-colors">Home</Link>
+        <span>/</span>
+        <Link href="/products" className="hover:text-gray-900 transition-colors">Products</Link>
+        <span>/</span>
+        <span className="text-gray-700 font-medium truncate">{product.name}</span>
+      </nav>
+
+      {/* Product Main */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 mb-20">
+        {/* Image */}
+        <div className="relative aspect-square rounded-3xl overflow-hidden bg-gray-100">
+          <Image src={product.image} alt={product.name} fill className="object-cover" sizes="(max-width: 1024px) 100vw, 50vw" priority />
+          {discount && (
+            <div className="absolute top-5 left-5 bg-red-500 text-white font-bold px-3 py-1.5 rounded-full text-sm">
+              -{discount}% OFF
+            </div>
+          )}
+        </div>
+
+        {/* Info */}
+        <div className="flex flex-col justify-center">
+          <p className="text-sm text-gray-400 uppercase tracking-wider mb-2">{product.category}</p>
+          <h1 className="text-3xl font-bold text-gray-900 mb-3">{product.name}</h1>
+
+          {/* Rating summary */}
+          <div className="flex items-center gap-2 mb-5">
+            <div className="flex">
+              {[1, 2, 3, 4, 5].map((s) => (
+                <Star key={s} className={`w-5 h-5 ${s <= Math.floor(avgRating) ? 'text-amber-400 fill-amber-400' : 'text-gray-200 fill-gray-200'}`} />
+              ))}
+            </div>
+            <span className="text-sm font-semibold text-gray-900">{avgRating.toFixed(1)}</span>
+            <span className="text-sm text-gray-400">({reviews.length || product.reviewCount} reviews)</span>
+          </div>
+
+          {/* Price */}
+          <div className="flex items-center gap-3 mb-6">
+            <span className="text-4xl font-bold text-gray-900">{formatPrice(product.price)}</span>
+            {product.originalPrice && (
+              <span className="text-xl text-gray-400 line-through">{formatPrice(product.originalPrice)}</span>
+            )}
+          </div>
+
+          <p className="text-gray-600 leading-relaxed mb-8">{product.description}</p>
+
+          {/* Stock */}
+          <div className="flex items-center gap-2 mb-6">
+            <div className={`w-2.5 h-2.5 rounded-full ${product.inStock ? 'bg-green-400' : 'bg-red-400'}`} />
+            <span className={`text-sm font-medium ${product.inStock ? 'text-green-600' : 'text-red-500'}`}>
+              {product.inStock ? 'In Stock' : 'Out of Stock'}
+            </span>
+          </div>
+
+          {/* Quantity */}
+          {product.inStock && (
+            <div className="flex items-center gap-3 mb-6">
+              <span className="text-sm font-medium text-gray-700">Quantity:</span>
+              <div className="flex items-center border border-gray-200 rounded-xl overflow-hidden">
+                <button onClick={() => setQuantity(Math.max(1, quantity - 1))} className="px-4 py-2.5 text-gray-600 hover:bg-gray-50 font-medium">−</button>
+                <span className="px-4 py-2.5 font-semibold text-gray-900 min-w-[3rem] text-center">{quantity}</span>
+                <button onClick={() => setQuantity(quantity + 1)} className="px-4 py-2.5 text-gray-600 hover:bg-gray-50 font-medium">+</button>
+              </div>
+            </div>
+          )}
+
+          {/* Actions */}
+          <div className="flex gap-3">
+            <motion.button
+              onClick={handleAddToCart}
+              disabled={!product.inStock}
+              whileTap={{ scale: 0.96 }}
+              className={`flex-1 py-3.5 rounded-xl font-semibold text-base flex items-center justify-center gap-2 transition-all duration-200
+                ${added ? 'bg-green-500 text-white' : product.inStock ? 'bg-gray-900 text-white hover:bg-gray-700' : 'bg-gray-100 text-gray-400 cursor-not-allowed'}`}
+              id="add-to-cart-detail"
+            >
+              <ShoppingCart className="w-5 h-5" />
+              {added ? 'Added to Cart!' : product.inStock ? 'Add to Cart' : 'Out of Stock'}
+            </motion.button>
+            <motion.button
+              onClick={() => toggle(product)}
+              whileTap={{ scale: 0.9 }}
+              className={`p-3.5 rounded-xl border-2 transition-all
+                ${wishlisted ? 'border-red-400 bg-red-50 text-red-500' : 'border-gray-200 text-gray-400 hover:border-gray-400'}`}
+              aria-label="Wishlist toggle"
+              id="wishlist-toggle"
+            >
+              <Heart className={`w-5 h-5 ${wishlisted ? 'fill-red-500' : ''}`} />
+            </motion.button>
+          </div>
+
+          {product.tags && (
+            <div className="flex flex-wrap gap-2 mt-6">
+              {product.tags.map((tag) => (
+                <span key={tag} className="bg-gray-100 text-gray-600 text-xs px-3 py-1 rounded-full">#{tag}</span>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* ===== REVIEW SYSTEM ===== */}
+      <section className="mb-20">
+        <div className="flex items-center justify-between mb-6">
+          <h2 className="section-title">Customer Reviews</h2>
+          <div className="flex items-center gap-2">
+            <span className="text-sm text-gray-500">Sort by:</span>
+            <select
+              value={reviewSort}
+              onChange={(e) => setReviewSort(e.target.value as SortKey)}
+              className="input w-36 text-sm py-1.5"
+              id="review-sort"
+            >
+              <option value="recent">Most Recent</option>
+              <option value="rating">Top Rated</option>
+              <option value="helpful">Most Helpful</option>
+            </select>
+          </div>
+        </div>
+
+        {/* Rating Overview */}
+        <div className="bg-white rounded-2xl shadow-sm p-6 mb-6 flex items-center gap-8">
+          <div className="text-center flex-shrink-0">
+            <p className="text-5xl font-bold text-gray-900">{avgRating.toFixed(1)}</p>
+            <div className="flex mt-1">
+              {[1,2,3,4,5].map((s) => (
+                <Star key={s} className={`w-4 h-4 ${s <= Math.floor(avgRating) ? 'text-amber-400 fill-amber-400' : 'text-gray-200 fill-gray-200'}`} />
+              ))}
+            </div>
+            <p className="text-xs text-gray-400 mt-1">{reviews.length} review{reviews.length !== 1 ? 's' : ''}</p>
+          </div>
+          <div className="flex-1 space-y-1.5">
+            {[5, 4, 3, 2, 1].map((star) => {
+              const count = reviews.filter((r) => r.rating === star).length;
+              const pct = reviews.length > 0 ? (count / reviews.length) * 100 : 0;
+              return (
+                <div key={star} className="flex items-center gap-2">
+                  <span className="text-xs text-gray-500 w-6">{star}★</span>
+                  <div className="flex-1 bg-gray-100 rounded-full h-2 overflow-hidden">
+                    <motion.div
+                      className="bg-amber-400 h-full rounded-full"
+                      initial={{ width: 0 }}
+                      animate={{ width: `${pct}%` }}
+                      transition={{ duration: 0.5, delay: 0.1 }}
+                    />
+                  </div>
+                  <span className="text-xs text-gray-400 w-6">{count}</span>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+
+        {/* Reviews List */}
+        <div className="space-y-4 mb-8">
+          {sortedReviews.length === 0 ? (
+            <div className="text-center py-12 text-gray-400">
+              <Star className="w-12 h-12 mx-auto mb-3 text-gray-200" />
+              <p className="font-medium text-gray-700">No reviews yet</p>
+              <p className="text-sm mt-1">Be the first to share your experience!</p>
+            </div>
+          ) : (
+            sortedReviews.map((review) => (
+              <motion.div
+                key={review.id}
+                initial={{ opacity: 0, y: 10 }}
+                animate={{ opacity: 1, y: 0 }}
+                className="bg-white rounded-2xl shadow-sm p-5"
+              >
+                <div className="flex items-start justify-between mb-2">
+                  <div>
+                    <div className="flex items-center gap-2 mb-1">
+                      <div className="w-8 h-8 bg-gray-900 rounded-full flex items-center justify-center">
+                        <span className="text-white text-xs font-bold">{review.userName.charAt(0).toUpperCase()}</span>
+                      </div>
+                      <span className="font-semibold text-gray-900 text-sm">{review.userName}</span>
+                    </div>
+                    <div className="flex gap-0.5 mb-1">
+                      {[1,2,3,4,5].map((s) => (
+                        <Star key={s} className={`w-3.5 h-3.5 ${s <= review.rating ? 'text-amber-400 fill-amber-400' : 'text-gray-200 fill-gray-200'}`} />
+                      ))}
+                    </div>
+                    <p className="font-semibold text-gray-900">{review.title}</p>
+                  </div>
+                  <span className="text-xs text-gray-400 flex-shrink-0 ml-4">
+                    {new Date(review.date).toLocaleDateString('en-IN', { day: 'numeric', month: 'short', year: 'numeric' })}
+                  </span>
+                </div>
+                <p className="text-sm text-gray-600 leading-relaxed mb-3">{review.body}</p>
+                <button
+                  onClick={() => user && markHelpful(review.id, user.id)}
+                  className={`flex items-center gap-1.5 text-xs font-medium transition-colors
+                    ${user && review.helpfulBy.includes(user.id) ? 'text-gray-900' : 'text-gray-400 hover:text-gray-700'}`}
+                  id={`helpful-${review.id}`}
+                >
+                  <ThumbsUp className={`w-3.5 h-3.5 ${user && review.helpfulBy.includes(user.id) ? 'fill-gray-900' : ''}`} />
+                  Helpful ({review.helpful})
+                </button>
+              </motion.div>
+            ))
+          )}
+        </div>
+
+        {/* Write Review Form */}
+        {!alreadyReviewed ? (
+          <div className="bg-white rounded-2xl shadow-sm p-6">
+            <h3 className="font-bold text-gray-900 mb-4">Write a Review</h3>
+            {!isAuthenticated ? (
+              <div className="text-center py-8">
+                <p className="text-gray-500 mb-3">Please login to write a review.</p>
+                <Link href="/login" className="btn-primary inline-block">Login</Link>
+              </div>
+            ) : (
+              <form onSubmit={handleSubmitReview} className="space-y-4">
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">Your Rating *</label>
+                  <StarInput value={reviewRating} onChange={setReviewRating} />
+                </div>
+                <div>
+                  <label htmlFor="review-title" className="block text-sm font-medium text-gray-700 mb-1.5">Review Title *</label>
+                  <input
+                    id="review-title"
+                    type="text"
+                    value={reviewTitle}
+                    onChange={(e) => setReviewTitle(e.target.value)}
+                    placeholder="Summarize your experience"
+                    className="input"
+                  />
+                </div>
+                <div>
+                  <label htmlFor="review-body" className="block text-sm font-medium text-gray-700 mb-1.5">Your Review *</label>
+                  <textarea
+                    id="review-body"
+                    value={reviewBody}
+                    onChange={(e) => setReviewBody(e.target.value)}
+                    placeholder="Share details of your experience..."
+                    rows={4}
+                    className="input resize-none"
+                  />
+                </div>
+                {reviewError && (
+                  <p className="text-sm text-red-500 bg-red-50 px-4 py-2.5 rounded-xl">{reviewError}</p>
+                )}
+                <AnimatePresence>
+                  {reviewSubmitted && (
+                    <motion.p
+                      initial={{ opacity: 0, y: -5 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      exit={{ opacity: 0 }}
+                      className="text-sm text-green-600 bg-green-50 px-4 py-2.5 rounded-xl"
+                    >
+                      ✓ Review submitted! Thank you.
+                    </motion.p>
+                  )}
+                </AnimatePresence>
+                <button type="submit" className="btn-primary" id="submit-review-btn">
+                  Submit Review
+                </button>
+              </form>
+            )}
+          </div>
+        ) : (
+          <div className="bg-green-50 border border-green-200 rounded-2xl p-5 text-center">
+            <p className="text-green-700 font-medium">✓ You&apos;ve already reviewed this product. Thank you!</p>
+          </div>
+        )}
+      </section>
+
+      {/* Related Products */}
+      {related.length > 0 && (
+        <section>
+          <h2 className="section-title mb-6">You Might Also Like</h2>
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+            {related.map((p) => (
+              <Link key={p.id} href={`/product/${p.id}`} className="group block">
+                <div className="card overflow-hidden">
+                  <div className="relative aspect-square overflow-hidden bg-gray-100">
+                    <Image src={p.image} alt={p.name} fill className="object-cover group-hover:scale-105 transition-transform duration-500" sizes="25vw" />
+                  </div>
+                  <div className="p-4">
+                    <p className="text-xs text-gray-400 uppercase tracking-wider">{p.category}</p>
+                    <h3 className="font-semibold text-sm text-gray-900 mt-1 line-clamp-2">{p.name}</h3>
+                    <p className="font-bold text-gray-900 mt-2">{formatPrice(p.price)}</p>
+                  </div>
+                </div>
+              </Link>
+            ))}
+          </div>
+        </section>
+      )}
+    </motion.div>
+  );
+}