{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "testimonials-7",
  "type": "registry:block",
  "title": "Testimonials 7",
  "description": "Animated testimonial carousel with photos and navigation controls.",
  "registryDependencies": [
    "avatar",
    "card"
  ],
  "files": [
    {
      "path": "app/preview/testimonials/seven/page.tsx",
      "content": "'use client'\n\nimport { useState, useEffect } from 'react'\nimport Image from 'next/image'\nimport * as motion from 'motion/react-client'\nimport { Star, ChevronLeft, ChevronRight, Quote } from 'lucide-react'\nimport { AnimatePresence } from 'motion/react'\n\nconst testimonials = [\n    {\n        quote: 'Staying with a local family in Pokhara through PahunaHomes was the highlight of my Nepal trip. The warmth and hospitality were truly special. I felt like I was part of the family within hours of arriving.',\n        author: 'Emma Thompson',\n        location: 'Australia',\n        image: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8YXZhdGFyfGVufDB8fDB8fHww',\n        rating: 5,\n    },\n    {\n        quote: 'PahunaHomes found us the perfect mountain retreat near Everest. The views were breathtaking, and our host made us feel like family. They shared local stories and traditions that made our experience truly authentic.',\n        author: 'Michael Chen',\n        location: 'United States',\n        image: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8YXZhdGFyfGVufDB8fDB8fHww',\n        rating: 5,\n    },\n    {\n        quote: 'As a solo female traveler, safety was my priority. PahunaHomes connected me with a wonderful family in Kathmandu who looked after me like their daughter. They even taught me how to cook traditional Nepali dishes!',\n        author: 'Sophie Dubois',\n        location: 'France',\n        image: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fGF2YXRhcnxlbnwwfHwwfHx8MA%3D%3D',\n        rating: 5,\n    },\n    {\n        quote: 'The cultural immersion we experienced through our PahunaHomes stay was incredible. Our host family invited us to participate in a local festival, which became the most memorable part of our journey through Nepal.',\n        author: 'James Wilson',\n        location: 'United Kingdom',\n        image: 'https://plus.unsplash.com/premium_photo-1670884442192-7b58d513cd55?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTN8fGF2YXRhcnxlbnwwfHwwfHx8MA%3D%3D',\n        rating: 5,\n    },\n]\n\nexport default function TestimonialsSection() {\n    const [currentIndex, setCurrentIndex] = useState(0)\n    const [isAutoPlaying, setIsAutoPlaying] = useState(true)\n    const [direction, setDirection] = useState(0)\n\n    const nextTestimonial = () => {\n        setDirection(1)\n        setCurrentIndex((prev) => (prev === testimonials.length - 1 ? 0 : prev + 1))\n    }\n\n    const prevTestimonial = () => {\n        setDirection(-1)\n        setCurrentIndex((prev) => (prev === 0 ? testimonials.length - 1 : prev - 1))\n    }\n\n    useEffect(() => {\n        if (!isAutoPlaying) return\n\n        const interval = setInterval(() => {\n            nextTestimonial()\n        }, 8000)\n\n        return () => clearInterval(interval)\n    }, [isAutoPlaying])\n\n    const handleMouseEnter = () => setIsAutoPlaying(false)\n    const handleMouseLeave = () => setIsAutoPlaying(true)\n\n    const variants = {\n        enter: (direction: number) => ({\n            x: direction > 0 ? 200 : -200,\n            opacity: 0,\n        }),\n        center: {\n            x: 0,\n            opacity: 1,\n        },\n        exit: (direction: number) => ({\n            x: direction > 0 ? -200 : 200,\n            opacity: 0,\n        }),\n    }\n\n    return (\n        <section\n            className=\"bg-white py-24 dark:bg-gray-900\"\n            onMouseEnter={handleMouseEnter}\n            onMouseLeave={handleMouseLeave}>\n            <div className=\"container mx-auto px-4\">\n                <motion.div\n                    initial={{ opacity: 0, y: 20 }}\n                    whileInView={{ opacity: 1, y: 0 }}\n                    transition={{ duration: 0.5 }}\n                    viewport={{ once: true }}\n                    className=\"mb-16 text-center\">\n                    <span className=\"mb-2 inline-block font-medium text-teal-600 dark:text-teal-400\">Guest Experiences</span>\n                    <h2 className=\"mb-4 text-4xl font-bold text-teal-800 md:text-5xl dark:text-teal-200\">What Our Guests Say</h2>\n                    <p className=\"mx-auto max-w-3xl text-lg text-gray-700 dark:text-gray-300\">Real stories from travelers who experienced the magic of Nepali hospitality through PahunaHomes.</p>\n                </motion.div>\n\n                <div className=\"relative mx-auto max-w-4xl\">\n                    <div className=\"absolute -left-12 -top-12 text-teal-200 opacity-50 dark:text-teal-700\">\n                        <Quote size={80} />\n                    </div>\n\n                    <div className=\"relative overflow-hidden rounded-xl bg-teal-50 p-8 md:p-12 dark:bg-teal-800\">\n                        <AnimatePresence\n                            initial={false}\n                            custom={direction}\n                            mode=\"wait\">\n                            <motion.div\n                                key={currentIndex}\n                                custom={direction}\n                                variants={variants}\n                                initial=\"enter\"\n                                animate=\"center\"\n                                exit=\"exit\"\n                                transition={{ duration: 0.5, ease: 'easeInOut' }}\n                                className=\"flex flex-col items-center gap-8 md:flex-row\">\n                                <div className=\"relative h-24 w-24 flex-shrink-0 overflow-hidden rounded-full border-4 border-white shadow-lg md:h-32 md:w-32 dark:border-gray-700\">\n                                    <Image\n                                        src={testimonials[currentIndex].image || '/placeholder.svg'}\n                                        alt={testimonials[currentIndex].author}\n                                        fill\n                                        className=\"object-cover\"\n                                    />\n                                </div>\n                                <div className=\"text-center md:text-left\">\n                                    <div className=\"mb-4 flex justify-center md:justify-start\">\n                                        {[...Array(testimonials[currentIndex].rating)].map((_, i) => (\n                                            <Star\n                                                key={i}\n                                                className=\"h-5 w-5 fill-current text-yellow-400\"\n                                            />\n                                        ))}\n                                    </div>\n                                    <blockquote className=\"mb-6 text-lg italic text-gray-700 md:text-xl dark:text-gray-300\">{testimonials[currentIndex].quote}</blockquote>\n                                    <div>\n                                        <p className=\"font-bold text-teal-800 dark:text-teal-200\">{testimonials[currentIndex].author}</p>\n                                        <p className=\"text-teal-600 dark:text-teal-400\">{testimonials[currentIndex].location}</p>\n                                    </div>\n                                </div>\n                            </motion.div>\n                        </AnimatePresence>\n                    </div>\n\n                    {/* Navigation */}\n                    <div className=\"mt-8 flex justify-center gap-2\">\n                        {testimonials.map((_, index) => (\n                            <button\n                                key={index}\n                                onClick={() => {\n                                    setDirection(index > currentIndex ? 1 : -1)\n                                    setCurrentIndex(index)\n                                }}\n                                className={`h-3 w-3 rounded-full transition-all duration-300 ${currentIndex === index ? 'w-8 bg-teal-600 dark:bg-teal-400' : 'bg-teal-200 dark:bg-teal-700'}`}\n                                aria-label={`Go to testimonial ${index + 1}`}\n                            />\n                        ))}\n                    </div>\n\n                    {/* Arrow navigation */}\n                    <button\n                        onClick={prevTestimonial}\n                        className=\"absolute -left-4 top-1/2 -translate-y-1/2 rounded-full bg-white p-3 text-teal-600 shadow-lg transition-colors hover:text-teal-800 md:-left-8 dark:bg-gray-800 dark:text-teal-400 dark:hover:text-teal-200\"\n                        aria-label=\"Previous testimonial\">\n                        <ChevronLeft className=\"h-6 w-6\" />\n                    </button>\n                    <button\n                        onClick={nextTestimonial}\n                        className=\"absolute -right-4 top-1/2 -translate-y-1/2 rounded-full bg-white p-3 text-teal-600 shadow-lg transition-colors hover:text-teal-800 md:-right-8 dark:bg-gray-800 dark:text-teal-400 dark:hover:text-teal-200\"\n                        aria-label=\"Next testimonial\">\n                        <ChevronRight className=\"h-6 w-6\" />\n                    </button>\n                </div>\n            </div>\n        </section>\n    )\n}\n",
      "type": "registry:component",
      "target": "components/testimonials.tsx"
    }
  ]
}