hey-pharmacist-ecommerce 1.0.4 → 1.0.6

package/src/screens/ProductDetailScreen.tsx

@@ -1,255 +1,706 @@
 'use client';
 
-import React, { useState } from 'react';
+import React, { useEffect, useState, useMemo } from 'react';
 import { motion } from 'framer-motion';
-import { ShoppingCart, Heart, Minus, Plus, Star, Check, Truck, Shield } from 'lucide-react';
+import {
+  ArrowLeft,
+  Award,
+  Check,
+  ChevronRight,
+  Heart,
+  Minus,
+  Package,
+  Plus,
+  Shield,
+  ShieldCheck,
+  ShoppingCart,
+  Sparkles,
+  Star,
+  Truck,
+} from 'lucide-react';
+import Link from 'next/link';
+import Image from 'next/image';
 import { Button } from '@/components/ui/Button';
 import { Badge } from '@/components/ui/Badge';
 import { ProductCard } from '@/components/ProductCard';
 import { useProduct } from '@/hooks/useProducts';
 import { useCart } from '@/providers/CartProvider';
-import { formatPrice } from '@/lib/utils/format';
-import { productsApi } from '@/lib/api/products';
-import Image from 'next/image';
+import { formatDate, formatPrice } from '@/lib/utils/format';
 import { toast } from 'sonner';
+import { useRouter } from 'next/navigation';
+import { ProductVariantsApi } from '@/lib/Apis/apis/product-variants-api';
+import { AXIOS_CONFIG } from '@/lib/Apis/wrapper';
+import { useWishlist } from '@/providers/WishlistProvider';
+import { ProductsApi, ProductVariant, ProductVariantInventoryStatusEnum } from '@/lib/Apis';
+
+const safeFormatDate = (date?: Date | string, format: 'long' | 'short' = 'long'): string => {
+  if (!date) return 'N/A';
+  try {
+    const dateObj = typeof date === 'string' ? new Date(date) : date;
+    return formatDate(dateObj, format);
+  } catch (error) {
+    console.error('Error formatting date:', error);
+    return 'N/A';
+  }
+};
 
 interface ProductDetailScreenProps {
   productId: string;
 }
 
 export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
-  const { product, isLoading } = useProduct(productId);
+  // Hooks and state at the top level
+  const router = useRouter();
+  const { product: productData, isLoading } = useProduct(productId);
   const { addToCart } = useCart();
-  const [selectedImage, setSelectedImage] = useState(0);
+
+  // State declarations
+  const [selectedVariant, setSelectedVariant] = useState<ProductVariant | null>(null);
   const [quantity, setQuantity] = useState(1);
   const [isAddingToCart, setIsAddingToCart] = useState(false);
   const [isFavorited, setIsFavorited] = useState(false);
   const [relatedProducts, setRelatedProducts] = useState<any[]>([]);
+  const [initialProductData, setInitialProductData] = useState<any>(null);
+  const [activeImageIndex, setActiveImageIndex] = useState(0);
 
-  React.useEffect(() => {
-    if (product) {
-      productsApi.getRelatedProducts(product.id).then((res) => {
-        if (res.success) {
-          setRelatedProducts(res.data);
-        }
-      });
+
+  useEffect(() => {
+    setActiveImageIndex(0);
+  }, [selectedVariant]);
+
+  const product = useMemo(() => {
+    if (initialProductData && !productData) {
+      return initialProductData;
+    }
+
+    if (!productData) return null;
+
+    if (productData.productVariants?.length && selectedVariant) {
+      return {
+        ...productData,
+        price: selectedVariant.finalPrice,
+        inStock: selectedVariant.isActive,
+        sku: selectedVariant.sku || productData.sku,
+        variantId: selectedVariant.id,
+        variantName: selectedVariant.name
+      };
+    }
+
+    return productData;
+  }, [productData, selectedVariant, initialProductData]);
+
+  const getVariantImages = () => {
+    if (selectedVariant?.productMedia?.length) {
+      return selectedVariant.productMedia.map((media: any) => ({
+        src: media.file,
+        width: 800,
+        height: 1000,
+        alt: product?.name || 'Product image',
+        ...media,
+        url: media.file,
+      }));
+    }
+
+    if (product?.images?.length) {
+      return product.images.map((image: string) => ({
+        src: image,
+        width: 800,
+        height: 1000,
+        alt: product?.name || 'Product image',
+        url: image,
+        file: image,
+        type: 'image' as const
+      }));
+    }
+
+    return [];
+  };
+
+  const currentVariant = selectedVariant || product?.productVariants?.[0] || product;
+  const variantImages = getVariantImages();
+
+  // Use only the selected variant's prices for discount calculation
+  const variantPrice = selectedVariant?.finalPrice || currentVariant?.finalPrice || product?.price || 0;
+  const variantComparePrice = selectedVariant?.retailPrice ||
+    (currentVariant && 'retailPrice' in currentVariant ? currentVariant.retailPrice : null) ||
+    product?.compareAtPrice;
+
+  // Only show discount if we have both prices and the compare price is higher
+  const discount = variantComparePrice && variantPrice && variantComparePrice > variantPrice
+    ? Math.round(((variantComparePrice - variantPrice) / variantComparePrice) * 100)
+    : 0;
+  const lastUpdatedLabel = safeFormatDate(
+    (currentVariant && 'updatedAt' in currentVariant && currentVariant.updatedAt)
+      ? currentVariant.updatedAt
+      : product?.updatedAt
+  );
+  const variantSku = currentVariant?.sku || product?.sku || 'N/A';
+  // const variantInStock = currentVariant && 'inStock' in currentVariant
+  //   ? currentVariant.inStock
+  //   : product?.inStock;
+
+  const variantInStock = currentVariant?.inventoryCount > 0;
+
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    const searchParams = new URLSearchParams(window.location.search);
+    const productParam = searchParams.get('product');
+
+    if (productParam) {
+      try {
+        const decodedProduct = JSON.parse(decodeURIComponent(productParam));
+        setInitialProductData(decodedProduct);
+      } catch (error) {
+        console.error('Failed to parse product data from URL', error);
+      }
+    }
+  }, []);
+
+
+
+  useEffect(() => {
+    if (product?.productVariants?.length > 0) {
+      const newVariant = product?.productVariants?.[0];
+      setSelectedVariant(newVariant);
     }
-  }, [product]);
+  }, [product?.productVariants]);
+
+  useEffect(() => {
+    if (!product?.id) return;
+
+    let isMounted = true;
+    const fetchRelated = async () => {
+      try {
+        const response = await new ProductsApi(AXIOS_CONFIG).getRelatedProducts(product.id, {
+          params: {
+            limit: 4
+          }
+        });
+        setRelatedProducts(response.data || []);
+      } catch (error: any) {
+        console.error('Failed to fetch related products', error);
+      }
+    };
+    fetchRelated();
+    return () => {
+      isMounted = false;
+    };
+  }, [product?.id]);
+
+
+  const handleVariantSelect = async (variant: ProductVariant) => {
+    setSelectedVariant(variant);
+  };
 
   const handleAddToCart = async () => {
-    if (!product) return;
+    if (!product || !selectedVariant) return;
+
     setIsAddingToCart(true);
     try {
-      await addToCart(product.id, quantity);
+      await addToCart(
+        product.id,
+        quantity,
+        selectedVariant.id
+      );
+      toast.success('Added to cart', {
+        description: `${quantity} × ${product.name}${selectedVariant.name ? ` (${selectedVariant.name})` : ''}`,
+      });
+    } catch (error) {
+      console.error('Failed to add to cart', error);
+      toast.error('Could not add to cart. Please try again.');
     } finally {
       setIsAddingToCart(false);
     }
   };
 
+  const { addToWishlist, removeFromWishlist, isInWishlist } = useWishlist();
+
+  // Initialize isFavorited based on whether the product is in the wishlist
+  useEffect(() => {
+    if (product) {
+      setIsFavorited(isInWishlist(product.id));
+    }
+  }, [product, isInWishlist]);
+
+  const handleToggleFavorite = async () => {
+    if (!product) return;
+
+    try {
+      if (isFavorited) {
+        await removeFromWishlist(product.id);
+        toast.info('Removed from saved items');
+      } else {
+        await addToWishlist(product);
+        toast.success('Saved to your favorites');
+      }
+      // Update the local state after successful API call
+      setIsFavorited(!isFavorited);
+    } catch (error) {
+      console.error('Error updating wishlist:', error);
+      toast.error('Failed to update wishlist');
+    }
+  };
+
   if (isLoading) {
-    return <div className="container mx-auto px-4 py-12">Loading...</div>;
+    return (
+      <div className="min-h-screen bg-slate-50">
+        <div className="container mx-auto px-4 py-16">
+          <div className="grid gap-10 lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]">
+            <div className="space-y-6">
+              <div className="h-[520px] animate-pulse rounded-3xl bg-slate-200" />
+              <div className="grid grid-cols-3 gap-4">
+                {Array.from({ length: 3 }).map((_, index) => (
+                  <div key={index} className="h-32 animate-pulse rounded-2xl bg-slate-200" />
+                ))}
+              </div>
+            </div>
+            <div className="space-y-4 rounded-3xl bg-white p-6 shadow-sm">
+              <div className="h-8 w-32 animate-pulse rounded-full bg-slate-200" />
+              <div className="h-10 w-48 animate-pulse rounded-full bg-slate-200" />
+              <div className="h-6 w-full animate-pulse rounded-full bg-slate-200" />
+              <div className="h-12 w-full animate-pulse rounded-2xl bg-slate-200" />
+              <div className="h-12 w-full animate-pulse rounded-2xl bg-slate-200" />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
   }
 
   if (!product) {
-    return <div className="container mx-auto px-4 py-12">Product not found</div>;
+    return (
+      <div className="min-h-screen bg-slate-50">
+        <div className="container mx-auto px-4 py-16">
+          <div className="rounded-3xl bg-white p-10 text-center shadow-sm">
+            <Sparkles className="mx-auto h-10 w-10 text-primary-500" />
+            <h1 className="mt-6 text-2xl font-semibold text-gray-900">Product not found</h1>
+            <p className="mt-2 text-gray-600">
+              It may have been removed or is temporarily unavailable. Discover other pharmacy
+              essentials in our catalogue.
+            </p>
+            <div className="mt-6">
+              <Link href="/shop" className="inline-block">
+                <Button>Browse products</Button>
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
   }
 
-  const discount = product.compareAtPrice
-    ? Math.round(((product.compareAtPrice - product.price) / product.compareAtPrice) * 100)
-    : 0;
+  const benefitPills =
+    product.tags && product.tags.length > 0
+      ? product.tags.slice(0, 6)
+      : ['Pharmacist approved', 'Gentle on daily routines', 'Backed by real customers'];
+
+  const highlightCards = [
+    {
+      icon: ShieldCheck,
+      title: 'Pharmacy grade assurance',
+      description: 'Sourced from trusted suppliers and reviewed by licensed professionals.',
+    },
+    {
+      icon: Truck,
+      title: 'Fast, cold-chain ready shipping',
+      description: 'Carefully packed and dispatched within 24 hours on business days.',
+    },
+    {
+      icon: Award,
+      title: 'Loved by patients',
+      description: 'Average rating 4.8/5 with over 120 verified customer experiences.',
+    },
+  ];
 
-  return (
-    <div className="min-h-screen bg-gray-50 py-12">
-      <div className="container mx-auto px-4">
-        {/* Breadcrumbs */}
-        <div className="flex items-center gap-2 text-sm text-gray-600 mb-8">
-          <a href="/" className="hover:text-primary-600">Home</a>
-          <span>/</span>
-          <a href="/shop" className="hover:text-primary-600">Shop</a>
-          <span>/</span>
-          <span className="text-gray-900">{product.name}</span>
-        </div>
 
-        {/* Product Content */}
-        <div className="grid lg:grid-cols-2 gap-12 mb-16">
-          {/* Images */}
-          <div>
+
+  return (
+    <div className="min-h-screen bg-slate-50">
+      <section className="relative overflow-hidden bg-gradient-to-br from-[rgb(var(--header-from))] via-[rgb(var(--header-via))] to-[rgb(var(--header-to))] text-white mb-8">
+        <div
+          className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,_rgba(255,255,255,0.35),_transparent_60%)]"
+          aria-hidden="true"
+        />
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_bottom_right,_rgba(255,255,255,0.25),_transparent_55%)] opacity-70" />
+        <div className="relative container mx-auto px-4 py-16">
+          <div className="flex flex-col gap-6">
+            <div className="flex items-center justify-between">
+              <Button
+                variant="ghost"
+                className="text-white hover:bg-white/10"
+                onClick={() => router.push('/shop')}
+              >
+                <ArrowLeft className="h-5 w-5" />
+                Continue shopping
+              </Button>
+              <div className="hidden items-center gap-3 text-sm text-white/80 md:flex">
+                <Link href="/" className="transition hover:text-white">
+                  Home
+                </Link>
+                <ChevronRight className="h-4 w-4" />
+                <Link href="/shop" className="transition hover:text-white">
+                  Shop
+                </Link>
+                <ChevronRight className="h-4 w-4" />
+                <span className="truncate font-medium text-white">{product.name}</span>
+              </div>
+            </div>
             <motion.div
-              initial={{ opacity: 0, y: 20 }}
+              initial={{ opacity: 0, y: 24 }}
               animate={{ opacity: 1, y: 0 }}
-              className="bg-white rounded-2xl overflow-hidden shadow-sm mb-4"
+              className="max-w-3xl space-y-4"
             >
-              <div className="relative aspect-square">
-                <Image
-                  src={product.images[selectedImage] || '/placeholder-product.jpg'}
-                  alt={product.name}
-                  fill
-                  className="object-cover"
-                />
-                {discount > 0 && (
-                  <Badge variant="danger" className="absolute top-4 left-4">
-                    -{discount}%
-                  </Badge>
-                )}
+              {product.category && (
+                <Badge
+                  variant="secondary"
+                  className="bg-white/15 text-white backdrop-blur-sm"
+                >
+                  {product.category}
+                </Badge>
+              )}
+              <h1 className="text-4xl font-bold leading-tight md:text-5xl">{product.name}</h1>
+              <div className="flex flex-wrap items-center gap-3 text-sm text-white/80">
+                <span className="inline-flex items-center gap-2 rounded-full bg-white/10 px-3 py-1 font-medium text-white">
+                  <Sparkles className="h-4 w-4" />
+                  Ready to ship today
+                </span>
+                <span className="inline-flex items-center gap-2 rounded-full bg-white/10 px-3 py-1 font-medium text-white">
+                  <Shield className="h-4 w-4" />
+                  30-day happiness guarantee
+                </span>
               </div>
             </motion.div>
-
-            {/* Thumbnail Images */}
-            {product.images.length > 1 && (
-              <div className="grid grid-cols-4 gap-4">
-                {product.images.map((image, index) => (
-                  <button
-                    key={index}
-                    onClick={() => setSelectedImage(index)}
-                    className={`relative aspect-square rounded-lg overflow-hidden border-2 transition-all ${
-                      selectedImage === index
-                        ? 'border-primary-600 ring-2 ring-primary-600/20'
-                        : 'border-gray-200 hover:border-gray-300'
-                    }`}
-                  >
-                    <Image src={image} alt="" fill className="object-cover" />
-                  </button>
-                ))}
-              </div>
-            )}
           </div>
+        </div>
+      </section>
 
-          {/* Product Info */}
-          <div>
-            <motion.div
-              initial={{ opacity: 0, y: 20 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ delay: 0.1 }}
-            >
-              {/* Category */}
-              <p className="text-sm text-gray-500 uppercase tracking-wider mb-2">
-                {product.category}
-              </p>
-
-              {/* Title */}
-              <h1 className="text-4xl font-bold text-gray-900 mb-4">{product.name}</h1>
-
-              {/* Rating */}
-              <div className="flex items-center gap-2 mb-6">
-                <div className="flex items-center">
-                  {[...Array(5)].map((_, i) => (
-                    <Star
-                      key={i}
-                      className="w-5 h-5 fill-yellow-400 text-yellow-400"
+      <div className="relative -mt-16 pb-20">
+        <div className="container mx-auto px-4">
+          <div className="grid gap-10 lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]">
+            <div className="space-y-10">
+              <section className="rounded-3xl border border-white bg-white/70 p-6 shadow-xl shadow-primary-100/40 backdrop-blur">
+                <div className="grid gap-6 lg:grid-cols-[minmax(0,1fr)_220px]">
+                  <motion.div
+                    key={variantImages[activeImageIndex]}
+                    initial={{ opacity: 0.4, scale: 0.98 }}
+                    animate={{ opacity: 1, scale: 1 }}
+                    transition={{ duration: 0.35 }}
+                    className="relative overflow-hidden rounded-3xl bg-slate-100 h-[420px] md:h-[560px]"
+                  >
+                    <Image
+                      src={variantImages[activeImageIndex]}
+                      alt={currentVariant.name || product.name}
+                      fill
+                      priority
+                      sizes="(max-width: 1024px) 100vw, 800px"
+                      className="object-contain"
                     />
-                  ))}
-                </div>
-                <span className="text-gray-600">(4.8) • 127 reviews</span>
-              </div>
+                    {discount > 0 && (
+                      <Badge
+                        variant="danger"
+                        className="absolute left-6 top-6 shadow-lg shadow-red-500/20"
+                      >
+                        Save {discount}%
+                      </Badge>
+                    )}
+                    {!variantInStock && (
+                      <Badge
+                        variant="secondary"
+                        className="absolute right-6 top-6 bg-white/90 text-slate-700 shadow-lg border-slate-200"
+                      >
+                        Out of Stock
+                      </Badge>
+                    )}
+                  </motion.div>
 
-              {/* Price */}
-              <div className="flex items-baseline gap-3 mb-6">
-                <span className="text-4xl font-bold text-gray-900">
-                  {formatPrice(product.price)}
-                </span>
-                {product.compareAtPrice && (
-                  <span className="text-xl text-gray-500 line-through">
-                    {formatPrice(product.compareAtPrice)}
-                  </span>
-                )}
-              </div>
+                  <div className="flex flex-col gap-4">
+                    {product?.productVariants?.length > 0 && (
+                      <div className="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm">
+                        <p className="mb-2 text-sm font-semibold uppercase tracking-[0.25em] text-slate-400">
+                          Variant
+                        </p>
+                        <div className="flex flex-wrap gap-2">
+                          {product?.productVariants?.map((variant: ProductVariant, index: number) => (
+                            <button
+                              key={variant.id}
+                              type="button"
+                              onClick={() => handleVariantSelect(variant)}
+                              className={`rounded-full px-4 py-2 text-sm font-medium transition ${selectedVariant?.id === variant.id
+                                ? 'bg-primary-600 text-white'
+                                : 'bg-slate-100 text-slate-700 hover:bg-slate-200'
+                                }`}
+                            >
+                              {variant.name}
+                            </button>
+                          ))}
+                        </div>
+                      </div>
+                    )}
 
-              {/* Stock Status */}
-              <div className="mb-6">
-                {product.inStock ? (
-                  <div className="flex items-center gap-2 text-green-600">
-                    <Check className="w-5 h-5" />
-                    <span className="font-medium">In Stock</span>
-                    {product.stock && <span className="text-gray-500">({product.stock} available)</span>}
+                    <div className="grid grid-cols-3 gap-3">
+                      {variantImages.map((image: { src: string; alt?: string }, index: number) => (
+                        <button
+                          key={image.src + index}
+                          type="button"
+                          onClick={() => setActiveImageIndex(index)}
+                          className={`relative aspect-square overflow-hidden rounded-2xl border transition ${activeImageIndex === index
+                            ? 'border-primary-500 shadow-lg shadow-primary-200/60'
+                            : 'border-transparent hover:border-primary-200'
+                            }`}
+                        >
+                          <Image
+                            src={image.src}
+                            alt={image.alt || `Product image ${index + 1}`}
+                            className="h-full w-full object-cover object-center"
+                            width={200}
+                            height={200}
+                            unoptimized={true}
+                          />
+                        </button>
+                      ))}
+                    </div>
                   </div>
-                ) : (
-                  <div className="text-red-600 font-medium">Out of Stock</div>
-                )}
-              </div>
-
-              {/* Description */}
-              <div className="mb-8">
-                <p className="text-gray-700 leading-relaxed">{product.description}</p>
-              </div>
+                </div>
+              </section>
 
-              {/* Quantity Selector */}
-              {product.inStock && (
-                <div className="mb-6">
-                  <label className="block text-sm font-medium text-gray-700 mb-2">
-                    Quantity
-                  </label>
-                  <div className="flex items-center border-2 border-gray-200 rounded-lg w-fit">
-                    <button
-                      onClick={() => setQuantity(Math.max(1, quantity - 1))}
-                      className="p-3 hover:bg-gray-100 transition-colors"
+              <section className="grid gap-6 lg:grid-cols-3">
+                {highlightCards.map((card) => {
+                  const Icon = card.icon;
+                  return (
+                    <div
+                      key={card.title}
+                      className="rounded-3xl border border-slate-100 bg-white p-6 shadow-sm transition hover:-translate-y-1 hover:shadow-lg"
                     >
-                      <Minus className="w-5 h-5" />
-                    </button>
-                    <span className="px-6 font-medium min-w-[4rem] text-center">
-                      {quantity}
+                      <div className="flex items-center gap-3">
+                        <span className="rounded-2xl bg-primary-50 p-3 text-primary-600">
+                          <Icon className="h-5 w-5" />
+                        </span>
+                        <h3 className="text-base font-semibold text-slate-900">{card.title}</h3>
+                      </div>
+                      <p className="mt-3 text-sm leading-relaxed text-slate-600">{card.description}</p>
+                    </div>
+                  );
+                })}
+              </section>
+
+              <section className="grid gap-6 lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]">
+                <div className="rounded-3xl border border-slate-100 bg-white p-8 shadow-sm">
+                  <div className="flex flex-wrap items-center gap-4 pb-6">
+                    <div className="flex items-center gap-1 text-amber-500">
+                      {Array.from({ length: 5 }).map((_, index) => (
+                        <Star key={index} className="h-4 w-4 fill-current" />
+                      ))}
+                    </div>
+                    <span className="text-sm font-medium text-slate-500">
+                      Rated 4.8 • Patients love the results
                     </span>
-                    <button
-                      onClick={() => setQuantity(quantity + 1)}
-                      className="p-3 hover:bg-gray-100 transition-colors"
-                    >
-                      <Plus className="w-5 h-5" />
-                    </button>
+                  </div>
+                  <div className="space-y-8">
+                    {product.description && (
+                      <div className="space-y-3">
+                        <h3 className="text-lg font-semibold text-slate-900">Description</h3>
+                        <p className="text-base leading-relaxed text-slate-600" dangerouslySetInnerHTML={{ __html: product.description }} />
+                      </div>
+                    )}
                   </div>
                 </div>
-              )}
+                <div className="h-full rounded-3xl border border-slate-100 bg-gradient-to-br from-primary-50 via-white to-secondary-50 p-8 shadow-sm">
+                  <h3 className="text-sm font-semibold uppercase tracking-[0.3em] text-primary-500">
+                    Care tips
+                  </h3>
+                  <div className="mt-4 space-y-4 text-sm text-slate-600">
+                    <p className="leading-relaxed">
+                      Store in a cool, dry place away from direct sunlight. Check packaging for
+                      allergen statements.
+                    </p>
+                    <p className="leading-relaxed">
+                      Consult with your local pharmacist if you are combining with other treatments
+                      or have chronic conditions.
+                    </p>
+                    <p className="rounded-2xl bg-white/60 p-4 leading-relaxed text-primary-700">
+                      Questions? Our care team is on standby — reach us via chat for tailored
+                      support before you checkout.
+                    </p>
+                  </div>
+                </div>
+              </section>
 
-              {/* Actions */}
-              <div className="flex gap-4 mb-8">
-                <Button
-                  size="lg"
-                  onClick={handleAddToCart}
-                  isLoading={isAddingToCart}
-                  disabled={!product.inStock}
-                  className="flex-1"
-                >
-                  <ShoppingCart className="w-5 h-5" />
-                  Add to Cart
-                </Button>
-                <Button
-                  size="lg"
-                  variant="outline"
-                  onClick={() => setIsFavorited(!isFavorited)}
-                  className="px-6"
-                >
-                  <Heart
-                    className={`w-5 h-5 ${isFavorited ? 'fill-red-500 text-red-500' : ''}`}
-                  />
-                </Button>
-              </div>
+              <section className="rounded-3xl border border-slate-100 bg-white p-8 shadow-sm">
+                <h2 className="text-xl font-semibold text-slate-900">Product insights</h2>
+                <div className="mt-6 grid gap-6 md:grid-cols-2">
+                  <div className="rounded-2xl border border-slate-200 bg-slate-50/60 p-5">
+                    <p className="text-xs font-semibold uppercase tracking-[0.3em] text-slate-500">
+                      Availability
+                    </p>
+                    <div className="mt-3 flex items-center gap-2 text-sm text-slate-600">
+                      <Check className="h-4 w-4 text-primary-500" />
+                      {product.inStock ? 'Available for dispatch today' : 'Currently restocking'}
+                    </div>
+                    {product.stock !== undefined && (
+                      <p className="mt-2 text-xs text-slate-500">
+                        {product.stock > 0
+                          ? `${product.stock} units remaining in inventory`
+                          : 'Join the waitlist to be notified first'}
+                      </p>
+                    )}
+                  </div>
+                  <div className="rounded-2xl border border-slate-200 bg-slate-50/60 p-5">
+                    <p className="text-xs font-semibold uppercase tracking-[0.3em] text-slate-500">
+                      Product details
+                    </p>
+                    <div className="mt-3 space-y-2 text-sm text-slate-600">
+                      <p>
+                        <span className="font-medium text-slate-700">Variant:</span> {currentVariant.name}
+                      </p>
+                      <p>
+                        <span className="font-medium text-slate-700">SKU:</span> {variantSku}
+                      </p>
+                      <p>
+                        <span className="font-medium text-slate-700">Status:</span>{' '}
+                        <span className={variantInStock ? 'text-green-600' : 'text-amber-600'}>
+                          {variantInStock ? 'In Stock' : 'Out of Stock'}
+                        </span>
+                      </p>
+                      <p>
+                        <span className="font-medium text-slate-700">Last updated:</span>{' '}
+                        {lastUpdatedLabel}
+                      </p>
+                      <p>
+                        <span className="font-medium text-slate-700">Ships from:</span> Local
+                        pharmacy distribution center
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </section>
+            </div>
 
-              {/* Features */}
-              <div className="space-y-4 border-t border-gray-200 pt-6">
-                <div className="flex items-center gap-3 text-gray-700">
-                  <Truck className="w-5 h-5 text-primary-600" />
-                  <span>Free shipping on orders over $50</span>
+            <aside className="space-y-6 lg:sticky lg:top-24">
+              <div className="rounded-3xl border border-slate-100 bg-white p-8 shadow-lg shadow-primary-100/40">
+                <div className="flex items-baseline gap-3">
+                  <p className="text-3xl font-bold text-slate-900">
+                    {selectedVariant ? formatPrice(selectedVariant.finalPrice) : formatPrice(product.price)}
+                  </p>
+                  {variantComparePrice && variantComparePrice > variantPrice && (
+                    <p className="text-base text-slate-400 line-through">
+                      {formatPrice(variantComparePrice)}
+                    </p>
+                  )}
+                  {discount > 0 && (
+                    <Badge variant="danger" size="sm">
+                      -{discount}%
+                    </Badge>
+                  )}
                 </div>
-                <div className="flex items-center gap-3 text-gray-700">
-                  <Shield className="w-5 h-5 text-primary-600" />
-                  <span>30-day money-back guarantee</span>
+
+                <div className="mt-6 space-y-4">
+                  <div className="flex items-center gap-3 rounded-2xl bg-primary-50/80 px-4 py-3 text-sm font-medium text-primary-700">
+                    <ShieldCheck className="h-4 w-4" />
+                    Pharmacist verified product
+                  </div>
+
+                  <div className="flex items-center justify-between rounded-2xl border border-slate-200 px-4 py-3">
+                    <span className="text-sm font-medium text-slate-600">Qty</span>
+                    <div className="flex items-center rounded-full border border-slate-200 bg-slate-50">
+                      <button
+                        type="button"
+                        onClick={() => setQuantity((current) => Math.max(1, current - 1))}
+                        className="rounded-l-full p-2 hover:bg-primary-100/60"
+                        aria-label="Decrease quantity"
+                      >
+                        <Minus className="h-4 w-4" />
+                      </button>
+                      <span className="w-12 text-center text-sm font-semibold text-slate-700">
+                        {quantity}
+                      </span>
+                      <button
+                        type="button"
+                        onClick={() => setQuantity((current) => current + 1)}
+                        className="rounded-r-full p-2 hover:bg-primary-100/60"
+                        aria-label="Increase quantity"
+                      >
+                        <Plus className="h-4 w-4" />
+                      </button>
+                    </div>
+                  </div>
                 </div>
+
+                {selectedVariant && (
+                  <div className="mt-4 text-sm">
+                    {selectedVariant.inventoryStatus === ProductVariantInventoryStatusEnum.OUTOFSTOCK ||
+                      selectedVariant.inventoryStatus === ProductVariantInventoryStatusEnum.LOWSTOCK ? (
+                      <div className="text-red-600 font-medium">Out of Stock</div>
+                    ) : <div className="text-green-600 font-medium">In Stock</div>
+                    }
+                  </div>
+                )}
+                <div className="mt-6 space-x-3">
+                  <Button
+                    size="lg"
+                    className="w-full"
+                    onClick={handleAddToCart}
+                    isLoading={isAddingToCart}
+                    disabled={!selectedVariant || selectedVariant.inventoryStatus === ProductVariantInventoryStatusEnum.OUTOFSTOCK}
+                  >
+                    <ShoppingCart className="h-5 w-5" />
+                    {!selectedVariant
+                      ? 'Select a variant'
+                      : selectedVariant.inventoryStatus === ProductVariantInventoryStatusEnum.OUTOFSTOCK
+                        ? 'Out of Stock'
+                        : `Add to Cart`}
+                  </Button>
+                  <Button
+                    size="lg"
+                    variant="outline"
+                    className="w-full"
+                    onClick={handleToggleFavorite}
+                  >
+                    <Heart
+                      className={`h-5 w-5 ${isFavorited ? 'fill-red-500 text-red-500' : 'text-slate-500'
+                        }`}
+                    />
+                    {isFavorited ? 'Saved' : 'Save for later'}
+                  </Button>
+                </div>
+
               </div>
-            </motion.div>
-          </div>
-        </div>
 
-        {/* Related Products */}
-        {relatedProducts.length > 0 && (
-          <div>
-            <h2 className="text-3xl font-bold text-gray-900 mb-8">You May Also Like</h2>
-            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
-              {relatedProducts.map((relatedProduct) => (
-                <ProductCard key={relatedProduct.id} product={relatedProduct} />
-              ))}
-            </div>
+              <div className="rounded-3xl border border-primary-100 bg-primary-50/70 p-6 text-sm text-primary-700 shadow-sm">
+                <p className="font-semibold uppercase tracking-[0.25em]">Need advice?</p>
+                <p className="mt-2 leading-relaxed">
+                  Chat with a pharmacist in real time before completing your purchase. We will help
+                  you choose supporting supplements and answer dosing questions.
+                </p>
+              </div>
+            </aside>
           </div>
-        )}
+
+          {relatedProducts.length > 0 && (
+            <section className="mt-20">
+              <div className="flex items-center justify-between">
+                <div>
+                  <h2 className="text-2xl font-semibold text-slate-900">You may also like</h2>
+                  <p className="mt-1 text-sm text-slate-500">
+                    Hand-picked recommendations that pair nicely with this product.
+                  </p>
+                </div>
+                <Link href="/shop" className="hidden md:inline-flex">
+                  <Button variant="ghost" className="text-primary-600">
+                    View all products
+                  </Button>
+                </Link>
+              </div>
+              <div className="mt-6 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
+                {relatedProducts?.map((relatedProduct) => (
+                  <ProductCard key={relatedProduct.id} product={relatedProduct} />
+                ))}
+              </div>
+            </section>
+          )}
+        </div>
       </div>
     </div>
   );
-}
-
+}