import React, { useState, useEffect } from 'react';
import { ShoppingCart, Star, Heart, Share2, X, ChevronLeft, ChevronRight, Check, ZoomIn } from 'lucide-react';
// --- Mock Data ---
const PRODUCT_DATA = {
id: 'lw-001',
name: 'The Celestial Chronograph',
price: 12500,
currency: 'USD',
rating: 4.9,
reviews: 128,
description: "Experience the pinnacle of horological engineering. The Celestial Chronograph features a hand-assembled Swiss movement, sapphire crystal glass, and an 18k gold case. Designed for those who understand that time is the ultimate luxury.",
features: [
"Swiss Automatic Movement",
"18k Rose Gold Case",
"Sapphire Crystal Glass",
"Water Resistant 50m",
"Genuine Alligator Leather Strap"
],
colors: [
{ id: 'gold', name: 'Royal Gold', hex: '#D4AF37', image: 'https://image.qwenlm.ai/public_source/9420ffed-7ebf-421c-a1af-32369355edac/187980432-b7f7-42c1-b713-a4a72458ed95.png' },
{ id: 'silver', name: 'Sterling Silver', hex: '#C0C0C0', image: 'https://image.qwenlm.ai/public_source/9420ffed-7ebf-421c-a1af-32369355edac/135c8e6cd-9669-4358-8e2f-83c59f0e0e07.png' },
{ id: 'black', name: 'Midnight Black', hex: '#1a1a1a', image: 'https://image.qwenlm.ai/public_source/9420ffed-7ebf-421c-a1af-32369355edac/1764cb433-9e60-43d2-a5aa-ca4bd84d659f.png' }
],
images: [
'https://image.qwenlm.ai/public_source/9420ffed-7ebf-421c-a1af-32369355edac/187980432-b7f7-42c1-b713-a4a72458ed95.png', // Main
'https://image.qwenlm.ai/public_source/9420ffed-7ebf-421c-a1af-32369355edac/1877d5f6a-3f56-43c0-be01-0483a62f0f92.png', // Side
'https://image.qwenlm.ai/public_source/9420ffed-7ebf-421c-a1af-32369355edac/1f3756796-3a35-4ea2-9ba6-5f02b5d539c1.png' // Detail
],
related: [
{ id: 1, name: 'The Voyager', price: 8500, image: 'https://image.qwenlm.ai/public_source/9420ffed-7ebf-421c-a1af-32369355edac/135c8e6cd-9669-4358-8e2f-83c59f0e0e07.png' },
{ id: 2, name: 'The Nocturne', price: 9200, image: 'https://image.qwenlm.ai/public_source/9420ffed-7ebf-421c-a1af-32369355edac/1764cb433-9e60-43d2-a5aa-ca4bd84d659f.png' },
{ id: 3, name: 'The Equinox', price: 11000, image: 'https://image.qwenlm.ai/public_source/9420ffed-7ebf-421c-a1af-32369355edac/187980432-b7f7-42c1-b713-a4a72458ed95.png' }
]
};
// --- Components ---
const Button = ({ children, variant = 'primary', className = '', onClick, disabled }) => {
const baseStyle = "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-neutral-400 disabled:pointer-events-none disabled:opacity-50 h-10 px-8 py-2";
const variants = {
primary: "bg-neutral-900 text-neutral-50 hover:bg-neutral-900/90 shadow-sm",
outline: "border border-neutral-200 bg-transparent hover:bg-neutral-100 text-neutral-900",
ghost: "hover:bg-neutral-100 hover:text-neutral-900",
gold: "bg-[#D4AF37] text-white hover:bg-[#b5952f] shadow-md"
};
return (
);
};
const Badge = ({ children }) => (
{children}
);
const Modal = ({ isOpen, onClose, children }) => {
if (!isOpen) return null;
return (
);
};
export default function LuxuryWatchPage() {
const [activeImage, setActiveImage] = useState(0);
const [selectedColor, setSelectedColor] = useState(PRODUCT_DATA.colors[0]);
const [selectedSize, setSelectedSize] = useState('42mm');
const [isCartAnimating, setIsCartAnimating] = useState(false);
const [isQuickViewOpen, setIsQuickViewOpen] = useState(false);
const [quickViewImage, setQuickViewImage] = useState('');
const handleAddToCart = () => {
setIsCartAnimating(true);
setTimeout(() => setIsCartAnimating(false), 2000);
};
const openQuickView = (imgUrl) => {
setQuickViewImage(imgUrl);
setIsQuickViewOpen(true);
};
return (
{children}
{/* Navigation Placeholder */}
{/* Quick View Modal */}
setIsQuickViewOpen(false)}>
);
}
{/* Left Side: Sticky Gallery */}
openQuickView(PRODUCT_DATA.images[activeImage])}
/>
New Collection 2024
{/* Right Side: Scrollable Details */}
{/* Color Selector */}
{/* Size Selector */}
{/* Actions */}
{/* Features List */}
{/* You Might Also Like */}
{PRODUCT_DATA.images.map((img, idx) => (
))}
{[...Array(5)].map((_, i) =>
{PRODUCT_DATA.name}
${PRODUCT_DATA.price.toLocaleString()}
{PRODUCT_DATA.description}
Case Material
{selectedColor.name}
{PRODUCT_DATA.colors.map((color) => (
))}
Case Size
{['38mm', '42mm', '46mm'].map((size) => (
))}
Specifications
-
{PRODUCT_DATA.features.map((feature, idx) => (
- {feature} ))}
You Might Also Like
{PRODUCT_DATA.related.map((item) => (
))}
{item.name}
${item.price.toLocaleString()}
{PRODUCT_DATA.name}
Detailed macro view of the {selectedColor.name} edition.
Movement
Swiss Automatic
Crystal
Sapphire
Water Resistance
50 Meters
Comments