hey-pharmacist-ecommerce 1.1.10 → 1.1.12

package/src/screens/ProductDetailScreen.tsx

@@ -33,6 +33,7 @@ import { AXIOS_CONFIG } from '@/lib/Apis/wrapper';
 import { useWishlist } from '@/providers/WishlistProvider';
 import { ProductsApi, ProductVariant, ProductVariantInventoryStatusEnum } from '@/lib/Apis';
 import { useBasePath } from '@/providers/BasePathProvider';
+import { Category } from '@/lib/types';
 
 const safeFormatDate = (date?: Date | string, format: 'long' | 'short' = 'long'): string => {
   if (!date) return 'N/A';
@@ -103,6 +104,18 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
       }));
     }
 
+    // Fallback to product media if no variant media
+    if (product?.productMedia?.length) {
+      return product.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,
@@ -194,6 +207,8 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
 
   const handleVariantSelect = async (variant: ProductVariant) => {
     setSelectedVariant(variant);
+    // Reset to first image of the selected variant
+    setActiveImageIndex(0);
   };
 
   const handleAddToCart = async () => {
@@ -293,414 +308,392 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
     );
   }
 
-  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-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">
+    <div className="bg-white">
+
+      <div className="min-h-screen bg-white max-w-7xl mx-auto">
+        <div className="relative pb-20 pt-8">
+          <div className="container mx-auto px-4">
+            {/* Back Button */}
+            <div className="mb-6">
               <Button
                 variant="ghost"
-                className="text-white hover:bg-white/10"
+                className="text-slate-600 hover:text-slate-900 hover:bg-slate-100"
                 onClick={() => router.push(buildPath('/shop'))}
               >
-                <ArrowLeft className="h-5 w-5" />
-                Continue shopping
+                <ArrowLeft className="h-4 w-4 mr-2" />
+                Back to Shop
               </Button>
-              <div className="hidden items-center gap-3 text-sm text-white/80 md:flex">
-                <Link href={buildPath('/')} className="transition hover:text-white">
-                  Home
-                </Link>
-                <ChevronRight className="h-4 w-4" />
-                <Link href={buildPath('/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: 24 }}
-              animate={{ opacity: 1, y: 0 }}
-              className="max-w-3xl space-y-4"
-            >
-              {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 className="grid gap-10 lg:grid-cols-[minmax(0,50fr)_minmax(0,50fr)]">
+              <div className="space-y-10">
+                <section className="rounded-3xl ">
+                  <div className="space-y-6">
+                    <motion.div
+                      key={selectedVariant?.id || 'default'}
+                      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]"
+                    >
+                      {variantImages.length > 0 && variantImages[activeImageIndex] ? (
+                        <Image
+                          src={variantImages[activeImageIndex].src || variantImages[activeImageIndex].url || variantImages[activeImageIndex].file}
+                          alt={currentVariant.name || product.name}
+                          fill
+                          priority
+                          sizes="(max-width: 1024px) 100vw, 800px"
+                          className="object-contain"
+                        />
+                      ) : product?.productMedia?.[0]?.file ? (
+                        <Image
+                          src={product.productMedia[0].file}
+                          alt={product.name}
+                          fill
+                          priority
+                          sizes="(max-width: 1024px) 100vw, 800px"
+                          className="object-contain"
+                        />
+                      ) : null}
+                      {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>
+
+                    {/* Variant Photos Below Main Photo */}
+                    {variantImages.length > 0 && (
+                      <div className="grid grid-cols-8 gap-2">
+                        {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-lg border-2 transition-all ${activeImageIndex === index
+                                ? 'border-primary-500 ring-2 ring-primary-200 ring-offset-2 shadow-md'
+                                : 'border-slate-200 hover:border-primary-300'
+                              }`}
+                          >
+                            <Image
+                              src={image?.src}
+                              alt={image.alt || `Product image ${index + 1}`}
+                              className="h-full w-full object-cover object-center"
+                              width={80}
+                              height={80}
+                              unoptimized={true}
+                            />
+                          </button>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                </section>
+
+
+
+
               </div>
-            </motion.div>
-          </div>
-        </div>
-      </section>
 
-      <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"
-                    />
-                    {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>
 
-                  <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) => (
+              <aside className="space-y-6 lg:sticky lg:top-24">
+                <div className="">
+                  {/* Category Path */}
+                  {product.parentCategories && product.parentCategories.length > 0 && (
+                    <div className="mb-4 text-sm text-slate-600">
+                      {product.parentCategories.map((cat: Category, index: number) => (
+                        <span key={cat.id || index}>
+                          {cat.name}
+                          {index < product.parentCategories.length - 1 && ' • '}
+                        </span>
+                      ))}
+                      {product.parentSubCategories && product.parentSubCategories.length > 0 && (
+                        <>
+                          {' • '}
+                          {product.parentSubCategories.map((subCat: Category, index: number) => (
+                            <span key={subCat.id || index}>
+                              {subCat.name}
+                              {index < product.parentSubCategories.length - 1 && ' • '}
+                            </span>
+                          ))}
+                        </>
+                      )}
+                    </div>
+                  )}
+
+                  {/* Product Name */}
+                  <h1 className="text-2xl font-bold text-slate-900 mb-6">
+                    {product.name}
+                  </h1>
+
+                  {/* Variant Selector with Images */}
+                  {product?.productVariants && product.productVariants.length > 0 && (
+                    <div className="mb-6">
+                      <label className="block text-sm font-medium text-slate-700 mb-3">
+                        Select Variant
+                      </label>
+                      <div className="space-y-3">
+                        {product.productVariants.map((variant: ProductVariant) => {
+                          const isSelected = selectedVariant?.id === variant.id;
+                          const variantImage = variant.productMedia?.[0]?.file
+                            || product.productMedia?.[0]?.file
+                            || product.images?.[0]
+                            || '/placeholder-product.jpg';
+                          return (
                             <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'
+                              className={`flex w-full items-center gap-3 rounded-lg border-2 px-4 py-3 text-left transition ${isSelected
+                                  ? 'border-primary-500 bg-primary-50'
+                                  : 'border-slate-200 bg-white hover:border-primary-300'
                                 }`}
                             >
-                              {variant.name}
+                              <div className={`relative h-12 w-12 flex-shrink-0 overflow-hidden rounded-full border-2 ${isSelected ? 'border-primary-500' : 'border-slate-200'
+                                }`}>
+                                <Image
+                                  src={variantImage}
+                                  alt={variant.name || 'Variant image'}
+                                  fill
+                                  className="object-cover"
+                                  sizes="48px"
+                                />
+                              </div>
+                              <div className="flex-1">
+                                <p className={`text-sm font-medium ${isSelected ? 'text-primary-700' : 'text-slate-900'}`}>
+                                  {variant.name}
+                                </p>
+                                {variant.sku && (
+                                  <p className="text-xs text-slate-500 mt-0.5">SKU: {variant.sku}</p>
+                                )}
+                              </div>
+                              {isSelected && (
+                                <Check className="h-5 w-5 text-primary-600 flex-shrink-0" />
+                              )}
                             </button>
-                          ))}
-                        </div>
+                          );
+                        })}
                       </div>
+                    </div>
+                  )}
+
+                  {/* Price */}
+                  <div className="flex items-baseline gap-3 mb-6">
+                    <p className="text-3xl font-bold text-orange-600">
+                      {selectedVariant ? formatPrice(selectedVariant.finalPrice) : formatPrice(product.finalPrice || product.price || 0)}
+                    </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="grid grid-cols-3 gap-3">
-                      {variantImages.map((image: { src: string; alt?: string }, index: number) => (
+                  {/* Stock Status */}
+                  {selectedVariant && (
+                    <div className="mb-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-orange-600 font-medium">
+                          Only {selectedVariant.inventoryCount || product.inventoryCount || 0} left in stock - Order soon!
+                        </div>
+                      )}
+                    </div>
+                  )}
+
+                  {/* SKU */}
+                  {variantSku && variantSku !== 'N/A' && (
+                    <div className="mb-4 text-sm text-slate-600">
+                      <span className="font-medium">SKU:</span> {variantSku}
+                    </div>
+                  )}
+
+                  {/* Description */}
+                  {product.description && (
+                    <p className="mb-6 text-sm text-slate-600">
+                      {product.description.replace(/<[^>]*>/g, '').substring(0, 150)}
+                      {product.description.length > 150 && '...'}
+                    </p>
+                  )}
+
+                  {/* Quantity Selector */}
+                  <div className="mb-6">
+                    <label className="block text-sm font-medium text-slate-700 mb-2">Quantity</label>
+                    <div className="flex items-center gap-3">
+                      <div className="flex items-center rounded-lg border border-slate-200 bg-white">
                         <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'
-                            }`}
+                          onClick={() => setQuantity((current) => Math.max(1, current - 1))}
+                          className="px-3 py-2 hover:bg-slate-50"
+                          aria-label="Decrease quantity"
                         >
-                          <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}
-                          />
+                          <Minus className="h-4 w-4 text-slate-600" />
                         </button>
-                      ))}
-                    </div>
-                  </div>
-                </div>
-              </section>
-
-              <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"
-                    >
-                      <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 className="w-12 text-center text-sm font-semibold text-slate-900">
+                          {quantity}
                         </span>
-                        <h3 className="text-base font-semibold text-slate-900">{card.title}</h3>
+                        <button
+                          type="button"
+                          onClick={() => setQuantity((current) => {
+                            const maxQty = selectedVariant?.inventoryCount || product.inventoryCount || 999;
+                            return Math.min(maxQty, current + 1);
+                          })}
+                          className="px-3 py-2 hover:bg-slate-50"
+                          aria-label="Increase quantity"
+                        >
+                          <Plus className="h-4 w-4 text-slate-600" />
+                        </button>
                       </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" />
-                      ))}
+                      {selectedVariant && (
+                        <span className="text-sm text-slate-500">
+                          {selectedVariant.inventoryCount || product.inventoryCount || 0} available
+                        </span>
+                      )}
                     </div>
-                    <span className="text-sm font-medium text-slate-500">
-                      Rated 4.8 • Patients love the results
-                    </span>
-                  </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>
 
-              <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>
+                  {/* Action Buttons */}
+                  <div className="flex flex-col gap-4">
+                    <Button
+                      size="md"
+                      className="w-full bg-orange-500 hover:bg-orange-600 text-white py-2.5"
+                      onClick={handleAddToCart}
+                      isLoading={isAddingToCart}
+                      disabled={!selectedVariant || selectedVariant.inventoryStatus === ProductVariantInventoryStatusEnum.OUTOFSTOCK}
+                    >
+                      <ShoppingCart className="h-4 w-4" />
+                      {!selectedVariant
+                        ? 'Select a variant'
+                        : selectedVariant.inventoryStatus === ProductVariantInventoryStatusEnum.OUTOFSTOCK
+                          ? 'Out of Stock'
+                          : 'Add to Cart'}
+                    </Button>
+                    <Button
+                      size="md"
+                      variant="outline"
+                      className="w-full py-2.5"
+                      onClick={handleToggleFavorite}
+                    >
+                      <Heart
+                        className={`h-4 w-4 mr-2 ${isFavorited ? 'fill-red-500 text-red-500' : 'text-slate-500'}`}
+                      />
+                      {isFavorited ? 'Saved' : 'Save for later'}
+                    </Button>
                   </div>
+
                 </div>
-              </section>
-            </div>
 
-            <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)}
+                <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>
-                  {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="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
+              </aside>
+            </div>
+            <section className="mt-10">
+              <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>
-
-                  <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>
+                  <span className="text-sm font-medium text-slate-500">
+                    Rated 4.8 • Patients love the results
+                  </span>
+                </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>
+            </section>
 
-                {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>
 
-              <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.
+            <div className="rounded-2xl border border-slate-200 bg-slate-50/60 p-5 mt-10">
+              <p className="text- 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>
-            </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>
+            {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={buildPath('/shop')} className="hidden md:inline-flex">
+                    <Button variant="ghost" className="text-primary-600">
+                      View all products
+                    </Button>
+                  </Link>
                 </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 className="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
+                  {relatedProducts?.map((relatedProduct) => (
+                    <ProductCard
+                      key={relatedProduct.id || relatedProduct._id}
+                      product={relatedProduct}
+                      onClickProduct={(item) => {
+                        router.push(buildPath(`/products/${item._id || item.id}`));
+                      }}
+                    />
+                  ))}
+                </div>
+              </section>
+            )}
+          </div>
         </div>
       </div>
     </div>