{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "testimonials-01",
  "title": "Testimonials · 01",
  "description": "Testimonials · 01 section.",
  "dependencies": [
    "clsx",
    "framer-motion",
    "lucide-react",
    "tailwind-merge"
  ],
  "files": [
    {
      "path": "registry/talizen/testimonials/testimonials-01/Testimonials-01.tsx",
      "content": "\"use client\";\n\nimport React, { useState, useRef, useEffect } from 'react';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport { ChevronLeft, ChevronRight, X } from 'lucide-react';\nimport { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge'\nfunction cn(...inputs: ClassValue[]) {\n    return twMerge(clsx(inputs));\n}\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface TestimonialVideoItem {\n    id: string;\n    name: string;\n    role: string;\n    thumbnail: string;\n    videoUrl: string;\n    badge: string;\n}\n\ninterface TestimonialVideoProps {\n    className?: string;\n}\n\n// ============================================================================\n// DATA\n// ============================================================================\n\nconst TESTIMONIALS: TestimonialVideoItem[] = [\n    {\n        id: '1',\n        name: \"David Chen\",\n        role: \"Product Lead at TechFlow\",\n        thumbnail: \"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=800&h=1100&fit=crop&q=80\",\n        videoUrl: \"https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4\",\n        badge: \"CUSTOMER STORY\"\n    },\n    {\n        id: '2',\n        name: \"Maria Rodriguez\",\n        role: \"VP of Design at CreativeLab\",\n        thumbnail: \"https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=800&h=1100&fit=crop&q=80\",\n        videoUrl: \"https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4\",\n        badge: \"CUSTOMER STORY\"\n    },\n    {\n        id: '3',\n        name: \"Amelia Brynn\",\n        role: \"Strategy Lead at Forerunner™\",\n        thumbnail: \"https://images.unsplash.com/photo-1580489944761-15a19d654956?w=800&h=1100&fit=crop&q=80\",\n        videoUrl: \"https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4\",\n        badge: \"CUSTOMER STORY\"\n    },\n    {\n        id: '4',\n        name: \"Sarah Mitchell\",\n        role: \"CMO at BrandWorks\",\n        thumbnail: \"https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?w=800&h=1100&fit=crop&q=80\",\n        videoUrl: \"https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4\",\n        badge: \"CUSTOMER STORY\"\n    }\n];\n\n// ============================================================================\n// ANIMATION VARIANTS\n// ============================================================================\n\nconst animatedContentVariants = {\n    hidden: {\n        opacity: 0,\n        y: 40,\n        filter: 'blur(10px)'\n    },\n    visible: (customDelay: number = 0) => ({\n        opacity: 1,\n        y: 0,\n        filter: 'blur(0px)',\n        transition: {\n            duration: 0.8,\n            delay: customDelay,\n            ease: [0.4, 0, 0.2, 1] as const,\n        }\n    })\n};\n\n// ============================================================================\n// MAIN COMPONENT\n// ============================================================================\n\nexport function TestimonialVideo({ className }: TestimonialVideoProps) {\n    const [activeVideo, setActiveVideo] = useState<string | null>(null);\n    const carouselRef = useRef<HTMLDivElement>(null);\n\n    const scroll = (direction: 'left' | 'right') => {\n        if (carouselRef.current) {\n            const { current } = carouselRef;\n            const scrollAmount = 420;\n            current.scrollBy({\n                left: direction === 'left' ? -scrollAmount : scrollAmount,\n                behavior: 'smooth'\n            });\n        }\n    };\n\n    // Lock scroll when modal is open\n    useEffect(() => {\n        if (activeVideo) {\n            document.body.style.overflow = 'hidden';\n        } else {\n            document.body.style.overflow = 'auto';\n        }\n        return () => { document.body.style.overflow = 'auto'; };\n    }, [activeVideo]);\n\n    return (\n        <>\n            {/* Google Fonts */}\n            <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n            <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossOrigin=\"anonymous\" />\n            <link href=\"https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&display=swap\" rel=\"stylesheet\" />\n\n            <section className={cn(\"w-full bg-[#1a1a1a] py-[120px] px-6 md:px-10 min-h-screen selection:bg-white selection:text-black overflow-hidden\", className)} style={{ fontFamily: \"'Geist', sans-serif\" }}>\n                <div className=\"max-w-[1600px] mx-auto\">\n                    {/* Header */}\n                    <div className=\"flex flex-col md:flex-row justify-between items-start mb-16 gap-8\">\n                        <div className=\"max-w-[800px]\">\n                            <motion.span\n                                variants={animatedContentVariants}\n                                initial=\"hidden\"\n                                whileInView=\"visible\"\n                                viewport={{ once: true }}\n                                className=\"inline-block text-[11px] font-bold uppercase tracking-[2px] text-[#888] mb-6\"\n                            >\n                                TESTIMONIALS\n                            </motion.span>\n                            <motion.h1\n                                variants={animatedContentVariants}\n                                initial=\"hidden\"\n                                whileInView=\"visible\"\n                                viewport={{ once: true }}\n                                custom={0.1}\n                                className=\"text-4xl md:text-[56px] font-normal leading-[1.2] md:leading-[1.3] text-white tracking-[-1.5px]\"\n                            >\n                                We've helped teams rethink their offers, their structure, and their story.\n                            </motion.h1>\n                        </div>\n\n                        <motion.div\n                            variants={animatedContentVariants}\n                            initial=\"hidden\"\n                            whileInView=\"visible\"\n                            viewport={{ once: true }}\n                            custom={0.2}\n                            className=\"flex gap-4 shrink-0\"\n                        >\n                            <button\n                                onClick={() => scroll('left')}\n                                className=\"w-12 h-12 rounded-full border border-white/20 flex items-center justify-center text-white hover:bg-white/10 hover:border-white/40 transition-all duration-300\"\n                            >\n                                <ChevronLeft className=\"w-5 h-5\" />\n                            </button>\n                            <button\n                                onClick={() => scroll('right')}\n                                className=\"w-12 h-12 rounded-full border border-white/20 flex items-center justify-center text-white hover:bg-white/10 hover:border-white/40 transition-all duration-300\"\n                            >\n                                <ChevronRight className=\"w-5 h-5\" />\n                            </button>\n                        </motion.div>\n                    </div>\n\n                    {/* Carousel Container */}\n                    <div className=\"relative\">\n                        <div\n                            ref={carouselRef}\n                            className=\"flex gap-5 overflow-x-auto scrollbar-hide pb-8\"\n                            style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}\n                        >\n                            {TESTIMONIALS.map((testimonial, idx) => (\n                                <motion.div\n                                    key={testimonial.id}\n                                    variants={animatedContentVariants}\n                                    initial=\"hidden\"\n                                    whileInView=\"visible\"\n                                    viewport={{ once: true }}\n                                    custom={0.2 + idx * 0.1}\n                                    onClick={() => setActiveVideo(testimonial.videoUrl)}\n                                    className=\"relative flex-none w-[320px] md:w-[400px] h-[450px] md:h-[550px] rounded-2xl overflow-hidden cursor-pointer group\"\n                                >\n                                    {/* Thumbnail */}\n                                    <img\n                                        src={testimonial.thumbnail}\n                                        alt={testimonial.name}\n                                        className=\"absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105\"\n                                    />\n\n                                    {/* Overlay Gradient */}\n                                    <div className=\"absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent z-[2]\" />\n\n                                    {/* Badge */}\n                                    <div className=\"absolute top-6 left-6 z-[3] px-4 py-2 rounded-full bg-white/15 backdrop-blur-xl border border-white/20 text-[11px] font-bold text-white tracking-wider\">\n                                        {testimonial.badge}\n                                    </div>\n\n                                    {/* Info */}\n                                    <div className=\"absolute bottom-0 left-0 right-0 p-8 z-[3]\">\n                                        <h3 className=\"text-xl md:text-[22px] font-semibold text-white mb-1.5\">\n                                            {testimonial.name}\n                                        </h3>\n                                        <p className=\"text-sm md:text-[15px] text-white/80\">\n                                            {testimonial.role}\n                                        </p>\n                                    </div>\n\n                                    {/* Play Icon */}\n                                    <div className=\"absolute inset-0 flex items-center justify-center z-[3]\">\n                                        <motion.div\n                                            whileHover={{ scale: 1.1 }}\n                                            className=\"w-[70px] h-[70px] bg-white/95 rounded-full flex items-center justify-center shadow-2xl transition-colors group-hover:bg-white\"\n                                        >\n                                            <div className=\"w-0 h-0 border-t-[12px] border-t-transparent border-l-[18px] border-l-[#1a1a1a] border-b-[12px] border-b-transparent ml-1\" />\n                                        </motion.div>\n                                    </div>\n                                </motion.div>\n                            ))}\n                        </div>\n                    </div>\n                </div>\n\n                {/* Video Modal */}\n                <AnimatePresence>\n                    {activeVideo && (\n                        <motion.div\n                            initial={{ opacity: 0 }}\n                            animate={{ opacity: 1 }}\n                            exit={{ opacity: 0 }}\n                            className=\"fixed inset-0 z-[100] flex items-center justify-center bg-black/95 p-6 md:p-10 backdrop-blur-sm\"\n                            onClick={() => setActiveVideo(null)}\n                        >\n                            <motion.div\n                                initial={{ scale: 0.9, opacity: 0, filter: 'blur(10px)' }}\n                                animate={{ scale: 1, opacity: 1, filter: 'blur(0px)' }}\n                                exit={{ scale: 0.9, opacity: 0, filter: 'blur(10px)' }}\n                                transition={{ duration: 0.5, ease: [0.4, 0, 0.2, 1] }}\n                                className=\"relative w-full max-w-[1100px] aspect-video bg-black rounded-3xl overflow-hidden shadow-2xl\"\n                                onClick={(e) => e.stopPropagation()}\n                            >\n                                {/* Close Button */}\n                                <button\n                                    onClick={() => setActiveVideo(null)}\n                                    className=\"absolute -top-14 right-0 w-11 h-11 bg-white/10 hover:bg-white/20 border border-white/20 rounded-full flex items-center justify-center text-white transition-all backdrop-blur-md z-[101]\"\n                                >\n                                    <X className=\"w-5 h-5\" />\n                                </button>\n\n                                <video\n                                    autoPlay\n                                    controls\n                                    className=\"w-full h-full object-cover\"\n                                    src={activeVideo}\n                                />\n                            </motion.div>\n                        </motion.div>\n                    )}\n                </AnimatePresence>\n\n                <style>{`\n          .scrollbar-hide::-webkit-scrollbar {\n            display: none;\n          }\n        `}</style>\n            </section>\n        </>\n    );\n}\n\nexport default TestimonialVideo;",
      "type": "registry:component"
    }
  ],
  "categories": [
    "testimonials"
  ],
  "type": "registry:block"
}