"use client"; import React, { useState, useEffect, useRef } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { Star, ArrowRight } from "lucide-react"; interface ProductData { id: number; exclusivity: string; discount: string; name: string; price: string; image: string; } const products: ProductData[] = [ { id: 1, exclusivity: "EXCLUSIVE", discount: "20% OFF", name: "ELEGANCE EAU DE PARFUM", price: "$120.00", image: "https://cdn.jiro.build/Eloria%20Perfume/Images/Perfume%20Bottle.png", }, { id: 2, exclusivity: "EXCLUSIVE", discount: "20% OFF", name: "ROSE LUXE CELESTE", price: "$135.00", image: "https://cdn.jiro.build/Eloria%20Perfume/Images/Perfume%20Bottle.png", }, { id: 3, exclusivity: "EXCLUSIVE", discount: "20% OFF", name: "WHITE MUSK SUPREME", price: "$150.00", image: "https://cdn.jiro.build/Eloria%20Perfume/Images/Perfume%20Bottle.png", }, ]; export default function ProductsNotesV2({ className }: { className?: string }) { const [hoveredCardId, setHoveredCardId] = useState(null); const [isLargeScreen, setIsLargeScreen] = useState(false); const containerRef = useRef(null); useEffect(() => { const handleResize = () => { setIsLargeScreen(window.innerWidth >= 1024); }; handleResize(); window.addEventListener("resize", handleResize); return () => { window.removeEventListener("resize", handleResize); }; }, []); const showCardBottle = true; const leftX = 0; const rightX = 0; return ( <>

{/* Header Container */}

PRODUCT NOTE

{/* 3 Cards Row */}

{products.map((product) => { const isHovered = hoveredCardId === product.id; return (

setHoveredCardId(product.id)} onMouseLeave={() => setHoveredCardId(null)} style={{ width: isLargeScreen ? "426px" : "100%", maxWidth: isLargeScreen ? "none" : "360px", height: isLargeScreen ? "521px" : "450px", }} > {/* Outer Card Box that animates height like a dropdown and slides sideways */} {/* Inner Card Box - Fixed Width & Height */}

{/* Top Text (Exclusive & 20% OFF) */}

{product.exclusivity} {product.discount}

{/* Center Bottle Image */}

{/* Shadow & Glow under bottle */}

{/* Button Details */}

{/* Dropdown Extra Info Container (Rating, Title, Price show up bottom-under) */} {isHovered && ( {/* Stars (5 Star Rating) */}

{Array.from({ length: 5 }).map((_, i) => ( ))}

{/* Product Name */}

{product.name}

{/* Product Price */}

{product.price}

)}

); })}

); }