@pradip1995/create-storefront 1.0.1

package/templates/storefront/src/theme/valero/slots/product/ProductActions/ProductCTASection.tsx

@@ -0,0 +1,191 @@
+"use client"
+
+import { useRouter } from "next/navigation"
+import { HttpTypes } from "@medusajs/types"
+import type { ProductOptions } from "@core/domain/product/variant-selection"
+
+export type ProductCTASectionProps = {
+  product: HttpTypes.StoreProduct
+  selectedVariant?: HttpTypes.StoreProductVariant
+  options: ProductOptions
+  isValidVariant: boolean
+  disabled?: boolean
+  inStock: boolean
+  inventoryLimit: number | null
+  quantity: number
+  quantityInCart: number
+  variantInCart: HttpTypes.StoreCartLineItem | undefined
+  isAdding: boolean
+  isBuyingNow: boolean
+  showNotifyMessage: boolean
+  setShowNotifyMessage: (v: boolean) => void
+  handleAddToCart: () => void
+  handleBuyNow: () => void
+  handleIncreaseQuantity: () => void
+  handleDecreaseQuantity: () => void
+}
+
+const btnBase =
+  "h-12 w-full flex items-center justify-center gap-2 text-sm font-semibold uppercase tracking-[var(--letter-spacing-nav)] transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+
+export function ProductCTASection(props: ProductCTASectionProps) {
+  const router = useRouter()
+  const {
+    product,
+    selectedVariant,
+    options,
+    isValidVariant,
+    disabled,
+    inStock,
+    inventoryLimit,
+    quantity,
+    quantityInCart,
+    variantInCart,
+    isAdding,
+    isBuyingNow,
+    showNotifyMessage,
+    setShowNotifyMessage,
+    handleAddToCart,
+    handleBuyNow,
+    handleIncreaseQuantity,
+    handleDecreaseQuantity,
+  } = props
+
+  if (!inStock && selectedVariant) {
+    return (
+      <div className="flex flex-col gap-4 w-full">
+        <p className="text-sm font-medium text-brand-sale uppercase tracking-[var(--letter-spacing-nav)]">
+          Sold out
+        </p>
+
+        {showNotifyMessage ? (
+          <div className="border border-[var(--color-header-border)] p-5 flex flex-col gap-3">
+            <p className="text-sm text-body">
+              We&apos;ll notify you when this item is back in stock.
+            </p>
+            <button
+              onClick={() => {
+                const relatedSection = document.getElementById("related-products")
+                if (relatedSection) {
+                  relatedSection.scrollIntoView({ behavior: "smooth" })
+                } else {
+                  router.push("/store")
+                }
+              }}
+              className="text-sm font-medium underline underline-offset-4 text-heading hover:opacity-70 w-fit"
+            >
+              Browse similar products
+            </button>
+          </div>
+        ) : (
+          <button
+            onClick={() => setShowNotifyMessage(true)}
+            className={`${btnBase} bg-brand-accent text-inverse hover:bg-brand-accent-hover`}
+          >
+            Notify me when available
+          </button>
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col gap-3 w-full">
+      {variantInCart ? (
+        <div className="flex flex-col gap-2">
+          <p className="text-[11px] font-semibold uppercase tracking-[var(--letter-spacing-nav)] text-[var(--color-text-muted)]">
+            In your bag ({variantInCart.quantity})
+          </p>
+          <div className="flex h-12 border border-brand-accent">
+            <button
+              onClick={handleDecreaseQuantity}
+              disabled={isAdding}
+              className="w-12 flex items-center justify-center hover:bg-surface-muted transition-colors disabled:opacity-50"
+              aria-label="Decrease quantity"
+            >
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                <line x1="5" y1="12" x2="19" y2="12" />
+              </svg>
+            </button>
+            <div className="flex-1 flex items-center justify-center text-sm font-semibold text-heading">
+              {variantInCart.quantity}
+            </div>
+            <button
+              onClick={handleIncreaseQuantity}
+              disabled={isAdding || !inStock}
+              className="w-12 flex items-center justify-center hover:bg-surface-muted transition-colors disabled:opacity-50"
+              aria-label="Increase quantity"
+            >
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                <line x1="12" y1="5" x2="12" y2="19" />
+                <line x1="5" y1="12" x2="19" y2="12" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      ) : (
+        <button
+          onClick={handleAddToCart}
+          disabled={
+            !inStock ||
+            !!disabled ||
+            isAdding ||
+            isBuyingNow ||
+            (!isValidVariant && product.options?.every((opt) => options[opt.id]))
+          }
+          className={`${btnBase} bg-brand-accent text-inverse hover:bg-brand-accent-hover`}
+          data-testid="add-product-button"
+          data-ga-event="add_to_bag_click"
+          data-ga-label={product.title || "Product"}
+        >
+          {isAdding ? (
+            <Spinner />
+          ) : (
+            <>
+              {!selectedVariant || !isValidVariant
+                ? product.options?.every((opt) => options[opt.id])
+                  ? "Unavailable"
+                  : "Select options"
+                : !inStock
+                  ? inventoryLimit !== null &&
+                    inventoryLimit + quantityInCart > 0 &&
+                    quantity > inventoryLimit
+                    ? inventoryLimit <= 0
+                      ? "Sold out"
+                      : "Max quantity reached"
+                    : "Sold out"
+                  : `Add to cart${quantity > 1 ? ` (${quantity})` : ""}`}
+            </>
+          )}
+        </button>
+      )}
+
+      <button
+        onClick={handleBuyNow}
+        disabled={
+          !inStock ||
+          !!disabled ||
+          isAdding ||
+          isBuyingNow ||
+          (!isValidVariant && product.options?.every((opt) => options[opt.id]))
+        }
+        className={`${btnBase} border border-brand-accent text-heading bg-transparent hover:bg-surface-muted`}
+      >
+        {isBuyingNow ? <Spinner /> : "Buy it now"}
+      </button>
+    </div>
+  )
+}
+
+function Spinner() {
+  return (
+    <svg className="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+      <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"
+      />
+    </svg>
+  )
+}

package/templates/storefront/src/theme/valero/slots/product/ProductActions/ProductDetailsSection.tsx

@@ -0,0 +1,137 @@
+"use client"
+
+import { useState } from "react"
+import { HttpTypes } from "@medusajs/types"
+import RatingsTab from "@modules/products/components/product-tabs/ratings-tab"
+
+function AccordionItem({
+  title,
+  isOpen,
+  onToggle,
+  children,
+}: {
+  title: string
+  isOpen: boolean
+  onToggle: () => void
+  children: React.ReactNode
+}) {
+  return (
+    <div className="border-t border-[var(--color-header-border)]">
+      <button
+        onClick={onToggle}
+        className="flex items-center justify-between w-full py-4 text-left"
+      >
+        <h3 className="text-[11px] font-semibold text-heading uppercase tracking-[var(--letter-spacing-nav)]">
+          {title}
+        </h3>
+        <svg
+          width="14"
+          height="14"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          className={`transition-transform text-heading ${isOpen ? "rotate-180" : ""}`}
+        >
+          <polyline points="6 9 12 15 18 9" />
+        </svg>
+      </button>
+      {isOpen && (
+        <div className="pb-5 text-sm text-body leading-relaxed">{children}</div>
+      )}
+    </div>
+  )
+}
+
+export function ProductDetailsSection({ product }: { product: HttpTypes.StoreProduct }) {
+  const [isDescriptionOpen, setIsDescriptionOpen] = useState(true)
+  const [isCareGuideOpen, setIsCareGuideOpen] = useState(false)
+
+  return (
+    <div className="mt-2">
+      {product.description && (
+        <AccordionItem
+          title="Description"
+          isOpen={isDescriptionOpen}
+          onToggle={() => setIsDescriptionOpen(!isDescriptionOpen)}
+        >
+          <div
+            className="mb-3 whitespace-pre-line"
+            dangerouslySetInnerHTML={{
+              __html: product.description
+                ? product.description.replace(/\n/g, "<br />")
+                : "",
+            }}
+          />
+          {(() => {
+            const features = product.metadata?.features
+            if (!features) return null
+
+            if (typeof features === "string") {
+              return (
+                <ul className="list-disc list-inside space-y-1">
+                  {features.split(",").map((feature: string, index: number) => (
+                    <li key={index}>{feature.trim()}</li>
+                  ))}
+                </ul>
+              )
+            }
+
+            if (Array.isArray(features)) {
+              return (
+                <ul className="list-disc list-inside space-y-1">
+                  {(features as string[]).map((feature: string, index: number) => (
+                    <li key={index}>{feature}</li>
+                  ))}
+                </ul>
+              )
+            }
+
+            return null
+          })()}
+        </AccordionItem>
+      )}
+
+      {product.metadata?.care_guide && (
+        <AccordionItem
+          title="Care guide"
+          isOpen={isCareGuideOpen}
+          onToggle={() => setIsCareGuideOpen(!isCareGuideOpen)}
+        >
+          {(() => {
+            const careGuide = product.metadata.care_guide
+            if (!careGuide) return null
+
+            const careGuideStr =
+              typeof careGuide === "string" ? careGuide : String(careGuide)
+
+            const items = careGuideStr.includes(",")
+              ? careGuideStr.split(",").map((item) => item.trim()).filter(Boolean)
+              : careGuideStr.includes("\n")
+                ? careGuideStr.split("\n").map((item) => item.trim()).filter(Boolean)
+                : [careGuideStr]
+
+            if (items.length > 1) {
+              return (
+                <ul className="list-disc list-inside space-y-1">
+                  {items.map((item: string, index: number) => (
+                    <li key={index}>{item}</li>
+                  ))}
+                </ul>
+              )
+            }
+
+            return <p>{careGuideStr}</p>
+          })()}
+        </AccordionItem>
+      )}
+
+      <div className="border-t border-[var(--color-header-border)] py-4">
+        <h3 className="text-[11px] font-semibold text-heading uppercase tracking-[var(--letter-spacing-nav)] mb-4">
+          Reviews
+        </h3>
+        <RatingsTab product={product} />
+      </div>
+    </div>
+  )
+}

package/templates/storefront/src/theme/valero/slots/product/ProductActions/ProductFeaturePanel.tsx

@@ -0,0 +1,245 @@
+"use client"
+
+import SidePanel from "@modules/common/components/side-panel"
+
+type ProductFeaturePanelProps = {
+  activeFeature: string | null
+  onClose: () => void
+}
+
+export function ProductFeaturePanel({ activeFeature, onClose }: ProductFeaturePanelProps) {
+  return (
+    <SidePanel
+      isOpen={!!activeFeature}
+      onClose={() => onClose()}
+      title={
+        activeFeature === 'return' ? '7 Days Easy Return' :
+          activeFeature === 'delivery' ? 'Fast Delivery' :
+            activeFeature === 'cod' ? 'Cash On Delivery' :
+              activeFeature === 'size_chart' ? 'Size Guide' : ''
+      }
+    >
+      {activeFeature === 'return' && (
+        <div className="space-y-6">
+          <div className="bg-purple-50 p-4 rounded-xl border border-purple-100">
+            <p className="text-sm text-purple-900 leading-relaxed font-medium">
+              We offer a hassle-free 7-day return policy for all our customers. If you're not satisfied with your purchase, we're here to help!
+            </p>
+          </div>
+          <div className="space-y-4">
+            <div className="flex gap-4">
+              <div className="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center flex-shrink-0">
+                <span className="font-bold text-gray-700">1</span>
+              </div>
+              <div>
+                <h4 className="font-bold text-gray-900 mb-1">Unused Conditions</h4>
+                <p className="text-sm text-gray-600">Items must be returned in their original condition, unused, and with all tags intact.</p>
+              </div>
+            </div>
+            <div className="flex gap-4">
+              <div className="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center flex-shrink-0">
+                <span className="font-bold text-gray-700">2</span>
+              </div>
+              <div>
+                <h4 className="font-bold text-gray-900 mb-1">Easy Process</h4>
+                <p className="text-sm text-gray-600">Raise a return request from your account or contact our support team directly.</p>
+              </div>
+            </div>
+            <div className="flex gap-4">
+              <div className="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center flex-shrink-0">
+                <span className="font-bold text-gray-700">3</span>
+              </div>
+              <div>
+                <h4 className="font-bold text-gray-900 mb-1">Quick Refund</h4>
+                <p className="text-sm text-gray-600">Once the quality check is completed, your refund will be processed within 24–48 hours. The amount may take a few business days to reflect in your account depending on your bank.</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {activeFeature === 'delivery' && (
+        <div className="space-y-6">
+          <div className="bg-blue-50 p-4 rounded-xl border border-blue-100">
+            <p className="text-sm text-blue-900 leading-relaxed font-medium">
+              We prioritize your excitement! Our fast delivery network ensures your order reaches you as soon as possible.
+            </p>
+          </div>
+          <div className="space-y-6">
+            <div>
+              <h4 className="font-bold text-gray-900 mb-2 flex items-center gap-2">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="text-blue-500">
+                  <path d="M12 2v20m10-10H2"></path>
+                </svg>
+                Order Processing
+              </h4>
+              <p className="text-sm text-gray-600 pl-7">Most orders are processed and dispatched within 24 hours of placement.</p>
+            </div>
+            <div>
+              <h4 className="font-bold text-gray-900 mb-2 flex items-center gap-2">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="text-blue-500">
+                  <circle cx="12" cy="12" r="10"></circle>
+                  <polyline points="12 6 12 12 16 14"></polyline>
+                </svg>
+                Average Timelines
+              </h4>
+              <ul className="text-sm text-gray-600 pl-7 space-y-2 list-disc">
+                <li>Metro Cities: 2-3 business days</li>
+                <li>Tier 2 Cities: 4-5 business days</li>
+                <li>Rest of India: 5-7 business days</li>
+              </ul>
+            </div>
+            <div>
+              <h4 className="font-bold text-gray-900 mb-2 flex items-center gap-2">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="text-blue-500">
+                  <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
+                  <circle cx="12" cy="10" r="3"></circle>
+                </svg>
+                Live Tracking
+              </h4>
+              <p className="text-sm text-gray-600 pl-7">You will receive a real-time tracking link via Email & WhatsApp once your order is shipped.</p>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {activeFeature === 'cod' && (
+        <div className="space-y-6">
+          <div className="bg-green-50 p-4 rounded-xl border border-green-100">
+            <p className="text-sm text-green-900 leading-relaxed font-medium">
+              Shop with confidence! Pay only when you receive your package at your doorstep.
+            </p>
+          </div>
+          <div className="space-y-5">
+            <div className="flex gap-4 p-4 bg-gray-50 rounded-lg">
+              <div className="w-10 h-10 flex items-center justify-center bg-page-bg rounded-lg shadow-sm flex-shrink-0">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#22c55e" strokeWidth="2">
+                  <rect x="2" y="5" width="20" height="14" rx="2"></rect>
+                  <line x1="2" y1="10" x2="22" y2="10"></line>
+                </svg>
+              </div>
+              <div>
+                <h4 className="font-bold text-gray-900">Zero Upfront Cost</h4>
+                <p className="text-xs text-gray-500">No need for credit cards or online payments to place your order.</p>
+              </div>
+            </div>
+            <div className="flex gap-4 p-4 bg-gray-50 rounded-lg">
+              <div className="w-10 h-10 flex items-center justify-center bg-page-bg rounded-lg shadow-sm flex-shrink-0">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#22c55e" strokeWidth="2">
+                  <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
+                </svg>
+              </div>
+              <div>
+                <h4 className="font-bold text-gray-900">Safe & Secure</h4>
+                <p className="text-xs text-gray-500">Verify your package and then pay our delivery partner directly.</p>
+              </div>
+            </div>
+            <ul className="text-xs text-gray-500 italic space-y-1 pl-4 list-disc">
+              <li>Available for orders up to ₹10,000.</li>
+              <li>Please keep the exact change ready for a smoother experience.</li>
+              <li>Only cash payments are accepted for COD.</li>
+            </ul>
+          </div>
+        </div>
+      )}
+
+      {activeFeature === 'size_chart' && (
+        <div className="flex flex-col h-full">
+          {/* Tip Section */}
+          <div className="mb-8 bg-gradient-to-r from-purple-50 to-page-bg p-4 rounded-xl border border-purple-100 flex gap-3 shadow-sm">
+            <div className="text-xl">💡</div>
+            <div className="flex-1">
+              <h4 className="text-purple-900 font-bold text-sm mb-1">Pro Tip</h4>
+              <p className="text-xs text-purple-700 leading-relaxed font-medium">
+                Kids grow fast! If your child is between sizes, we always recommend choosing the larger size for a longer-lasting fit.
+              </p>
+            </div>
+          </div>
+
+          <div className="space-y-8">
+            {/* Infants Section */}
+            <div>
+              <div className="flex items-center gap-3 mb-4">
+                <div className="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center text-brand-accent">
+                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                    <circle cx="12" cy="12" r="10" />
+                    <path d="M12 16v-4" />
+                    <path d="M12 8h.01" />
+                  </svg>
+                </div>
+                <h4 className="font-bold text-gray-900 text-base">Infants (0-24 Months)</h4>
+              </div>
+
+              <div className="overflow-hidden rounded-xl border border-gray-100 shadow-sm">
+                <table className="w-full text-sm text-left border-collapse">
+                  <thead>
+                    <tr className="bg-gray-50 border-b border-gray-100">
+                      <th className="p-4 font-bold text-gray-900 text-xs uppercase tracking-wider">Age</th>
+                      <th className="p-4 font-bold text-gray-900 text-xs uppercase tracking-wider text-center">Height</th>
+                      <th className="p-4 font-bold text-gray-900 text-xs uppercase tracking-wider text-center">Weight</th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-gray-100 bg-page-bg">
+                    {[
+                      { age: 'Newborn', h: '45 - 52 cm', w: '2.5 - 3.5 kg' },
+                      { age: '0-3 Months', h: '52 - 60 cm', w: '3.5 - 5.5 kg' },
+                      { age: '3-6 Months', h: '60 - 68 cm', w: '5.5 - 7.5 kg' },
+                      { age: '6-12 Months', h: '68 - 76 cm', w: '7.5 - 10 kg' },
+                      { age: '12-18 Months', h: '76 - 83 cm', w: '10 - 12 kg' },
+                      { age: '18-24 Months', h: '83 - 90 cm', w: '12 - 14 kg' },
+                    ].map((row, i) => (
+                      <tr key={i} className="hover:bg-purple-50/30 transition-colors">
+                        <td className="p-4 font-semibold text-gray-900">{row.age}</td>
+                        <td className="p-4 text-center text-gray-600">{row.h}</td>
+                        <td className="p-4 text-center text-gray-600 font-medium">{row.w}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+
+            {/* Toddlers Section */}
+            <div>
+              <div className="flex items-center gap-3 mb-4">
+                <div className="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center text-brand-accent">
+                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+                    <circle cx="12" cy="7" r="4" />
+                  </svg>
+                </div>
+                <h4 className="font-bold text-gray-900 text-base">Toddlers (2-6 Years)</h4>
+              </div>
+
+              <div className="overflow-hidden rounded-xl border border-gray-100 shadow-sm">
+                <table className="w-full text-sm text-left border-collapse">
+                  <thead>
+                    <tr className="bg-gray-50 border-b border-gray-100">
+                      <th className="p-4 font-bold text-gray-900 text-xs uppercase tracking-wider">Age</th>
+                      <th className="p-4 font-bold text-gray-900 text-xs uppercase tracking-wider text-center">Height</th>
+                      <th className="p-4 font-bold text-gray-900 text-xs uppercase tracking-wider text-center">Chest</th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-gray-100 bg-page-bg">
+                    {[
+                      { age: '2-3 Years', h: '90 - 98 cm', c: '52 - 54 cm' },
+                      { age: '3-4 Years', h: '98 - 104 cm', c: '54 - 56 cm' },
+                      { age: '4-5 Years', h: '104 - 110 cm', c: '56 - 58 cm' },
+                      { age: '5-6 Years', h: '110 - 116 cm', c: '58 - 60 cm' },
+                    ].map((row, i) => (
+                      <tr key={i} className="hover:bg-purple-50/30 transition-colors">
+                        <td className="p-4 font-semibold text-gray-900">{row.age}</td>
+                        <td className="p-4 text-center text-gray-600">{row.h}</td>
+                        <td className="p-4 text-center text-gray-600 font-medium">{row.c}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </SidePanel>
+  )
+}

package/templates/storefront/src/theme/valero/slots/product/ProductActions/ProductHighlightsSection.tsx

@@ -0,0 +1,98 @@
+"use client"
+
+import { clx } from "@medusajs/ui"
+import { HttpTypes } from "@medusajs/types"
+
+export function ProductHighlightsSection({ product }: { product: HttpTypes.StoreProduct }) {
+  return (
+    <div className="flex flex-col gap-6 py-10 border-t border-gray-100/80 animate-in fade-in slide-in-from-bottom-4 duration-700">
+      <div className="flex items-center gap-4">
+        <div className="w-1.5 h-8 rounded-full bg-gradient-to-b from-brand-accent to-[#A885C9]"></div>
+        <h3 className="text-sm sm:text-base font-black text-gray-800 uppercase tracking-[0.2em]">Product highlights</h3>
+      </div>
+      
+      <div className="grid grid-cols-2 gap-3 sm:gap-4 mt-2">
+        {(() => {
+          // Extract unique colors from variants/options instead of metadata
+          const colorOpt = product.options?.find(opt => 
+            opt.title?.toLowerCase().includes('color') || 
+            opt.title?.toLowerCase().includes('colour')
+          )
+          const variantColors = colorOpt?.values?.map(v => v.value).filter(Boolean) || []
+          const uniqueColors = Array.from(new Set(variantColors))
+          const colorValue = uniqueColors.length > 0 ? uniqueColors.join(', ') : null
+
+          const highlights = [
+            { id: 'type', label: "Type", value: product.metadata?.product_type, icon: 'M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z' },
+            { id: 'occasion', label: "Occasion", value: product.metadata?.occasion, icon: 'M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z' },
+            { id: 'material', label: "Material", value: product.metadata?.material, icon: 'M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5' },
+            { id: 'gender', label: "Gender", value: product.metadata?.gender, icon: 'M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2M12 11a4 4 0 100-8 4 4 0 000 8z' },
+            { id: 'color', label: "Available Colors", value: colorValue, icon: 'M12 2.25l-7.5 12.13a6.75 6.75 0 1015 0L12 2.25z' },
+          ].filter(h => h.value)
+
+          return highlights.map((highlight) => (
+            <div 
+              key={highlight.id} 
+              className={clx(
+                "group flex items-center gap-3 sm:gap-4 p-3 sm:p-4 rounded-2xl bg-white border border-gray-100 shadow-[0_2px_10px_-4px_rgba(0,0,0,0.05)] hover:shadow-[0_10px_25px_-5px_rgba(29,78,216,0.15)] hover:border-purple-100 hover:-translate-y-1 transition-all duration-300",
+                highlight.id === 'color' && "col-span-2"
+              )}
+            >
+              <div className="flex-shrink-0 w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-surface-muted flex items-center justify-center group-hover:bg-purple-50 transition-all duration-300 shadow-inner overflow-hidden">
+                {highlight.id === 'color' ? (
+                  <svg width="28" height="28" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" className="transform group-hover:scale-110 transition-transform duration-300">
+                    {/* Palette Body */}
+                    <path d="M75 55c0 15-12 27-27 27S21 70 21 55s12-27 27-27 27 12 27 27z" fill="#E8B088" stroke="#333" strokeWidth="3" />
+                    
+                    {/* Color Dots */}
+                    <circle cx="40" cy="45" r="5" fill="#FF4D4D" stroke="#333" strokeWidth="1.5" /> {/* Red */}
+                    <circle cx="56" cy="46" r="5" fill="#2ECC71" stroke="#333" strokeWidth="1.5" /> {/* Green */}
+                    <circle cx="42" cy="62" r="5" fill="#3498DB" stroke="#333" strokeWidth="1.5" /> {/* Blue */}
+                    <circle cx="58" cy="64" r="5" fill="#F06292" stroke="#333" strokeWidth="1.5" /> {/* Pink */}
+                    
+                    {/* Brush */}
+                    <g transform="rotate(25 70 40)">
+                      <rect x="68" y="15" width="6" height="35" rx="3" fill="#F39C12" stroke="#333" strokeWidth="2" /> {/* Handle */}
+                      <path d="M68 12c0-4 3-8 3-8s3 4 3 8H68z" fill="#AED6F1" stroke="#333" strokeWidth="2" /> {/* Tip */}
+                      <rect x="68" y="45" width="6" height="4" fill="#BDC3C7" stroke="#333" strokeWidth="1.5" /> {/* Ferrule */}
+                    </g>
+                  </svg>
+                ) : (
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" className="w-[18px] h-[18px] sm:w-5 sm:h-5 text-brand-accent">
+                    <path d={highlight.icon} />
+                  </svg>
+                )}
+              </div>
+              <div className="flex flex-col min-w-0 flex-1">
+                <span className="text-[9px] sm:text-[10px] font-black text-gray-800 uppercase tracking-widest mb-0.5 sm:mb-1">{highlight.label}</span>
+                <div className="flex items-center gap-2">
+                  {highlight.id === 'color' ? (
+                    <div className="flex flex-wrap gap-x-4 gap-y-1.5">
+                      {String(highlight.value || '').split(/[,\s]+/).map((color, i) => {
+                        const trimmedColor = color.trim().toLowerCase()
+                        if (!trimmedColor) return null
+                        return (
+                          <div key={i} className="flex items-center gap-2">
+                            <div 
+                              className="w-3.5 h-3.5 rounded-full border border-gray-100 shadow-sm"
+                              style={{ backgroundColor: trimmedColor }}
+                            />
+                            <span className="text-sm text-gray-800 font-semibold capitalize leading-none tracking-tight">{trimmedColor}</span>
+                          </div>
+                        )
+                      })}
+                    </div>
+                  ) : (
+                    <span className="text-xs sm:text-sm text-gray-800 font-semibold capitalize tracking-tight truncate">
+                      {String(highlight.value || '').replace(/_/g, ' ')}
+                    </span>
+                  )}
+                </div>
+              </div>
+            </div>
+          ))
+        })()}
+      </div>
+    </div>
+  )
+}