61:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 62:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 63:Ta1a,'use client' import * as React from 'react' import { ChevronRight } from 'lucide-react' // Import sub-blocks import { FlashSaleOfferBar } from '../flash-sale-offer-bar' import { TechnicalSpecsSheet } from '../technical-specs-sheet' import { ProductQaCommunity } from '../product-qa-community' import { CustomerReviews } from '../customer-reviews' import { FrequentlyBoughtTogether } from '../frequently-bought-together' import { ProductGalleryBuyBox, variants } from './ProductGalleryBuyBox' export function ProductDetailPage() { const [selectedVariantId, setSelectedVariantId] = React.useState(variants[0].id) const currentVariant = variants.find((v) => v.id === selectedVariantId) || variants[0] return (

{/* Breadcrumb Navigation Bar */} {/* Main Hero Split: Gallery & Buy Box */} {/* Section 2: Flash Sale & Multi-Buy Tier Deal Bar */}

{/* Section 3: Frequently Bought Together Bundle */}

{/* Section 4: Engineering & Technical Specifications Sheet */}

{/* Section 5: Verified Customer Reviews & Photo Breakdown */}

{/* Section 6: Customer & Staff Q&A Community */}

) } 64:T4793,'use client' import * as React from 'react' import { Star, ShieldCheck, Truck, RotateCcw, Heart, Share2, Plus, Minus, ShoppingCart, Zap, Flame } from 'lucide-react' import { Badge } from '@/components/ui/badge' import { Button } from '@/components/ui/button' import { Input } from '@/components/ui/input' import { Separator } from '@/components/ui/separator' export interface ProductVariant { id: string name: string colorHex: string sku: string inStock: boolean stockCount: number price: number originalPrice: number images: { id: string; url: string; alt: string }[] } export const variants: ProductVariant[] = [ { id: 'var-black', name: 'Obsidian Matte Black', colorHex: '#18181b', sku: 'APX-950-BLK', inStock: true, stockCount: 14, price: 599, originalPrice: 749, images: [ { id: 'img-1', url: 'https://images.unsplash.com/photo-1546435770-a3e426bf472b?w=900&auto=format&fit=crop&q=80', alt: 'Apex Pro Reference Studio Headphones on Wood Desk', }, { id: 'img-2', url: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=900&auto=format&fit=crop&q=80', alt: 'Apex Pro CNC Aluminum Driver Open Back View', }, { id: 'img-3', url: 'https://images.unsplash.com/photo-1583394838336-acd977736f90?w=900&auto=format&fit=crop&q=80', alt: 'Apex Pro Lambskin Magnetic Earpads Angle', }, { id: 'img-4', url: 'https://images.unsplash.com/photo-1484704849700-f032a568e944?w=900&auto=format&fit=crop&q=80', alt: 'Apex Pro Studio Audio Cable Interconnects', }, ], }, { id: 'var-silver', name: 'Lunar Silver Aluminum', colorHex: '#94a3b8', sku: 'APX-950-SLV', inStock: true, stockCount: 6, price: 599, originalPrice: 749, images: [ { id: 'img-2', url: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=900&auto=format&fit=crop&q=80', alt: 'Apex Pro Lunar Silver Open Back View', }, { id: 'img-1', url: 'https://images.unsplash.com/photo-1546435770-a3e426bf472b?w=900&auto=format&fit=crop&q=80', alt: 'Apex Pro Silver Edition Desk Shot', }, { id: 'img-3', url: 'https://images.unsplash.com/photo-1583394838336-acd977736f90?w=900&auto=format&fit=crop&q=80', alt: 'Apex Pro Earpads Detail', }, ], }, { id: 'var-navy', name: 'Midnight Studio Navy', colorHex: '#1e293b', sku: 'APX-950-NVY', inStock: true, stockCount: 3, price: 629, originalPrice: 779, images: [ { id: 'img-3', url: 'https://images.unsplash.com/photo-1583394838336-acd977736f90?w=900&auto=format&fit=crop&q=80', alt: 'Apex Pro Midnight Navy Studio Edition', }, { id: 'img-1', url: 'https://images.unsplash.com/photo-1546435770-a3e426bf472b?w=900&auto=format&fit=crop&q=80', alt: 'Apex Pro Navy Perspective', }, { id: 'img-2', url: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=900&auto=format&fit=crop&q=80', alt: 'Apex Pro Navy Driver Housing', }, ], }, ] export interface ProductGalleryBuyBoxProps { selectedVariantId: string onSelectVariant: (id: string) => void } export function ProductGalleryBuyBox({ selectedVariantId, onSelectVariant }: ProductGalleryBuyBoxProps) { const [activeImageIndex, setActiveImageIndex] = React.useState(0) const [quantity, setQuantity] = React.useState(1) const [selectedCable, setSelectedCable] = React.useState<'4.4mm' | '3.5mm' | 'xlr'>('4.4mm') const [isWishlisted, setIsWishlisted] = React.useState(false) const [addExtendedWarranty, setAddExtendedWarranty] = React.useState(true) const [zipCode, setZipCode] = React.useState('94103') const currentVariant = variants.find((v) => v.id === selectedVariantId) || variants[0] const activeImageUrl = currentVariant.images[activeImageIndex]?.url || currentVariant.images[0].url let finalPrice = currentVariant.price * quantity if (addExtendedWarranty) finalPrice += 49 function selectVariant(v: ProductVariant) { onSelectVariant(v.id) setActiveImageIndex(0) } function incrementQty() { if (quantity < currentVariant.stockCount) { setQuantity((q) => q + 1) } } function decrementQty() { if (quantity > 1) { setQuantity((q) => q - 1) } } function handleAddToCart() { alert(`Added ${quantity}x ${currentVariant.name} (${selectedCable}) to cart. Total: $${finalPrice}`) } function handleExpressBuy() { alert(`Initiating Express Apple Pay checkout for $${finalPrice}...`) } return (

{/* Left Column: Interactive Image Gallery (7 Cols) */}

{/* Main Large Showcase Image */}

{/* Overlaid Badges */}

2026 Flagship Laboratory Calibrated

{/* Quick Action Floating Buttons */}

{/* Thumbnail Selector Row */}

{currentVariant.images.map((img, idx) => ( ))}

{/* Value Assurance Micro-Bar */}

Free 2-Day Air Orders over $150

45-Day Trial Zero-risk return

3-Yr Warranty Direct factory support

{/* Right Column: Buy Box & Product Configuration (5 Cols) */}

{/* Title & Rating Header */}

SKU: {currentVariant.sku} · Made in Germany

Apex Pro Reference Planar Studio Headphones

{/* Reviews summary badge */}

4.9 (342 Verified Mastering Reviews)

{/* Price Section with Live Discount */}

${currentVariant.price} ${currentVariant.originalPrice} Save ${currentVariant.originalPrice - currentVariant.price} (20% OFF)

Interest-free installments of ${(currentVariant.price / 4).toFixed(2)}/mo with Affirm or Klarna.

{/* Variant Color Selector */}

Finish / Enclosure: {currentVariant.name}

{variants.map((v) => ( ))}

{/* Cable Termination Selector */}

Primary Studio Cable Termination: Included in package

{/* Add-on Warranty Checkbox */} setAddExtendedWarranty(e.target.checked)} className="border-border text-primary focus:ring-primary mt-0.5 size-4 rounded" />

Add 3-Year Apex Care+ Accidental Protection +$49.00

Covers accidental drops, driver voice-coil failure, and free earpad replacement.

{/* Stock Telemetry & Urgency Notice */}

Fulfillment Hub Stock Level

{currentVariant.stockCount} units remaining

High demand: 18 sound engineers have this item in their active checkout carts.

{/* Quantity & Add to Cart Controls */}

{/* Stepper */}

{quantity}

{/* Primary Add to Cart */}

{/* 1-Click Apple Pay / Instant Buy */}

{/* Shipping Zip Code Estimator */}

Deliver to: setZipCode(e.target.value)} maxLength={5} className="h-7 w-20 text-center font-mono text-xs" /> Fast Delivery: Tomorrow, 2:00 PM

) } 60:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L61",null,{"namespace":"@registrydirectory","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"]}]]}],null]}],["$","$L62",null,{"files":[{"path":"packages/registry-react/blocks/product-detail-page/ProductDetailPage.tsx","content":"$63","type":"registry:page","target":"~/components/blocks/ProductDetailPage.tsx"},{"path":"packages/registry-react/blocks/product-detail-page/ProductGalleryBuyBox.tsx","content":"$64","type":"registry:page","target":"~/components/blocks/ProductGalleryBuyBox.tsx"}],"className":"h-[70svh] min-h-80"}]]}]