create-brainerce-store 1.4.1 → 1.5.1

package/templates/nextjs/base/src/app/products/[slug]/page.tsx

@@ -1,435 +1,435 @@
-'use client';
-
-import { useEffect, useState, useMemo } from 'react';
-import { useParams } from 'next/navigation';
-import Image from 'next/image';
-import Link from 'next/link';
-import type { Product, ProductVariant, ProductImage, ProductMetafield } from 'brainerce';
-import { getProductPriceInfo, getDescriptionContent } from 'brainerce';
-import { getClient } from '@/lib/brainerce';
-import { useCart } from '@/providers/store-provider';
-import { PriceDisplay } from '@/components/shared/price-display';
-import { LoadingSpinner } from '@/components/shared/loading-spinner';
-import { VariantSelector } from '@/components/products/variant-selector';
-import { StockBadge } from '@/components/products/stock-badge';
-import { useTranslations } from '@/lib/translations';
-import { cn } from '@/lib/utils';
-
-/** Render a metafield value based on its type */
-function MetafieldValue({ field }: { field: ProductMetafield }) {
-  const tc = useTranslations('common');
-  switch (field.type) {
-    case 'IMAGE': {
-      if (!field.value) return <span className="text-muted-foreground">-</span>;
-      return (
-        <img
-          src={field.value}
-          alt={field.definitionName}
-          className="h-16 w-16 rounded object-cover"
-        />
-      );
-    }
-    case 'GALLERY': {
-      let urls: string[] = [];
-      try {
-        const parsed = JSON.parse(field.value);
-        urls = Array.isArray(parsed)
-          ? parsed.filter((u: unknown) => typeof u === 'string' && u)
-          : [];
-      } catch {
-        urls = field.value ? [field.value] : [];
-      }
-      if (urls.length === 0) return <span className="text-muted-foreground">-</span>;
-      return (
-        <div className="flex flex-wrap gap-2">
-          {urls.map((url, i) => (
-            <img
-              key={i}
-              src={url}
-              alt={`${field.definitionName} ${i + 1}`}
-              className="h-16 w-16 rounded object-cover"
-            />
-          ))}
-        </div>
-      );
-    }
-    case 'URL':
-      return field.value ? (
-        <a
-          href={field.value}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="text-primary break-all hover:underline"
-        >
-          {field.value}
-        </a>
-      ) : (
-        <span className="text-muted-foreground">-</span>
-      );
-    case 'COLOR':
-      return field.value ? (
-        <span className="inline-flex items-center gap-2">
-          <span
-            className="border-border inline-block h-4 w-4 rounded-full border"
-            style={{ backgroundColor: field.value }}
-          />
-          {field.value}
-        </span>
-      ) : (
-        <span className="text-muted-foreground">-</span>
-      );
-    case 'BOOLEAN':
-      return <span>{field.value === 'true' ? tc('yes') : tc('no')}</span>;
-    case 'DATE':
-    case 'DATETIME': {
-      if (!field.value) return <span className="text-muted-foreground">-</span>;
-      try {
-        const date = new Date(field.value);
-        return (
-          <span>
-            {field.type === 'DATETIME' ? date.toLocaleString() : date.toLocaleDateString()}
-          </span>
-        );
-      } catch {
-        return <span>{field.value}</span>;
-      }
-    }
-    default:
-      return <span>{field.value || '-'}</span>;
-  }
-}
-
-export default function ProductDetailPage() {
-  const params = useParams();
-  const slug = params.slug as string;
-  const { refreshCart } = useCart();
-  const t = useTranslations('productDetail');
-  const tc = useTranslations('common');
-  const [product, setProduct] = useState<Product | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [selectedVariant, setSelectedVariant] = useState<ProductVariant | null>(null);
-  const [selectedImageIndex, setSelectedImageIndex] = useState(0);
-  const [quantity, setQuantity] = useState(1);
-  const [addingToCart, setAddingToCart] = useState(false);
-  const [addedMessage, setAddedMessage] = useState(false);
-
-  // Load product
-  useEffect(() => {
-    async function load() {
-      try {
-        setLoading(true);
-        setError(null);
-        const client = getClient();
-        const p = await client.getProductBySlug(slug);
-        setProduct(p);
-
-        // Auto-select first variant
-        if (p.variants && p.variants.length > 0) {
-          setSelectedVariant(p.variants[0]);
-        }
-      } catch {
-        setError(t('notFound'));
-      } finally {
-        setLoading(false);
-      }
-    }
-    load();
-  }, [slug]);
-
-  // Images list - switch main image when variant changes
-  const images: ProductImage[] = useMemo(() => {
-    return product?.images || [];
-  }, [product]);
-
-  // When variant changes, update selected image to variant image if available
-  useEffect(() => {
-    if (!selectedVariant?.image || !product) return;
-
-    const variantImgUrl =
-      typeof selectedVariant.image === 'string' ? selectedVariant.image : selectedVariant.image.url;
-
-    // Find if variant image exists in product images
-    const idx = images.findIndex((img) => img.url === variantImgUrl);
-    if (idx >= 0) {
-      setSelectedImageIndex(idx);
-    } else {
-      // Variant image not in product images - select index 0 as fallback
-      // (The variant image will be shown as the main image via override)
-      setSelectedImageIndex(-1);
-    }
-  }, [selectedVariant, images, product]);
-
-  // Determine which image to show
-  const mainImageUrl = useMemo(() => {
-    if (selectedImageIndex === -1 && selectedVariant?.image) {
-      const img = selectedVariant.image;
-      return typeof img === 'string' ? img : img.url;
-    }
-    return images[selectedImageIndex]?.url || null;
-  }, [selectedImageIndex, selectedVariant, images]);
-
-  // Price info - use variant price if selected, else product price
-  const priceInfo = useMemo(() => {
-    if (selectedVariant?.price) {
-      return {
-        price: parseFloat(selectedVariant.salePrice || selectedVariant.price),
-        originalPrice: parseFloat(selectedVariant.price),
-        isOnSale:
-          selectedVariant.salePrice != null &&
-          parseFloat(selectedVariant.salePrice) < parseFloat(selectedVariant.price),
-        discountPercent:
-          selectedVariant.salePrice != null &&
-          parseFloat(selectedVariant.salePrice) < parseFloat(selectedVariant.price)
-            ? Math.round(
-                ((parseFloat(selectedVariant.price) - parseFloat(selectedVariant.salePrice)) /
-                  parseFloat(selectedVariant.price)) *
-                  100
-              )
-            : 0,
-      };
-    }
-    return getProductPriceInfo(product);
-  }, [product, selectedVariant]);
-
-  // Inventory: use variant inventory if selected, else product inventory
-  const inventory = selectedVariant?.inventory ?? product?.inventory ?? null;
-  const canPurchase = inventory?.canPurchase !== false;
-
-  // Description
-  const description = useMemo(() => {
-    return product ? getDescriptionContent(product) : null;
-  }, [product]);
-
-  async function handleAddToCart() {
-    if (!product || addingToCart) return;
-
-    try {
-      setAddingToCart(true);
-      const client = getClient();
-      await client.smartAddToCart({
-        productId: product.id,
-        variantId: selectedVariant?.id,
-        quantity,
-        name: product.name,
-        price: String(priceInfo.price),
-        image: mainImageUrl || undefined,
-      });
-      await refreshCart();
-      setAddedMessage(true);
-      setTimeout(() => setAddedMessage(false), 2000);
-    } catch (err) {
-      console.error('Failed to add to cart:', err);
-    } finally {
-      setAddingToCart(false);
-    }
-  }
-
-  if (loading) {
-    return (
-      <div className="flex min-h-[60vh] items-center justify-center">
-        <LoadingSpinner size="lg" />
-      </div>
-    );
-  }
-
-  if (error || !product) {
-    return (
-      <div className="mx-auto max-w-7xl px-4 py-16 text-center sm:px-6 lg:px-8">
-        <h1 className="text-foreground text-2xl font-bold">{error || t('notFound')}</h1>
-        <Link href="/products" className="text-primary mt-4 inline-block hover:underline">
-          {t('backToProducts')}
-        </Link>
-      </div>
-    );
-  }
-
-  return (
-    <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
-      <div className="grid grid-cols-1 gap-8 lg:grid-cols-2 lg:gap-12">
-        {/* Image Gallery */}
-        <div className="space-y-4">
-          {/* Main Image */}
-          <div className="bg-muted relative aspect-square overflow-hidden rounded-lg">
-            {mainImageUrl ? (
-              <Image
-                src={mainImageUrl}
-                alt={product.name}
-                fill
-                sizes="(max-width: 1024px) 100vw, 50vw"
-                className="object-contain"
-                priority
-              />
-            ) : (
-              <div className="text-muted-foreground absolute inset-0 flex items-center justify-center">
-                <svg className="h-24 w-24" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={1}
-                    d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
-                  />
-                </svg>
-              </div>
-            )}
-          </div>
-
-          {/* Thumbnails */}
-          {images.length > 1 && (
-            <div className="flex gap-2 overflow-x-auto pb-2">
-              {images.map((img, idx) => (
-                <button
-                  key={idx}
-                  type="button"
-                  onClick={() => setSelectedImageIndex(idx)}
-                  className={cn(
-                    'relative h-16 w-16 flex-shrink-0 overflow-hidden rounded border-2 transition-colors',
-                    selectedImageIndex === idx
-                      ? 'border-primary'
-                      : 'border-border hover:border-muted-foreground'
-                  )}
-                >
-                  <Image
-                    src={img.url}
-                    alt={img.alt || `${product.name} ${idx + 1}`}
-                    fill
-                    sizes="64px"
-                    className="object-cover"
-                  />
-                </button>
-              ))}
-            </div>
-          )}
-        </div>
-
-        {/* Product Info */}
-        <div className="space-y-6">
-          {/* Categories */}
-          {product.categories && product.categories.length > 0 && (
-            <div className="flex flex-wrap gap-2">
-              {product.categories.map((cat) => (
-                <span
-                  key={cat.id}
-                  className="text-muted-foreground bg-muted rounded px-2 py-1 text-xs"
-                >
-                  {cat.name}
-                </span>
-              ))}
-            </div>
-          )}
-
-          {/* Title */}
-          <h1 className="text-foreground text-2xl font-bold sm:text-3xl">{product.name}</h1>
-
-          {/* Price */}
-          <PriceDisplay
-            price={priceInfo.originalPrice}
-            salePrice={priceInfo.isOnSale ? priceInfo.price : undefined}
-            size="lg"
-          />
-
-          {/* Stock */}
-          <StockBadge inventory={inventory} lowStockThreshold={5} />
-
-          {/* Variant Selector */}
-          {product.type === 'VARIABLE' && product.variants && product.variants.length > 0 && (
-            <VariantSelector
-              product={product}
-              selectedVariant={selectedVariant}
-              onVariantChange={setSelectedVariant}
-            />
-          )}
-
-          {/* Quantity + Add to Cart */}
-          <div className="flex items-center gap-4">
-            <div className="border-border flex items-center rounded border">
-              <button
-                type="button"
-                onClick={() => setQuantity((q) => Math.max(1, q - 1))}
-                className="text-foreground hover:bg-muted px-3 py-2 transition-colors"
-                aria-label={t('decreaseQuantity')}
-              >
-                -
-              </button>
-              <span className="text-foreground min-w-[3rem] px-4 py-2 text-center text-sm font-medium">
-                {quantity}
-              </span>
-              <button
-                type="button"
-                onClick={() => setQuantity((q) => q + 1)}
-                className="text-foreground hover:bg-muted px-3 py-2 transition-colors"
-                aria-label={t('increaseQuantity')}
-              >
-                +
-              </button>
-            </div>
-
-            <button
-              type="button"
-              onClick={handleAddToCart}
-              disabled={!canPurchase || addingToCart}
-              className={cn(
-                'flex-1 rounded px-6 py-3 text-sm font-medium transition-all',
-                canPurchase
-                  ? 'bg-primary text-primary-foreground hover:opacity-90'
-                  : 'bg-muted text-muted-foreground cursor-not-allowed'
-              )}
-            >
-              {addingToCart ? (
-                <span className="inline-flex items-center gap-2">
-                  <LoadingSpinner
-                    size="sm"
-                    className="border-primary-foreground/30 border-t-primary-foreground"
-                  />
-                  {t('addingToCart')}
-                </span>
-              ) : addedMessage ? (
-                t('addedToCart')
-              ) : !canPurchase ? (
-                t('outOfStock')
-              ) : (
-                t('addToCart')
-              )}
-            </button>
-          </div>
-
-          {/* Description */}
-          {description && (
-            <div className="border-border border-t pt-4">
-              <h2 className="text-foreground mb-3 text-lg font-semibold">{t('description')}</h2>
-              {'html' in description ? (
-                <div
-                  className="prose prose-sm text-muted-foreground max-w-none"
-                  dangerouslySetInnerHTML={{ __html: description.html }}
-                />
-              ) : (
-                <p className="text-muted-foreground whitespace-pre-wrap">{description.text}</p>
-              )}
-            </div>
-          )}
-
-          {/* Metafields / Specifications */}
-          {product.metafields && product.metafields.length > 0 && (
-            <div className="border-border border-t pt-4">
-              <h2 className="text-foreground mb-3 text-lg font-semibold">{t('specifications')}</h2>
-              <table className="w-full text-sm">
-                <tbody>
-                  {product.metafields.map((field) => (
-                    <tr key={field.id} className="border-border border-b last:border-0">
-                      <td className="text-foreground whitespace-nowrap py-2 pe-4 font-medium">
-                        {field.definitionName}
-                      </td>
-                      <td className="text-muted-foreground py-2">
-                        <MetafieldValue field={field} />
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
+'use client';
+
+import { useEffect, useState, useMemo } from 'react';
+import { useParams } from 'next/navigation';
+import Image from 'next/image';
+import Link from 'next/link';
+import type { Product, ProductVariant, ProductImage, ProductMetafield } from 'brainerce';
+import { getProductPriceInfo, getDescriptionContent } from 'brainerce';
+import { getClient } from '@/lib/brainerce';
+import { useCart } from '@/providers/store-provider';
+import { PriceDisplay } from '@/components/shared/price-display';
+import { LoadingSpinner } from '@/components/shared/loading-spinner';
+import { VariantSelector } from '@/components/products/variant-selector';
+import { StockBadge } from '@/components/products/stock-badge';
+import { useTranslations } from '@/lib/translations';
+import { cn } from '@/lib/utils';
+
+/** Render a metafield value based on its type */
+function MetafieldValue({ field }: { field: ProductMetafield }) {
+  const tc = useTranslations('common');
+  switch (field.type) {
+    case 'IMAGE': {
+      if (!field.value) return <span className="text-muted-foreground">-</span>;
+      return (
+        <img
+          src={field.value}
+          alt={field.definitionName}
+          className="h-16 w-16 rounded object-cover"
+        />
+      );
+    }
+    case 'GALLERY': {
+      let urls: string[] = [];
+      try {
+        const parsed = JSON.parse(field.value);
+        urls = Array.isArray(parsed)
+          ? parsed.filter((u: unknown) => typeof u === 'string' && u)
+          : [];
+      } catch {
+        urls = field.value ? [field.value] : [];
+      }
+      if (urls.length === 0) return <span className="text-muted-foreground">-</span>;
+      return (
+        <div className="flex flex-wrap gap-2">
+          {urls.map((url, i) => (
+            <img
+              key={i}
+              src={url}
+              alt={`${field.definitionName} ${i + 1}`}
+              className="h-16 w-16 rounded object-cover"
+            />
+          ))}
+        </div>
+      );
+    }
+    case 'URL':
+      return field.value ? (
+        <a
+          href={field.value}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-primary break-all hover:underline"
+        >
+          {field.value}
+        </a>
+      ) : (
+        <span className="text-muted-foreground">-</span>
+      );
+    case 'COLOR':
+      return field.value ? (
+        <span className="inline-flex items-center gap-2">
+          <span
+            className="border-border inline-block h-4 w-4 rounded-full border"
+            style={{ backgroundColor: field.value }}
+          />
+          {field.value}
+        </span>
+      ) : (
+        <span className="text-muted-foreground">-</span>
+      );
+    case 'BOOLEAN':
+      return <span>{field.value === 'true' ? tc('yes') : tc('no')}</span>;
+    case 'DATE':
+    case 'DATETIME': {
+      if (!field.value) return <span className="text-muted-foreground">-</span>;
+      try {
+        const date = new Date(field.value);
+        return (
+          <span>
+            {field.type === 'DATETIME' ? date.toLocaleString() : date.toLocaleDateString()}
+          </span>
+        );
+      } catch {
+        return <span>{field.value}</span>;
+      }
+    }
+    default:
+      return <span>{field.value || '-'}</span>;
+  }
+}
+
+export default function ProductDetailPage() {
+  const params = useParams();
+  const slug = params.slug as string;
+  const { refreshCart } = useCart();
+  const t = useTranslations('productDetail');
+  const tc = useTranslations('common');
+  const [product, setProduct] = useState<Product | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [selectedVariant, setSelectedVariant] = useState<ProductVariant | null>(null);
+  const [selectedImageIndex, setSelectedImageIndex] = useState(0);
+  const [quantity, setQuantity] = useState(1);
+  const [addingToCart, setAddingToCart] = useState(false);
+  const [addedMessage, setAddedMessage] = useState(false);
+
+  // Load product
+  useEffect(() => {
+    async function load() {
+      try {
+        setLoading(true);
+        setError(null);
+        const client = getClient();
+        const p = await client.getProductBySlug(slug);
+        setProduct(p);
+
+        // Auto-select first variant
+        if (p.variants && p.variants.length > 0) {
+          setSelectedVariant(p.variants[0]);
+        }
+      } catch {
+        setError(t('notFound'));
+      } finally {
+        setLoading(false);
+      }
+    }
+    load();
+  }, [slug]);
+
+  // Images list - switch main image when variant changes
+  const images: ProductImage[] = useMemo(() => {
+    return product?.images || [];
+  }, [product]);
+
+  // When variant changes, update selected image to variant image if available
+  useEffect(() => {
+    if (!selectedVariant?.image || !product) return;
+
+    const variantImgUrl =
+      typeof selectedVariant.image === 'string' ? selectedVariant.image : selectedVariant.image.url;
+
+    // Find if variant image exists in product images
+    const idx = images.findIndex((img) => img.url === variantImgUrl);
+    if (idx >= 0) {
+      setSelectedImageIndex(idx);
+    } else {
+      // Variant image not in product images - select index 0 as fallback
+      // (The variant image will be shown as the main image via override)
+      setSelectedImageIndex(-1);
+    }
+  }, [selectedVariant, images, product]);
+
+  // Determine which image to show
+  const mainImageUrl = useMemo(() => {
+    if (selectedImageIndex === -1 && selectedVariant?.image) {
+      const img = selectedVariant.image;
+      return typeof img === 'string' ? img : img.url;
+    }
+    return images[selectedImageIndex]?.url || null;
+  }, [selectedImageIndex, selectedVariant, images]);
+
+  // Price info - use variant price if selected, else product price
+  const priceInfo = useMemo(() => {
+    if (selectedVariant?.price) {
+      return {
+        price: parseFloat(selectedVariant.salePrice || selectedVariant.price),
+        originalPrice: parseFloat(selectedVariant.price),
+        isOnSale:
+          selectedVariant.salePrice != null &&
+          parseFloat(selectedVariant.salePrice) < parseFloat(selectedVariant.price),
+        discountPercent:
+          selectedVariant.salePrice != null &&
+          parseFloat(selectedVariant.salePrice) < parseFloat(selectedVariant.price)
+            ? Math.round(
+                ((parseFloat(selectedVariant.price) - parseFloat(selectedVariant.salePrice)) /
+                  parseFloat(selectedVariant.price)) *
+                  100
+              )
+            : 0,
+      };
+    }
+    return getProductPriceInfo(product);
+  }, [product, selectedVariant]);
+
+  // Inventory: use variant inventory if selected, else product inventory
+  const inventory = selectedVariant?.inventory ?? product?.inventory ?? null;
+  const canPurchase = inventory?.canPurchase !== false;
+
+  // Description
+  const description = useMemo(() => {
+    return product ? getDescriptionContent(product) : null;
+  }, [product]);
+
+  async function handleAddToCart() {
+    if (!product || addingToCart) return;
+
+    try {
+      setAddingToCart(true);
+      const client = getClient();
+      await client.smartAddToCart({
+        productId: product.id,
+        variantId: selectedVariant?.id,
+        quantity,
+        name: product.name,
+        price: String(priceInfo.price),
+        image: mainImageUrl || undefined,
+      });
+      await refreshCart();
+      setAddedMessage(true);
+      setTimeout(() => setAddedMessage(false), 2000);
+    } catch (err) {
+      console.error('Failed to add to cart:', err);
+    } finally {
+      setAddingToCart(false);
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="flex min-h-[60vh] items-center justify-center">
+        <LoadingSpinner size="lg" />
+      </div>
+    );
+  }
+
+  if (error || !product) {
+    return (
+      <div className="mx-auto max-w-7xl px-4 py-16 text-center sm:px-6 lg:px-8">
+        <h1 className="text-foreground text-2xl font-bold">{error || t('notFound')}</h1>
+        <Link href="/products" className="text-primary mt-4 inline-block hover:underline">
+          {t('backToProducts')}
+        </Link>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
+      <div className="grid grid-cols-1 gap-8 lg:grid-cols-2 lg:gap-12">
+        {/* Image Gallery */}
+        <div className="space-y-4">
+          {/* Main Image */}
+          <div className="bg-muted relative aspect-square overflow-hidden rounded-lg">
+            {mainImageUrl ? (
+              <Image
+                src={mainImageUrl}
+                alt={product.name}
+                fill
+                sizes="(max-width: 1024px) 100vw, 50vw"
+                className="object-contain"
+                priority
+              />
+            ) : (
+              <div className="text-muted-foreground absolute inset-0 flex items-center justify-center">
+                <svg className="h-24 w-24" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={1}
+                    d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+                  />
+                </svg>
+              </div>
+            )}
+          </div>
+
+          {/* Thumbnails */}
+          {images.length > 1 && (
+            <div className="flex gap-2 overflow-x-auto pb-2">
+              {images.map((img, idx) => (
+                <button
+                  key={idx}
+                  type="button"
+                  onClick={() => setSelectedImageIndex(idx)}
+                  className={cn(
+                    'relative h-16 w-16 flex-shrink-0 overflow-hidden rounded border-2 transition-colors',
+                    selectedImageIndex === idx
+                      ? 'border-primary'
+                      : 'border-border hover:border-muted-foreground'
+                  )}
+                >
+                  <Image
+                    src={img.url}
+                    alt={img.alt || `${product.name} ${idx + 1}`}
+                    fill
+                    sizes="64px"
+                    className="object-cover"
+                  />
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Product Info */}
+        <div className="space-y-6">
+          {/* Categories */}
+          {product.categories && product.categories.length > 0 && (
+            <div className="flex flex-wrap gap-2">
+              {product.categories.map((cat) => (
+                <span
+                  key={cat.id}
+                  className="text-muted-foreground bg-muted rounded px-2 py-1 text-xs"
+                >
+                  {cat.name}
+                </span>
+              ))}
+            </div>
+          )}
+
+          {/* Title */}
+          <h1 className="text-foreground text-2xl font-bold sm:text-3xl">{product.name}</h1>
+
+          {/* Price */}
+          <PriceDisplay
+            price={priceInfo.originalPrice}
+            salePrice={priceInfo.isOnSale ? priceInfo.price : undefined}
+            size="lg"
+          />
+
+          {/* Stock */}
+          <StockBadge inventory={inventory} lowStockThreshold={5} />
+
+          {/* Variant Selector */}
+          {product.type === 'VARIABLE' && product.variants && product.variants.length > 0 && (
+            <VariantSelector
+              product={product}
+              selectedVariant={selectedVariant}
+              onVariantChange={setSelectedVariant}
+            />
+          )}
+
+          {/* Quantity + Add to Cart */}
+          <div className="flex items-center gap-4">
+            <div className="border-border flex items-center rounded border">
+              <button
+                type="button"
+                onClick={() => setQuantity((q) => Math.max(1, q - 1))}
+                className="text-foreground hover:bg-muted px-3 py-2 transition-colors"
+                aria-label={t('decreaseQuantity')}
+              >
+                -
+              </button>
+              <span className="text-foreground min-w-[3rem] px-4 py-2 text-center text-sm font-medium">
+                {quantity}
+              </span>
+              <button
+                type="button"
+                onClick={() => setQuantity((q) => q + 1)}
+                className="text-foreground hover:bg-muted px-3 py-2 transition-colors"
+                aria-label={t('increaseQuantity')}
+              >
+                +
+              </button>
+            </div>
+
+            <button
+              type="button"
+              onClick={handleAddToCart}
+              disabled={!canPurchase || addingToCart}
+              className={cn(
+                'flex-1 rounded px-6 py-3 text-sm font-medium transition-all',
+                canPurchase
+                  ? 'bg-primary text-primary-foreground hover:opacity-90'
+                  : 'bg-muted text-muted-foreground cursor-not-allowed'
+              )}
+            >
+              {addingToCart ? (
+                <span className="inline-flex items-center gap-2">
+                  <LoadingSpinner
+                    size="sm"
+                    className="border-primary-foreground/30 border-t-primary-foreground"
+                  />
+                  {t('addingToCart')}
+                </span>
+              ) : addedMessage ? (
+                t('addedToCart')
+              ) : !canPurchase ? (
+                t('outOfStock')
+              ) : (
+                t('addToCart')
+              )}
+            </button>
+          </div>
+
+          {/* Description */}
+          {description && (
+            <div className="border-border border-t pt-4">
+              <h2 className="text-foreground mb-3 text-lg font-semibold">{t('description')}</h2>
+              {'html' in description ? (
+                <div
+                  className="prose prose-sm text-muted-foreground max-w-none"
+                  dangerouslySetInnerHTML={{ __html: description.html }}
+                />
+              ) : (
+                <p className="text-muted-foreground whitespace-pre-wrap">{description.text}</p>
+              )}
+            </div>
+          )}
+
+          {/* Metafields / Specifications */}
+          {product.metafields && product.metafields.length > 0 && (
+            <div className="border-border border-t pt-4">
+              <h2 className="text-foreground mb-3 text-lg font-semibold">{t('specifications')}</h2>
+              <table className="w-full text-sm">
+                <tbody>
+                  {product.metafields.map((field) => (
+                    <tr key={field.id} className="border-border border-b last:border-0">
+                      <td className="text-foreground whitespace-nowrap py-2 pe-4 font-medium">
+                        {field.definitionName}
+                      </td>
+                      <td className="text-muted-foreground py-2">
+                        <MetafieldValue field={field} />
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}