"use client"; import React, { useState, useEffect, useCallback } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { ChevronLeft, ChevronRight, Pause, Play, Quote } from "lucide-react"; // --- MOCK DATA --- const TESTIMONIALS = [ { id: 1, content: "The workflow improvements we've seen since adopting these components are staggering. It has allowed our engineering team to focus on core business logic rather than rebuilding UI elements from scratch.", author: "Samantha Lee", role: "Director of Engineering", company: "TechNova", avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&q=80&w=150&h=150", }, { id: 2, content: "An absolute game-changer. The architectural decisions behind this library align perfectly with modern React standards. The balance between flexibility and strict design guidelines is masterful.", author: "James Wilson", role: "Lead Architect", company: "Frontend Dynamics", avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?auto=format&fit=crop&q=80&w=150&h=150", }, { id: 3, content: "Our design-to-development handoff used to take weeks. Now, it takes days. The visual consistency across the entire suite ensures that our brand looks premium on every device.", author: "Aisha Patel", role: "Head of Product Design", company: "Studio 42", avatar: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&q=80&w=150&h=150", }, { id: 4, content: "I've deployed dozens of landing pages, and nothing comes close to the out-of-the-box performance and aesthetics of this library. The dark mode integration is flawless.", author: "Michael Chang", role: "Indie Maker", company: "SoloStack", avatar: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&q=80&w=150&h=150", }, ]; const SLIDE_DURATION = 6000; // 6 seconds per slide export default function AutoPlaySliderPro() { const [isMounted, setIsMounted] = useState(false); const [currentIndex, setCurrentIndex] = useState(0); const [direction, setDirection] = useState(1); const [isPaused, setIsPaused] = useState(false); useEffect(() => { setIsMounted(true); }, []); const handleNext = useCallback(() => { setDirection(1); setCurrentIndex((prev) => (prev + 1) % TESTIMONIALS.length); }, []); const handlePrev = () => { setDirection(-1); setCurrentIndex((prev) => (prev - 1 + TESTIMONIALS.length) % TESTIMONIALS.length); }; useEffect(() => { if (isPaused) return; const timer = setInterval(() => { handleNext(); }, SLIDE_DURATION); return () => clearInterval(timer); }, [handleNext, isPaused, currentIndex]); // Dependency on currentIndex ensures timer resets on manual change if (!isMounted) { return (

); } const slideVariants = { enter: (dir: number) => ({ x: dir > 0 ? 50 : -50, opacity: 0, filter: "blur(4px)", }), center: { zIndex: 1, x: 0, opacity: 1, filter: "blur(0px)", }, exit: (dir: number) => ({ zIndex: 0, x: dir < 0 ? 50 : -50, opacity: 0, filter: "blur(4px)", }), }; const activeTestimonial = TESTIMONIALS[currentIndex]; return (

{/* Injecting CSS for the progress bar to easily handle pausing via state */}

{/* Main Card */}

setIsPaused(true)} onMouseLeave={() => setIsPaused(false)} > {/* Top Progress Bar */}

{/* Header / Quote Icon */}

{/* Status Indicator */}

{isPaused ? ( ) : ( )} {isPaused ? 'Paused' : 'Playing'}

{/* Testimonial Content (Animated) */}

"{activeTestimonial.content}"

{activeTestimonial.author} {activeTestimonial.role} • {activeTestimonial.company}

{/* Elegant Floating Controls */}

); }