"use client"; import React, { useEffect, useState } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { Star } from "lucide-react"; interface Review { name: string; role: string; rating: number; text: string; } export default function Testimonial({ className }: { className?: string }) { const [isLargeScreen, setIsLargeScreen] = useState(true); const [hoveredIndex, setHoveredIndex] = useState(null); useEffect(() => { const handleResize = () => { setIsLargeScreen(window.innerWidth >= 1280); }; handleResize(); window.addEventListener("resize", handleResize); return () => window.removeEventListener("resize", handleResize); }, []); const model1 = "/src/assets/images/about_model_1_1782195674354.jpg"; const model2 = "/src/assets/images/about_model_2_1782195693685.jpg"; const model3 = "/src/assets/images/testimonial_model_3_1782278552456.jpg"; const model4 = "/src/assets/images/testimonial_model_4_1782278671183.jpg"; const female1 = "/src/assets/images/testimonial_female_1_1782279636014.jpg"; const male2 = "/src/assets/images/testimonial_male_2_1782279654585.jpg"; const row1Avatars = [model1, model2, female1, model3, model4]; const row2Avatars = [model3, male2, model2, female1, model1]; const reviews: Review[] = [ { name: "Aria Montague", role: "Senior Scent Connoisseur", rating: 5, text: "\"An absolute masterpiece. Eloria opens with a brilliant, luminous whisper of rare night-blooming jasmine that lingers delicately for hours. It is pure bottled elegance.\"" }, { name: "Lucas Bennett", role: "Aesthetician & Designer", rating: 5, text: "\"The transition from the deep velvet woods to the ethereal black orchid notes is stunning. It possesses a magnetic sillage that feels both incredibly modern and deeply timeless.\"" }, { name: "Elena Rostova", role: "Luxury Lifestyle Director", rating: 5, text: "\"Eloria is unlike anything else. It captures an atmospheric, soft-focus luxury that garners endless compliments. A true signature scent of modern sophistication.\"" }, { name: "Nathaniel Vance", role: "Fashion Editorial Stylist", rating: 5, text: "\"Spicy cardamom blended with creamy sandalwood. It's warm, inviting, and exudes a quiet, powerful confidence. The bottle design is a work of art on its own.\"" }, { name: "Seraphina Vance", role: "Fine Art Photographer", rating: 5, text: "\"A stunning olfactory symphony. The rich amber-moss base grounds the floral highlights beautifully. It feels incredibly premium, intimate, and memorable.\"" }, { name: "Amara Sinclair", role: "Vogue Fragrance Columnist", rating: 5, text: "\"Intoxicatingly beautiful. The violet leaves add a crisp freshness that balances the rich, luxurious vanilla pod base perfectly. A gorgeous daily luxury.\"" }, { name: "Julian Cross", role: "Creative Director", rating: 5, text: "\"Sophisticated, velvet, and magnetic. It creates an unforgettable, rich trail of luxury that is subtly sensual yet completely clean. Highly recommended.\"" }, { name: "Dr. Alistair Sterling", role: "Olfactory Psychologist", rating: 5, text: "\"The psychological impact of Eloria's drydown is sublime—inspiring warmth and refined calm. It has a masterful balance of organic floral absolute and luxury woods.\"" }, { name: "Theresa Sterling", role: "Luxury Collector", rating: 5, text: "\"A bottle of absolute bliss. Eloria's unique blend of warm saffron and dark orchid makes it my go-to for every high-profile event. It is pure luxury.\"" }, { name: "Sienna Marquet", role: "Sensory Curator", rating: 5, text: "\"Exquisite packaging, even more exquisite scent. It feels like walking through a private royal greenhouse at twilight. Elegant, luxurious, and extremely long-lasting.\"" } ]; return ( <>

{row1Avatars.map((src, idx) => { const actualIdx = idx; const isAnyHovered = hoveredIndex !== null; const isThisHovered = hoveredIndex === actualIdx; return ( setHoveredIndex(actualIdx)} onMouseLeave={() => setHoveredIndex(null)} animate={{ scale: isThisHovered ? 1.06 : isAnyHovered ? 0.93 : 1, opacity: isThisHovered ? 1 : isAnyHovered ? 0.35 : 1, filter: isAnyHovered && !isThisHovered ? "grayscale(35%)" : "grayscale(0%)", }} className="relative rounded-full aspect-square w-full max-w-[110px] sm:max-w-[150px] xl:max-w-[217px] xl:w-[217px] xl:h-[217px] cursor-pointer group" >

); })}

TESTIMONIAL {hoveredIndex !== null && (

{Array.from({ length: reviews[hoveredIndex].rating }).map((_, i) => ( ))}

{reviews[hoveredIndex].text}

{reviews[hoveredIndex].name}

)}

{row2Avatars.map((src, idx) => { const actualIdx = idx + 5; const isAnyHovered = hoveredIndex !== null; const isThisHovered = hoveredIndex === actualIdx; return ( setHoveredIndex(actualIdx)} onMouseLeave={() => setHoveredIndex(null)} animate={{ scale: isThisHovered ? 1.06 : isAnyHovered ? 0.93 : 1, opacity: isThisHovered ? 1 : isAnyHovered ? 0.35 : 1, filter: isAnyHovered && !isThisHovered ? "grayscale(35%)" : "grayscale(0%)", }} className="relative rounded-full aspect-square w-full max-w-[110px] sm:max-w-[150px] xl:max-w-[217px] xl:w-[217px] xl:h-[217px] cursor-pointer group" >

); })}

); }