onPlayVideo(videoUrl)} > {/* Video Overlay with Gradient */}

{/* Play Button - Compact Design */}

{/* Video Label - Compact Style */}

🎥 Video

{/* Profile Info - Bottom Section */}

{name}

{role} {testimonial.company && ` • ${testimonial.company}`}

{/* Star Rating */}

{[1, 2, 3, 4, 5].map((star) => ( ))}

) : ( /* Text Testimonials - Compact Design */

{/* Header Section */}

{name}

{role}

{testimonial.company && (

{testimonial.company}

)}

{/* Star Rating - Top Right */}

{[1, 2, 3, 4, 5].map((star) => ( ))}

{/* Quote Section - Compact Typography */}

" {quote}

{/* Bottom Accent Line */}

)} ); } export function TestimonialsSection({ customTestimonials, title = "What Our Leaders Say", subtitle = "Hear from executives and managers who have transformed their leadership approach through our comprehensive development programs.", tagText = "Success Stories" }: { customTestimonials?: Testimonial[]; title?: string; subtitle?: string; tagText?: string; }) { const [isVideoModalOpen, setIsVideoModalOpen] = useState(false); const [currentVideoUrl, setCurrentVideoUrl] = useState(""); const [canScrollLeft, setCanScrollLeft] = useState(false); const [canScrollRight, setCanScrollRight] = useState(true); const [isDragging, setIsDragging] = useState(false); const scrollContainerRef = useRef(null); // Use custom testimonials if provided, otherwise use default const testimonialsData = customTestimonials || defaultTestimonialsData; // Handle scroll state const handleScroll = () => { if (scrollContainerRef.current) { const { scrollLeft, scrollWidth, clientWidth } = scrollContainerRef.current; setCanScrollLeft(scrollLeft > 0); setCanScrollRight(scrollLeft < scrollWidth - clientWidth - 10); } }; // Scroll to direction - Updated for compact card width const scrollToDirection = (direction: 'left' | 'right') => { if (scrollContainerRef.current) { const scrollAmount = 390; // Adjusted for compact card width (350px + 32px gap) const currentScroll = scrollContainerRef.current.scrollLeft; const targetScroll = direction === 'left' ? Math.max(0, currentScroll - scrollAmount) : currentScroll + scrollAmount; scrollContainerRef.current.scrollTo({ left: targetScroll, behavior: 'smooth' }); } }; // Mouse drag functionality const [dragStart, setDragStart] = useState({ x: 0, scrollLeft: 0 }); const handleMouseDown = (e: React.MouseEvent) => { setIsDragging(true); if (scrollContainerRef.current) { setDragStart({ x: e.pageX, scrollLeft: scrollContainerRef.current.scrollLeft }); } }; const handleMouseMove = (e: React.MouseEvent) => { if (!isDragging || !scrollContainerRef.current) return; e.preventDefault(); const x = e.pageX; const walk = (x - dragStart.x) * 2; scrollContainerRef.current.scrollLeft = dragStart.scrollLeft - walk; }; const handleMouseUp = () => { setIsDragging(false); }; // Touch functionality const [touchStart, setTouchStart] = useState({ x: 0, scrollLeft: 0 }); const handleTouchStart = (e: React.TouchEvent) => { if (scrollContainerRef.current) { setTouchStart({ x: e.touches[0].clientX, scrollLeft: scrollContainerRef.current.scrollLeft }); } }; const handleTouchMove = (e: React.TouchEvent) => { if (!scrollContainerRef.current) return; const x = e.touches[0].clientX; const walk = (x - touchStart.x) * 2; scrollContainerRef.current.scrollLeft = touchStart.scrollLeft - walk; }; const handleTouchEnd = () => { // Touch ended }; const handlePlayVideo = (videoUrl: string) => { setCurrentVideoUrl(videoUrl); setIsVideoModalOpen(true); }; const handleCloseModal = () => { setIsVideoModalOpen(false); setCurrentVideoUrl(""); }; // Initialize scroll state and keyboard navigation useEffect(() => { const timer = setTimeout(() => { handleScroll(); }, 100); // Keyboard navigation support const handleKeyDown = (e: KeyboardEvent) => { if (e.key === 'ArrowLeft' && canScrollLeft) { e.preventDefault(); scrollToDirection('left'); } else if (e.key === 'ArrowRight' && canScrollRight) { e.preventDefault(); scrollToDirection('right'); } }; document.addEventListener('keydown', handleKeyDown); return () => { clearTimeout(timer); document.removeEventListener('keydown', handleKeyDown); }; }, [canScrollLeft, canScrollRight]); return (

{/* Section Header */}

{/* Branded Tag */}

{title}

{subtitle}

{/* Testimonials Cards Area */}

{/* Compact Navigation Controls */}

{/* Cards Container with Enhanced Design */}

{/* Scrollable Cards Container */}

{testimonialsData.map((testimonial, index) => ( ))}

{/* Left Side White Fade Overlay */}

{/* Right Side Fade Gradient Overlay - Now properly positioned */}

{/* Video Modal */}

); }