{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "product-detail-page",
  "title": "Product Detail Page",
  "type": "registry:page",
  "files": [
    {
      "path": "packages/registry-react/blocks/product-detail-page/ProductDetailPage.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { ChevronRight } from 'lucide-react'\n\n// Import sub-blocks\nimport { FlashSaleOfferBar } from '../flash-sale-offer-bar'\nimport { TechnicalSpecsSheet } from '../technical-specs-sheet'\nimport { ProductQaCommunity } from '../product-qa-community'\nimport { CustomerReviews } from '../customer-reviews'\nimport { FrequentlyBoughtTogether } from '../frequently-bought-together'\nimport { ProductGalleryBuyBox, variants } from './ProductGalleryBuyBox'\n\nexport function ProductDetailPage() {\n  const [selectedVariantId, setSelectedVariantId] = React.useState(variants[0].id)\n\n  const currentVariant = variants.find((v) => v.id === selectedVariantId) || variants[0]\n\n  return (\n    <div data-slot=\"product-detail-page\" className=\"bg-background text-foreground w-full space-y-10\">\n      {/* Breadcrumb Navigation Bar */}\n      <nav className=\"text-muted-foreground flex items-center gap-1.5 text-xs\">\n        <span className=\"hover:text-foreground cursor-pointer\">Storefront</span>\n        <ChevronRight className=\"size-3.5\" />\n        <span className=\"hover:text-foreground cursor-pointer\">Pro Audio & Reference</span>\n        <ChevronRight className=\"size-3.5\" />\n        <span className=\"hover:text-foreground cursor-pointer\">Planar Magnetic</span>\n        <ChevronRight className=\"size-3.5\" />\n        <span className=\"text-foreground font-medium\">APX-950-PRO Reference Monitor</span>\n      </nav>\n\n      {/* Main Hero Split: Gallery & Buy Box */}\n      <ProductGalleryBuyBox selectedVariantId={selectedVariantId} onSelectVariant={setSelectedVariantId} />\n\n      {/* Section 2: Flash Sale & Multi-Buy Tier Deal Bar */}\n      <div className=\"space-y-3\">\n        <FlashSaleOfferBar\n          saleTitle=\"Audio Pro Week: Limited Master Batch 04\"\n          claimedPercent={82}\n          itemsLeft={currentVariant.stockCount}\n        />\n      </div>\n\n      {/* Section 3: Frequently Bought Together Bundle */}\n      <div className=\"space-y-4\">\n        <FrequentlyBoughtTogether />\n      </div>\n\n      {/* Section 4: Engineering & Technical Specifications Sheet */}\n      <div className=\"space-y-4\">\n        <TechnicalSpecsSheet modelNumber=\"APX-950-PRO\" revision=\"Studio Edition 2026\" />\n      </div>\n\n      {/* Section 5: Verified Customer Reviews & Photo Breakdown */}\n      <div className=\"space-y-4\">\n        <CustomerReviews />\n      </div>\n\n      {/* Section 6: Customer & Staff Q&A Community */}\n      <div className=\"space-y-4\">\n        <ProductQaCommunity productName=\"Apex Pro Reference Planar Headphones\" />\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:page",
      "target": "~/components/blocks/ProductDetailPage.tsx"
    },
    {
      "path": "packages/registry-react/blocks/product-detail-page/ProductGalleryBuyBox.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { Star, ShieldCheck, Truck, RotateCcw, Heart, Share2, Plus, Minus, ShoppingCart, Zap, Flame } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Input } from '@/components/ui/input'\nimport { Separator } from '@/components/ui/separator'\n\nexport interface ProductVariant {\n  id: string\n  name: string\n  colorHex: string\n  sku: string\n  inStock: boolean\n  stockCount: number\n  price: number\n  originalPrice: number\n  images: { id: string; url: string; alt: string }[]\n}\n\nexport const variants: ProductVariant[] = [\n  {\n    id: 'var-black',\n    name: 'Obsidian Matte Black',\n    colorHex: '#18181b',\n    sku: 'APX-950-BLK',\n    inStock: true,\n    stockCount: 14,\n    price: 599,\n    originalPrice: 749,\n    images: [\n      {\n        id: 'img-1',\n        url: 'https://images.unsplash.com/photo-1546435770-a3e426bf472b?w=900&auto=format&fit=crop&q=80',\n        alt: 'Apex Pro Reference Studio Headphones on Wood Desk',\n      },\n      {\n        id: 'img-2',\n        url: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=900&auto=format&fit=crop&q=80',\n        alt: 'Apex Pro CNC Aluminum Driver Open Back View',\n      },\n      {\n        id: 'img-3',\n        url: 'https://images.unsplash.com/photo-1583394838336-acd977736f90?w=900&auto=format&fit=crop&q=80',\n        alt: 'Apex Pro Lambskin Magnetic Earpads Angle',\n      },\n      {\n        id: 'img-4',\n        url: 'https://images.unsplash.com/photo-1484704849700-f032a568e944?w=900&auto=format&fit=crop&q=80',\n        alt: 'Apex Pro Studio Audio Cable Interconnects',\n      },\n    ],\n  },\n  {\n    id: 'var-silver',\n    name: 'Lunar Silver Aluminum',\n    colorHex: '#94a3b8',\n    sku: 'APX-950-SLV',\n    inStock: true,\n    stockCount: 6,\n    price: 599,\n    originalPrice: 749,\n    images: [\n      {\n        id: 'img-2',\n        url: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=900&auto=format&fit=crop&q=80',\n        alt: 'Apex Pro Lunar Silver Open Back View',\n      },\n      {\n        id: 'img-1',\n        url: 'https://images.unsplash.com/photo-1546435770-a3e426bf472b?w=900&auto=format&fit=crop&q=80',\n        alt: 'Apex Pro Silver Edition Desk Shot',\n      },\n      {\n        id: 'img-3',\n        url: 'https://images.unsplash.com/photo-1583394838336-acd977736f90?w=900&auto=format&fit=crop&q=80',\n        alt: 'Apex Pro Earpads Detail',\n      },\n    ],\n  },\n  {\n    id: 'var-navy',\n    name: 'Midnight Studio Navy',\n    colorHex: '#1e293b',\n    sku: 'APX-950-NVY',\n    inStock: true,\n    stockCount: 3,\n    price: 629,\n    originalPrice: 779,\n    images: [\n      {\n        id: 'img-3',\n        url: 'https://images.unsplash.com/photo-1583394838336-acd977736f90?w=900&auto=format&fit=crop&q=80',\n        alt: 'Apex Pro Midnight Navy Studio Edition',\n      },\n      {\n        id: 'img-1',\n        url: 'https://images.unsplash.com/photo-1546435770-a3e426bf472b?w=900&auto=format&fit=crop&q=80',\n        alt: 'Apex Pro Navy Perspective',\n      },\n      {\n        id: 'img-2',\n        url: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=900&auto=format&fit=crop&q=80',\n        alt: 'Apex Pro Navy Driver Housing',\n      },\n    ],\n  },\n]\n\nexport interface ProductGalleryBuyBoxProps {\n  selectedVariantId: string\n  onSelectVariant: (id: string) => void\n}\n\nexport function ProductGalleryBuyBox({ selectedVariantId, onSelectVariant }: ProductGalleryBuyBoxProps) {\n  const [activeImageIndex, setActiveImageIndex] = React.useState(0)\n  const [quantity, setQuantity] = React.useState(1)\n  const [selectedCable, setSelectedCable] = React.useState<'4.4mm' | '3.5mm' | 'xlr'>('4.4mm')\n  const [isWishlisted, setIsWishlisted] = React.useState(false)\n  const [addExtendedWarranty, setAddExtendedWarranty] = React.useState(true)\n  const [zipCode, setZipCode] = React.useState('94103')\n\n  const currentVariant = variants.find((v) => v.id === selectedVariantId) || variants[0]\n  const activeImageUrl = currentVariant.images[activeImageIndex]?.url || currentVariant.images[0].url\n\n  let finalPrice = currentVariant.price * quantity\n  if (addExtendedWarranty) finalPrice += 49\n\n  function selectVariant(v: ProductVariant) {\n    onSelectVariant(v.id)\n    setActiveImageIndex(0)\n  }\n\n  function incrementQty() {\n    if (quantity < currentVariant.stockCount) {\n      setQuantity((q) => q + 1)\n    }\n  }\n\n  function decrementQty() {\n    if (quantity > 1) {\n      setQuantity((q) => q - 1)\n    }\n  }\n\n  function handleAddToCart() {\n    alert(`Added ${quantity}x ${currentVariant.name} (${selectedCable}) to cart. Total: $${finalPrice}`)\n  }\n\n  function handleExpressBuy() {\n    alert(`Initiating Express Apple Pay checkout for $${finalPrice}...`)\n  }\n\n  return (\n    <div className=\"grid grid-cols-1 gap-8 lg:grid-cols-12 lg:gap-12\">\n      {/* Left Column: Interactive Image Gallery (7 Cols) */}\n      <div className=\"space-y-4 lg:col-span-7\">\n        {/* Main Large Showcase Image */}\n        <div className=\"border-border bg-muted/30 relative aspect-4/3 w-full overflow-hidden rounded-xl border shadow-xs\">\n          <img\n            src={activeImageUrl}\n            alt={currentVariant.name}\n            className=\"size-full object-cover transition-transform duration-300 hover:scale-105\"\n          />\n\n          {/* Overlaid Badges */}\n          <div className=\"absolute top-3 left-3 flex flex-wrap gap-1.5\">\n            <Badge variant=\"default\" className=\"h-6 font-mono text-xs font-semibold uppercase\">\n              2026 Flagship\n            </Badge>\n            <Badge variant=\"secondary\" className=\"text-success h-6 font-mono text-xs\">\n              Laboratory Calibrated\n            </Badge>\n          </div>\n\n          {/* Quick Action Floating Buttons */}\n          <div className=\"absolute top-3 right-3 flex flex-col gap-2\">\n            <button\n              type=\"button\"\n              className={`border-border bg-background/90 flex size-8 items-center justify-center rounded-full border shadow-2xs backdrop-blur-xs transition-colors ${\n                isWishlisted ? 'text-destructive' : 'text-muted-foreground hover:text-foreground'\n              }`}\n              onClick={() => setIsWishlisted(!isWishlisted)}\n            >\n              <Heart className={`size-4 ${isWishlisted ? 'fill-current' : ''}`} />\n            </button>\n            <button\n              type=\"button\"\n              className=\"border-border bg-background/90 text-muted-foreground hover:text-foreground flex size-8 items-center justify-center rounded-full border shadow-2xs backdrop-blur-xs transition-colors\"\n              onClick={() => alert('Share link copied to clipboard!')}\n            >\n              <Share2 className=\"size-4\" />\n            </button>\n          </div>\n        </div>\n\n        {/* Thumbnail Selector Row */}\n        <div className=\"grid grid-cols-4 gap-3\">\n          {currentVariant.images.map((img, idx) => (\n            <button\n              key={img.id}\n              type=\"button\"\n              className={`bg-muted/20 relative aspect-4/3 overflow-hidden rounded-lg border transition-colors ${\n                activeImageIndex === idx\n                  ? 'border-primary ring-primary/40 ring-2'\n                  : 'border-border opacity-70 hover:opacity-100'\n              }`}\n              onClick={() => setActiveImageIndex(idx)}\n            >\n              <img src={img.url} alt={img.alt} className=\"size-full object-cover\" />\n            </button>\n          ))}\n        </div>\n\n        {/* Value Assurance Micro-Bar */}\n        <div className=\"border-border bg-muted/20 grid grid-cols-3 gap-3 rounded-lg border p-3 text-center text-xs\">\n          <div className=\"flex flex-col items-center gap-1\">\n            <Truck className=\"text-primary size-4\" />\n            <span className=\"text-foreground font-medium\">Free 2-Day Air</span>\n            <span className=\"text-muted-foreground text-xs\">Orders over $150</span>\n          </div>\n          <div className=\"border-border/80 flex flex-col items-center gap-1 border-x px-2\">\n            <RotateCcw className=\"text-success size-4\" />\n            <span className=\"text-foreground font-medium\">45-Day Trial</span>\n            <span className=\"text-muted-foreground text-xs\">Zero-risk return</span>\n          </div>\n          <div className=\"flex flex-col items-center gap-1\">\n            <ShieldCheck className=\"text-info size-4\" />\n            <span className=\"text-foreground font-medium\">3-Yr Warranty</span>\n            <span className=\"text-muted-foreground text-xs\">Direct factory support</span>\n          </div>\n        </div>\n      </div>\n\n      {/* Right Column: Buy Box & Product Configuration (5 Cols) */}\n      <div className=\"space-y-6 lg:col-span-5\">\n        {/* Title & Rating Header */}\n        <div className=\"space-y-2\">\n          <div className=\"text-muted-foreground flex items-center gap-2 font-mono text-xs\">\n            <span>SKU: {currentVariant.sku}</span>\n            <span>·</span>\n            <span>Made in Germany</span>\n          </div>\n\n          <h1 className=\"text-foreground text-2xl font-bold tracking-tight sm:text-3xl\">\n            Apex Pro Reference Planar Studio Headphones\n          </h1>\n\n          {/* Reviews summary badge */}\n          <div className=\"flex items-center gap-2 pt-1 text-xs\">\n            <div className=\"text-warning flex items-center gap-1\">\n              <Star className=\"fill-warning size-3.5\" />\n              <Star className=\"fill-warning size-3.5\" />\n              <Star className=\"fill-warning size-3.5\" />\n              <Star className=\"fill-warning size-3.5\" />\n              <Star className=\"fill-warning size-3.5\" />\n            </div>\n            <span className=\"text-foreground font-semibold\">4.9</span>\n            <span className=\"text-muted-foreground\">(342 Verified Mastering Reviews)</span>\n          </div>\n        </div>\n\n        <Separator />\n\n        {/* Price Section with Live Discount */}\n        <div className=\"space-y-1.5\">\n          <div className=\"flex items-baseline gap-3\">\n            <span className=\"text-foreground text-3xl font-extrabold tracking-tight\"> ${currentVariant.price} </span>\n            <span className=\"text-muted-foreground text-base line-through\"> ${currentVariant.originalPrice} </span>\n            <Badge variant=\"secondary\" className=\"text-success font-mono text-xs font-bold\">\n              Save ${currentVariant.originalPrice - currentVariant.price} (20% OFF)\n            </Badge>\n          </div>\n          <p className=\"text-muted-foreground text-xs\">\n            Interest-free installments of ${(currentVariant.price / 4).toFixed(2)}/mo with Affirm or Klarna.\n          </p>\n        </div>\n\n        {/* Variant Color Selector */}\n        <div className=\"space-y-2.5\">\n          <div className=\"flex items-center justify-between text-xs\">\n            <span className=\"text-foreground font-medium\">Finish / Enclosure:</span>\n            <span className=\"text-muted-foreground font-mono font-semibold\">{currentVariant.name}</span>\n          </div>\n\n          <div className=\"flex items-center gap-3\">\n            {variants.map((v) => (\n              <button\n                key={v.id}\n                type=\"button\"\n                className={`group relative flex size-9 items-center justify-center rounded-full border transition-colors ${\n                  selectedVariantId === v.id\n                    ? 'border-primary ring-primary ring-offset-background ring-2 ring-offset-2'\n                    : 'border-border hover:border-muted-foreground'\n                }`}\n                onClick={() => selectVariant(v)}\n              >\n                <span\n                  className=\"size-6 rounded-full border border-black/10 shadow-2xs\"\n                  style={{ backgroundColor: v.colorHex }}\n                />\n              </button>\n            ))}\n          </div>\n        </div>\n\n        {/* Cable Termination Selector */}\n        <div className=\"space-y-2.5\">\n          <div className=\"flex items-center justify-between text-xs\">\n            <span className=\"text-foreground font-medium\">Primary Studio Cable Termination:</span>\n            <span className=\"text-primary font-mono text-xs\">Included in package</span>\n          </div>\n\n          <div className=\"grid grid-cols-3 gap-2 text-xs\">\n            <button\n              type=\"button\"\n              className={`rounded-lg border p-2.5 text-center transition-colors ${\n                selectedCable === '4.4mm'\n                  ? 'border-primary bg-primary/5 text-primary ring-primary font-semibold ring-1'\n                  : 'border-border bg-card text-foreground hover:bg-muted/40'\n              }`}\n              onClick={() => setSelectedCable('4.4mm')}\n            >\n              <div className=\"font-mono text-xs font-semibold\">4.4mm Balanced</div>\n              <div className=\"text-muted-foreground text-xs\">Pentaconn TRRRS</div>\n            </button>\n\n            <button\n              type=\"button\"\n              className={`rounded-lg border p-2.5 text-center transition-colors ${\n                selectedCable === '3.5mm'\n                  ? 'border-primary bg-primary/5 text-primary ring-primary font-semibold ring-1'\n                  : 'border-border bg-card text-foreground hover:bg-muted/40'\n              }`}\n              onClick={() => setSelectedCable('3.5mm')}\n            >\n              <div className=\"font-mono text-xs font-semibold\">3.5mm SE + 6.35mm</div>\n              <div className=\"text-muted-foreground text-xs\">Screw Adapter</div>\n            </button>\n\n            <button\n              type=\"button\"\n              className={`rounded-lg border p-2.5 text-center transition-colors ${\n                selectedCable === 'xlr'\n                  ? 'border-primary bg-primary/5 text-primary ring-primary font-semibold ring-1'\n                  : 'border-border bg-card text-foreground hover:bg-muted/40'\n              }`}\n              onClick={() => setSelectedCable('xlr')}\n            >\n              <div className=\"font-mono text-xs font-semibold\">4-Pin XLR Pro</div>\n              <div className=\"text-muted-foreground text-xs\">Neutrik Studio</div>\n            </button>\n          </div>\n        </div>\n\n        {/* Add-on Warranty Checkbox */}\n        <label className=\"border-border bg-muted/20 hover:bg-muted/30 flex cursor-pointer items-start gap-3 rounded-lg border p-3 text-xs transition-colors\">\n          <input\n            type=\"checkbox\"\n            checked={addExtendedWarranty}\n            onChange={(e) => setAddExtendedWarranty(e.target.checked)}\n            className=\"border-border text-primary focus:ring-primary mt-0.5 size-4 rounded\"\n          />\n          <div className=\"space-y-0.5\">\n            <div className=\"flex items-center justify-between\">\n              <span className=\"text-foreground font-semibold\">Add 3-Year Apex Care+ Accidental Protection</span>\n              <span className=\"text-foreground font-mono font-bold\">+$49.00</span>\n            </div>\n            <p className=\"text-muted-foreground text-xs\">\n              Covers accidental drops, driver voice-coil failure, and free earpad replacement.\n            </p>\n          </div>\n        </label>\n\n        {/* Stock Telemetry & Urgency Notice */}\n        <div className=\"space-y-1.5 rounded-lg border border-orange-500/30 bg-orange-500/5 p-3 text-xs\">\n          <div className=\"flex items-center justify-between\">\n            <div className=\"flex items-center gap-1.5 font-semibold text-orange-600 dark:text-orange-400\">\n              <Flame className=\"size-3.5 fill-current\" />\n              <span>Fulfillment Hub Stock Level</span>\n            </div>\n            <span className=\"text-foreground font-mono font-bold\">{currentVariant.stockCount} units remaining</span>\n          </div>\n          <p className=\"text-muted-foreground text-xs\">\n            High demand: 18 sound engineers have this item in their active checkout carts.\n          </p>\n        </div>\n\n        {/* Quantity & Add to Cart Controls */}\n        <div className=\"space-y-3 pt-2\">\n          <div className=\"flex items-center gap-3\">\n            {/* Stepper */}\n            <div className=\"border-border bg-background flex h-10 items-center rounded-lg border shadow-2xs\">\n              <button\n                type=\"button\"\n                className=\"text-muted-foreground hover:text-foreground flex size-9 items-center justify-center\"\n                onClick={decrementQty}\n              >\n                <Minus className=\"size-3.5\" />\n              </button>\n              <span className=\"text-foreground w-8 text-center font-mono text-xs font-semibold\">{quantity}</span>\n              <button\n                type=\"button\"\n                className=\"text-muted-foreground hover:text-foreground flex size-9 items-center justify-center\"\n                onClick={incrementQty}\n              >\n                <Plus className=\"size-3.5\" />\n              </button>\n            </div>\n\n            {/* Primary Add to Cart */}\n            <Button className=\"h-10 flex-1 gap-2 font-medium shadow-xs\" onClick={handleAddToCart}>\n              <ShoppingCart className=\"size-4\" />\n              <span>Add to Cart · ${finalPrice}</span>\n            </Button>\n          </div>\n\n          {/* 1-Click Apple Pay / Instant Buy */}\n          <Button\n            variant=\"secondary\"\n            className=\"border-border h-10 w-full gap-2 border font-semibold shadow-2xs\"\n            onClick={handleExpressBuy}\n          >\n            <Zap className=\"fill-warning text-warning size-4\" />\n            <span>Instant 1-Click Checkout (Apple Pay / G-Pay)</span>\n          </Button>\n        </div>\n\n        {/* Shipping Zip Code Estimator */}\n        <div className=\"border-border bg-muted/20 flex items-center gap-2 rounded-lg border p-2.5 text-xs\">\n          <Truck className=\"text-muted-foreground size-4 shrink-0\" />\n          <span className=\"text-muted-foreground\">Deliver to:</span>\n          <Input\n            value={zipCode}\n            onChange={(e) => setZipCode(e.target.value)}\n            maxLength={5}\n            className=\"h-7 w-20 text-center font-mono text-xs\"\n          />\n          <span className=\"text-foreground font-medium\">\n            Fast Delivery: <strong>Tomorrow, 2:00 PM</strong>\n          </span>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:page",
      "target": "~/components/blocks/ProductGalleryBuyBox.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/input.json",
    "https://uipkge.dev/r/react/separator.json"
  ],
  "description": "Flagship e-commerce product detail page with multi-angle gallery, finish & cable selectors, stock urgency counter, warranty upsell, flash sale countdown bar, frequently bought together bundle, technical specs sheet, customer reviews breakdown, and community Q&A.",
  "categories": [
    "commerce",
    "ecommerce"
  ]
}