import React, { useEffect, useMemo, useRef, useState } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { ShoppingCart, Star, ShieldCheck, Truck, BadgeCheck, Sparkles, Play, X, ChevronRight } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"; import { Badge } from "@/components/ui/badge"; import { Input } from "@/components/ui/input"; // --- CONFIG --- const PRODUCT = { title: "Kolorful Mineral Pearl Pigment Watercolor", price: 12.99, compareAt: 16.00, sku: "KOLORFUL-PEARL", url: "https://caedrea.com/products/kolorful-mineral-pearl-pigment-art-watercolor?_pos=2&_psq=kolor&_ss=e&_v=1.0", images: [ { src: "https://images.unsplash.com/photo-1513569771920-c9e1d31714af?q=80&w=2000&auto=format&fit=crop", alt: "Shimmering mineral pearl pigment close-up", }, { src: "https://images.unsplash.com/photo-1549880338-65ddcdfd017b?q=80&w=2000&auto=format&fit=crop", alt: "Brush stroke with glowing pearl watercolor", }, { src: "https://images.unsplash.com/photo-1526312426976-593c2b99967a?q=80&w=2000&auto=format&fit=crop", alt: "Artist mixing pigments on palette", }, ], video: { poster: "https://images.unsplash.com/photo-1549880338-65ddcdfd017b?q=80&w=1200&auto=format&fit=crop", src: "", }, variants: [ { id: "moonstone", name: "Moonstone", swatch: "#c8d0ff" }, { id: "rose-aurora", name: "Rose Aurora", swatch: "#ffc0cb" }, { id: "sunpearl", name: "Sunpearl", swatch: "#ffe29a" }, { id: "emerald-glow", name: "Emerald Glow", swatch: "#b7ffd8" }, ], benefits: [ { icon: Sparkles, title: "Rich Mineral Shine", text: "Create luminous, eye‑catching highlights that elevate any piece." }, { icon: BadgeCheck, title: "Artist‑Grade Quality", text: "High‑load pigments for smooth blending and layering." }, { icon: ShieldCheck, title: "Non‑Toxic & Safe", text: "Formulated without harmful additives. Kid‑friendly." }, { icon: Truck, title: "Ships in 24h", text: "Fast dispatch and tracked delivery worldwide." }, ], }; const REVIEWS = [ { name: "Elena S.", rating: 5, text: "The shimmer is unreal. My clients noticed the difference immediately!", photo: "https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?q=80&w=800&auto=format&fit=crop" }, { name: "Noah L.", rating: 5, text: "Blends like butter. Moonstone is my new secret weapon.", photo: "https://images.unsplash.com/photo-1518806118471-f28b20a1d79d?q=80&w=800&auto=format&fit=crop" }, { name: "Harper K.", rating: 4, text: "Great value. The sparkle holds even after multiple washes.", photo: "https://images.unsplash.com/photo-1461344577544-4e5dc9487184?q=80&w=800&auto=format&fit=crop" }, ]; export default function KolorfulLanding() { const [selected, setSelected] = useState(PRODUCT.variants[0]); const [qty, setQty] = useState(1); const [showExit, setShowExit] = useState(false); const [activeMedia, setActiveMedia] = useState(0); // 0..n where last index could be video const totalPrice = useMemo(() => (PRODUCT.price * qty).toFixed(2), [qty]); // Exit‑intent modal (very light) useEffect(() => { const onMouseLeave = (e: MouseEvent) => { if (e.clientY <= 0) setShowExit(true); }; document.addEventListener("mouseout", onMouseLeave); return () => document.removeEventListener("mouseout", onMouseLeave); }, []); // Sticky add-to-cart visibility const atcRef = useRef(null); const addToCart = () => { // Replace with Shopify storefront or your cart handler window.open(PRODUCT.url, "_blank"); }; return (

{/* Top Announcement Bar */}

⚡ Limited stock: popular colors sell out weekly — Buy 3, Get 1 Free auto‑applied at checkout.

{/* HERO */}

{/* Media Gallery */}

{activeMedia < PRODUCT.images.length ? ( ) : (

window.open(PRODUCT.url, "_blank")} >

)}

{/* Thumbnails */}

{PRODUCT.images.map((img, i) => ( setActiveMedia(i)} className={`rounded-xl overflow-hidden border ${activeMedia===i?"border-gray-900":"border-gray-200"}`} > ))} {/* Video thumb */} setActiveMedia(PRODUCT.images.length)} className={`rounded-xl border aspect-square flex items-center justify-center ${activeMedia===PRODUCT.images.length?"border-gray-900":"border-gray-200"}`} >

{/* Info */}

Bestseller

(1,248 reviews)

{PRODUCT.title}

{/* Price */}

${PRODUCT.price.toFixed(2)}

${PRODUCT.compareAt.toFixed(2)}

Save {Math.round((1 - PRODUCT.price/PRODUCT.compareAt) * 100)}%

{/* Variant Selector */}

Choose your color

{PRODUCT.variants.map(v => ( setSelected(v)} className={`flex items-center gap-2 px-3 py-2 rounded-2xl border transition ${selected.id===v.id?"border-gray-900 bg-gray-50":"border-gray-200 hover:border-gray-300"}`} aria-pressed={selected.id===v.id} > {v.name} ))}

{/* Quantity + ATC */}

setQty(q => Math.max(1, q-1))} aria-label="Decrease quantity">- setQty(Math.max(1, parseInt(e.target.value || "1")))} className="w-16 text-center" type="number" min={1} /> setQty(q => q+1)} aria-label="Increase quantity">+

Add to Cart — ${totalPrice}

{/* Trust icons */}

30‑Day Guarantee

Ships in 24h

Secure Checkout

{/* BENEFITS */}

{PRODUCT.benefits.map((b, i) => ( {b.title} {b.text} ))}

{/* SOCIAL PROOF */}

Loved by 1,000+ artists

See all reviews

{REVIEWS.map((r, i) => (

{[...Array(r.rating)].map((_, idx) => )}

“{r.text}”

— {r.name}

))}

{/* OFFER / BUNDLE */}

Bundle & Save

Buy 3, get 1 free — auto‑applied at checkout. Mix any colors.

Add Bundle to Cart

{/* DETAILS / TABS */}

Description Shipping & Returns FAQ

Premium mineral‑based pearl pigments designed for watercolor artists and creators. Delivers luminous sparkle, smooth blending, and long‑lasting brilliance.

• High‑load pigments for maximum shimmer
• Water‑soluble, easy to blend and layer
• Non‑toxic, safe for all ages
• Works with watercolor, calligraphy, mixed media

Orders ship within 24 hours. You’ll receive a tracking link once dispatched.

Returns accepted within 30 days — unused items in original packaging.

Are these pigments safe for children? Yes — they’re non‑toxic and meet common safety standards. Supervise young artists for best results. How do I get the strongest shimmer? Use on smooth watercolor paper and apply in thin layers, letting each coat dry before the next. Finish with a gentle highlight stroke. Do they work with other mediums? Yes — excellent for calligraphy, mixed media, and crafts. Test on a small area for best technique.

{/* STICKY ATC BAR */}

{PRODUCT.title} — {selected.name}

${PRODUCT.price.toFixed(2)} • In Stock

Add to Cart

{/* EXIT INTENT OFFER */} {showExit && ( setShowExit(false)} > e.stopPropagation()} >

Wait! Get 10% Off

Complete your order today and save on your first jar of Kolorful Mineral Pearl Pigment.

setShowExit(false)} className="text-gray-500 hover:text-gray-700">

{ setShowExit(false); addToCart(); }}>Claim Offer

We’ll send your discount code instantly.

)} {/* FOOTER NOTE */}

); }