hey-pharmacist-ecommerce 1.1.12 → 1.1.14

package/src/screens/ProductDetailScreen.tsx

@@ -17,6 +17,8 @@ import {
   Sparkles,
   Star,
   Truck,
+  ChevronLeft,
+  RotateCcw
 } from 'lucide-react';
 import Link from 'next/link';
 import Image from 'next/image';
@@ -26,7 +28,7 @@ import { ProductCard } from '@/components/ProductCard';
 import { useProduct } from '@/hooks/useProducts';
 import { useCart } from '@/providers/CartProvider';
 import { formatDate, formatPrice } from '@/lib/utils/format';
-import { toast } from 'sonner';
+import { useNotification } from '@/providers/NotificationProvider';
 import { useRouter } from 'next/navigation';
 import { ProductVariantsApi } from '@/lib/Apis/apis/product-variants-api';
 import { AXIOS_CONFIG } from '@/lib/Apis/wrapper';
@@ -56,6 +58,7 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
   const { buildPath } = useBasePath();
   const { product: productData, isLoading } = useProduct(productId);
   const { addToCart } = useCart();
+  const notification = useNotification();
 
   // State declarations
   const [selectedVariant, setSelectedVariant] = useState<ProductVariant | null>(null);
@@ -65,6 +68,7 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
   const [relatedProducts, setRelatedProducts] = useState<any[]>([]);
   const [initialProductData, setInitialProductData] = useState<any>(null);
   const [activeImageIndex, setActiveImageIndex] = useState(0);
+  const [activeTab, setActiveTab] = useState<'description' | 'reviews'>('description');
 
 
   useEffect(() => {
@@ -72,6 +76,9 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
   }, [selectedVariant]);
 
   const product = useMemo(() => {
+    console.log('productData', productData);
+    console.log('selectedVariant', selectedVariant);
+    console.log('initialProductData', initialProductData);
     if (initialProductData && !productData) {
       return initialProductData;
     }
@@ -221,12 +228,16 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
         quantity,
         selectedVariant.id
       );
-      toast.success('Added to cart', {
-        description: `${quantity} × ${product.name}${selectedVariant.name ? ` (${selectedVariant.name})` : ''}`,
-      });
+      notification.success(
+        'Added to cart',
+        `${quantity} × ${product.name}${selectedVariant.name ? ` (${selectedVariant.name})` : ''} added to your cart.`
+      );
     } catch (error) {
       console.error('Failed to add to cart', error);
-      toast.error('Could not add to cart. Please try again.');
+      notification.error(
+        'Could not add to cart',
+        'Something went wrong while adding this item. Please try again.'
+      );
     } finally {
       setIsAddingToCart(false);
     }
@@ -247,16 +258,25 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
     try {
       if (isFavorited) {
         await removeFromWishlist(product.id);
-        toast.info('Removed from saved items');
+        notification.info(
+          'Removed from saved items',
+          `${product.name} was removed from your saved items.`
+        );
       } else {
         await addToWishlist(product);
-        toast.success('Saved to your favorites');
+        notification.success(
+          'Saved to favorites',
+          `${product.name} was added 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');
+      notification.error(
+        'Could not update favorites',
+        'We could not update your favorites. Please try again.'
+      );
     }
   };
 
@@ -312,22 +332,23 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
 
 
   return (
-    <div className="bg-white">
+    <div className="min-h-screen bg-white">
+      {/* Breadcrumb */}
+      <div className="bg-gray-50 border-b border-gray-200 py-4">
+        <div className="max-w-[1400px] mx-auto px-8 md:px-12">
+          <button
+            onClick={() => router.push(buildPath('/shop'))}
+            className="flex items-center gap-2 font-['Poppins',sans-serif] text-[13px] text-muted hover:text-primary transition-colors"
+          >
+            <ChevronLeft className="size-4" />
+            Back to Shop
+          </button>
+        </div>
+      </div>
 
-      <div className="min-h-screen bg-white max-w-7xl mx-auto">
+      <section className="py-12">
         <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-slate-600 hover:text-slate-900 hover:bg-slate-100"
-                onClick={() => router.push(buildPath('/shop'))}
-              >
-                <ArrowLeft className="h-4 w-4 mr-2" />
-                Back to Shop
-              </Button>
-            </div>
             <div className="grid gap-10 lg:grid-cols-[minmax(0,50fr)_minmax(0,50fr)]">
               <div className="space-y-10">
                 <section className="rounded-3xl ">
@@ -358,22 +379,30 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                           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>
-                      )}
+
+                      <div className="absolute top-6 left-6 flex flex-col gap-3">
+                        {product.salePrice && (
+                          <div className="bg-[#E67E50] text-white rounded-full px-4 py-2">
+                            <span className="font-['Poppins',sans-serif] font-bold text-[12px] uppercase tracking-wide">
+                              Save {product.discount}%
+                            </span>
+                          </div>
+                        )}
+                        {/* {product.bestseller && (
+                          <div className="bg-secondary text-white rounded-full px-4 py-2">
+                            <span className="font-['Poppins',sans-serif] font-semibold text-[11px] uppercase tracking-wide">
+                              Bestseller
+                            </span>
+                          </div>
+                        )}
+                        {product.newArrival && (
+                          <div className="bg-primary text-white rounded-full px-4 py-2">
+                            <span className="font-['Poppins',sans-serif] font-semibold text-[11px] uppercase tracking-wide">
+                              New Arrival
+                            </span>
+                          </div>
+                        )} */}
+                      </div>
                     </motion.div>
 
                     {/* Variant Photos Below Main Photo */}
@@ -385,8 +414,8 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                             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'
+                                ? 'border-primary/50 ring-2 ring-primary/80 ring-offset-2 shadow-md'
+                                : 'border-slate-200 hover:border-primary/50'
                               }`}
                           >
                             <Image
@@ -403,50 +432,104 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                     )}
                   </div>
                 </section>
-
-
-
-
               </div>
 
 
               <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 && ' • '}
+                  <div className="mb-4">
+                  <p className="font-['Poppins',sans-serif] text-[12px] text-primary uppercase tracking-wide font-medium mb-2">
+                    {product.brand} • {product.parentCategories?.[0].name}
+                  </p>
+                  <h1 className="text-3xl font-['Poppins',sans-serif] font-semibold text-secondary tracking-[-1.5px] mb-3">
+                    {product.name}
+                  </h1>
+                    {/* Rating */}
+                <div className="flex items-center gap-3">
+                  <div className="flex items-center gap-1">
+                    {[...Array(5)].map((_, i) => (
+                      <Star
+                        key={i}
+                        className={`size-4 ${
+                          i < Math.floor(product.rating)
+                            ? 'text-[#E67E50] fill-[#E67E50]'
+                            : 'text-gray-300'
+                        }`}
+                      />
+                    ))}
+                  </div>
+                  <span className="font-['Poppins',sans-serif] text-[14px] text-muted">
+                    {product.rating} ({product.reviewCount? product.reviewCount : 0} reviews)
+                  </span>
+                </div>
+
+                  <div className="flex items-center gap-3 mb-6 pb-6 border-b-2 border-gray-100">
+                    <span className="font-['Poppins',sans-serif] font-bold text-[40px] text-[#E67E50]">
+                      {selectedVariant ? formatPrice(selectedVariant.finalPrice) : formatPrice(product.finalPrice || product.price || 0)}
+                    </span>
+                    {variantComparePrice && variantComparePrice > variantPrice && (
+                    <>
+                      <span className="font-['Poppins',sans-serif] text-[24px] text-muted line-through">
+                        ${product.price.toFixed(2)}
+                      </span>
+                      <div className="px-3 py-1 rounded-full bg-[#E67E50]/10">
+                        <span className="font-['Poppins',sans-serif] font-semibold text-[13px] text-[#E67E50]">
+                          Save ${formatPrice(variantComparePrice)}
                         </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 && ' • '}
+                      </div>
+                    </>
+                  )}
+                </div>
+
+                  {/* Stock Status */}
+                  {selectedVariant && (
+                    <div className="mb-6">
+                      <div className="flex items-center gap-2 mb-2">
+                        {selectedVariant.inventoryStatus === ProductVariantInventoryStatusEnum.OUTOFSTOCK ||
+                          selectedVariant.inventoryStatus === ProductVariantInventoryStatusEnum.LOWSTOCK ? (
+                          <>
+                            <div className="size-3 rounded-full bg-red-500" />
+                            <span className="font-['Poppins',sans-serif] text-[13px] text-red-600 font-medium">
+                              Out of Stock
                             </span>
-                          ))}
+                          </>
+                        ) : selectedVariant.inventoryCount <= 10 ? (
+                        <>
+                          <div className="size-3 rounded-full bg-orange-500 animate-pulse" />
+                          <span className="font-['Poppins',sans-serif] text-[13px] text-orange-600 font-medium">
+                            Only {selectedVariant.inventoryCount} left in stock - Order soon!
+                          </span>
+                        </>
+                      ) : (
+                        <>
+                          <div className="size-3 rounded-full bg-green-500" />
+                          <span className="font-['Poppins',sans-serif] text-[13px] text-green-600 font-medium">
+                            In Stock
+                          </span>
                         </>
                       )}
+                      
                     </div>
+                    <p className="font-['Poppins',sans-serif] text-[12px] text-muted">
+                      SKU: {selectedVariant?.sku}
+                    </p>
+                  </div>
                   )}
 
-                  {/* Product Name */}
-                  <h1 className="text-2xl font-bold text-slate-900 mb-6">
-                    {product.name}
-                  </h1>
+                  {/* Description */}
+                  {product.description && (
+                    <p className="font-['Poppins',sans-serif] text-[14px] text-muted leading-[1.7] mb-8">
+                      <div dangerouslySetInnerHTML={{ __html: product.description }} />
+                    </p>
+                  )}
 
                   {/* 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">
+                    <h3 className="font-['Poppins',sans-serif] font-semibold text-[14px] text-secondary mb-3">
                         Select Variant
-                      </label>
-                      <div className="space-y-3">
+                      </h3>
+                      <div className="flex flex-wrap gap-3">
                         {product.productVariants.map((variant: ProductVariant) => {
                           const isSelected = selectedVariant?.id === variant.id;
                           const variantImage = variant.productMedia?.[0]?.file
@@ -458,13 +541,13 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                               key={variant.id}
                               type="button"
                               onClick={() => handleVariantSelect(variant)}
-                              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'
-                                }`}
+                              className={`flex items-start gap-3 px-4 py-2.5 rounded-xl border-2 transition-all ${
+                              isSelected
+                                ? 'border-primary bg-primary/5'
+                                : 'border-gray-200 hover:border-primary/50'
+                            }`}
                             >
-                              <div className={`relative h-12 w-12 flex-shrink-0 overflow-hidden rounded-full border-2 ${isSelected ? 'border-primary-500' : 'border-slate-200'
-                                }`}>
+                              <div className={`relative h-12 w-12 flex-shrink-0 overflow-hidden rounded-full border-2 ${isSelected ? 'border-primary' : 'border-slate-200'}`}>
                                 <Image
                                   src={variantImage}
                                   alt={variant.name || 'Variant image'}
@@ -474,15 +557,15 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                                 />
                               </div>
                               <div className="flex-1">
-                                <p className={`text-sm font-medium ${isSelected ? 'text-primary-700' : 'text-slate-900'}`}>
+                                <p className={`text-start text-sm font-medium ${isSelected ? 'text-secondary' : 'text-slate-900'}`}>
                                   {variant.name}
                                 </p>
                                 {variant.sku && (
-                                  <p className="text-xs text-slate-500 mt-0.5">SKU: {variant.sku}</p>
+                                  <p className="text-start 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" />
+                                <Check className="h-5 w-5 text-secondary flex-shrink-0" />
                               )}
                             </button>
                           );
@@ -491,79 +574,34 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                     </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>
-
-                  {/* 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="mb-8">
+                  <h3 className="font-['Poppins',sans-serif] font-semibold text-[14px] text-secondary mb-3">
+                    Quantity
+                  </h3>
                     <div className="flex items-center gap-3">
-                      <div className="flex items-center rounded-lg border border-slate-200 bg-white">
+                      <div className="flex items-center gap-4 bg-gray-100 rounded-full px-6 py-3">
+
                         <button
                           type="button"
                           onClick={() => setQuantity((current) => Math.max(1, current - 1))}
-                          className="px-3 py-2 hover:bg-slate-50"
-                          aria-label="Decrease quantity"
-                        >
-                          <Minus className="h-4 w-4 text-slate-600" />
-                        </button>
-                        <span className="w-12 text-center text-sm font-semibold text-slate-900">
-                          {quantity}
-                        </span>
-                        <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"
+
+                          className="font-['Poppins',sans-serif] font-bold text-[18px] text-secondary hover:text-primary transition-colors"
                           aria-label="Increase quantity"
                         >
-                          <Plus className="h-4 w-4 text-slate-600" />
+                          -
                         </button>
+                    <span className="font-['Poppins',sans-serif] font-semibold text-[16px] text-secondary min-w-[30px] text-center">
+                          {quantity}
+                      </span>
+                      <button
+                        onClick={() => setQuantity(Math.min(selectedVariant?.inventoryCount || product.inventoryCount || 999, quantity + 1))}
+                        disabled={quantity >= (selectedVariant?.inventoryCount || product.inventoryCount || 0)} 
+                        className="font-['Poppins',sans-serif] font-bold text-[18px] text-secondary hover:text-primary transition-colors disabled:opacity-50"
+                      >
+                        +
+                      </button>
                       </div>
                       {selectedVariant && (
                         <span className="text-sm text-slate-500">
@@ -574,128 +612,190 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                   </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"
+                  <div className="flex flex-col sm:flex-row gap-3 mb-8">
+                    <button
+                      className="flex-1 font-['Poppins',sans-serif] font-medium text-[14px] px-8 py-4 rounded-full transition-all duration-300 flex items-center justify-center gap-3 bg-[#E67E50] text-white hover:bg-[#d66f45] hover:shadow-lg disabled:opacity-50 disabled:cursor-not-allowed"
                       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>
+                      {isAddingToCart ? (
+                        <>
+                          <svg className="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true">
+                            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                          </svg>
+                          Loading...
+                        </>
+                      ) : (
+                        <>
+                          <ShoppingCart className="h-4 w-4" />
+                          {!selectedVariant
+                            ? 'Select a variant'
+                            : selectedVariant.inventoryStatus === ProductVariantInventoryStatusEnum.OUTOFSTOCK
+                              ? 'Out of Stock'
+                              : 'Add to Cart'}
+
+                        </>
+                      )
+                      }
+                    </button>
+                    <button className="sm:w-auto px-6 py-4 rounded-full border-2 border-primary hover:bg-primary/5 transition-all flex items-center justify-center"
+                    onClick={handleToggleFavorite}>
+                    <Heart className={`h-4 w-4  ${isFavorited ? 'fill-red-500 text-red-500' : 'text-primary'}`}/>
+                  </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.
-                  </p>
+                {/* Benefits */}
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 p-6 bg-gradient-to-br from-[#5B9BD5]/5 to-[#2B4B7C]/5 rounded-[24px]">
+                <div className="flex items-start gap-3">
+                  <div className="size-10 rounded-full bg-white flex items-center justify-center shrink-0">
+                    <Truck className="size-5 text-primary" />
+                  </div>
+                  <div>
+                    <p className="font-['Poppins',sans-serif] font-semibold text-[12px] text-secondary mb-1">
+                      Free Shipping
+                    </p>
+                    <p className="font-['Poppins',sans-serif] text-[11px] text-muted">
+                      On all orders
+                    </p>
+                  </div>
                 </div>
-              </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 className="flex items-start gap-3">
+                  <div className="size-10 rounded-full bg-white flex items-center justify-center shrink-0">
+                    <RotateCcw className="size-5 text-primary" />
+                  </div>
+                  <div>
+                    <p className="font-['Poppins',sans-serif] font-semibold text-[12px] text-secondary mb-1">
+                      Easy Returns
+                    </p>
+                    <p className="font-['Poppins',sans-serif] text-[11px] text-muted">
+                      30-day return policy
+                    </p>
                   </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 className="flex items-start gap-3">
+                  <div className="size-10 rounded-full bg-white flex items-center justify-center shrink-0">
+                    <Shield className="size-5 text-primary" />
+                  </div>
+                  <div>
+                    <p className="font-['Poppins',sans-serif] font-semibold text-[12px] text-secondary mb-1">
+                      Secure Checkout
+                    </p>
+                    <p className="font-['Poppins',sans-serif] text-[11px] text-muted">
+                      Safe & protected
+                    </p>
+                  </div>
+                </div>
+                <div className="flex items-start gap-3">
+                  <div className="size-10 rounded-full bg-white flex items-center justify-center shrink-0">
+                    <Package className="size-5 text-primary" />
+                  </div>
+                  <div>
+                    <p className="font-['Poppins',sans-serif] font-semibold text-[12px] text-secondary mb-1">
+                      Quality Guaranteed
+                    </p>
+                    <p className="font-['Poppins',sans-serif] text-[11px] text-muted">
+                      Premium materials
+                    </p>
+                  </div>
                 </div>
               </div>
-            </section>
-
-
-
-            <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">
+
+
+            {/* Product Details Tabs */}
+            <div className="mb-16">
+              <div className="flex items-center gap-2 mb-8 border-b-2 border-gray-100">
+                {(['description', 'reviews'] as const).map((tab) => (
+                  <button
+                    key={tab}
+                    onClick={() => setActiveTab(tab)}
+                    className={`font-['Poppins',sans-serif] font-medium text-[14px] px-6 py-4 transition-all ${
+                      activeTab === tab
+                        ? 'text-primary border-b-2 border-primary -mb-0.5'
+                        : 'text-muted hover:text-primary'
+                    }`}
+                  >
+                    {tab.charAt(0).toUpperCase() + tab.slice(1)}
+                  </button>
+                ))}
+              </div>
+
+              <div className="bg-white rounded-[24px] p-8 border-2 border-gray-100">
+                {activeTab === 'description' && (
                   <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.
+                    <h3 className="font-['Poppins',sans-serif] font-semibold text-secondary mb-4">
+                      Product Description
+                    </h3>
+                    <p className="font-['Poppins',sans-serif] text-[14px] text-muted leading-[1.8] mb-4">
+                      <div dangerouslySetInnerHTML={{ __html: product.description }} />
+
                     </p>
+
+                    <div className="mt-6">
+                      <h4 className="font-['Poppins',sans-serif] font-semibold text-[13px] text-secondary mb-3">
+                        Last updated:
+                      </h4>
+                      <p className="font-['Poppins',sans-serif] text-[14px] text-muted">
+                        {lastUpdatedLabel}
+                      </p>
+                    </div>
+
+                    {/* shipped from */}
+                    <div className="mt-6">
+                      <h4 className="font-['Poppins',sans-serif] font-semibold text-[13px] text-secondary mb-3">
+                        Shipped from:
+                      </h4>
+                      <p className="font-['Poppins',sans-serif] text-[14px] text-muted">
+                         Local pharmacy distribution center
+                      </p>
+                    </div>
                   </div>
-                  <Link href={buildPath('/shop')} className="hidden md:inline-flex">
-                    <Button variant="ghost" className="text-primary-600">
-                      View all products
-                    </Button>
-                  </Link>
-                </div>
-                <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) => (
+                )}
+
+                {activeTab === 'reviews' && (
+                  <div className="text-center py-8">
+                    <Star className="size-12 text-[#E67E50] mx-auto mb-4" />
+                    <h3 className="font-['Poppins',sans-serif] font-semibold text-secondary mb-2">
+                      {product.rating} out of 5 stars
+                    </h3>
+                    <p className="font-['Poppins',sans-serif] text-[14px] text-muted">
+                      Based on {product.reviewCount} customer reviews
+                    </p>
+                  </div>
+                )}
+              </div>
+            </div>
+
+
+          {/* Related Products */}
+          {relatedProducts.length > 0 && (
+            <div>
+              <h2 className="font-['Poppins',sans-serif] font-semibold text-secondary mb-8 text-2xl">
+                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 || relatedProduct._id}
+                      key={relatedProduct.id}
                       product={relatedProduct}
+                      // viewMode="grid"
                       onClickProduct={(item) => {
                         router.push(buildPath(`/products/${item._id || item.id}`));
                       }}
                     />
                   ))}
                 </div>
-              </section>
+              </div>
             )}
+
           </div>
         </div>
-      </div>
+      </section>
     </div>
   );
 }