import { motion } from "motion/react";
import { ImageWithFallback } from "./figma/ImageWithFallback";
import { Play, X } from "lucide-react";
import { useState } from "react";

interface Testimonial {
  id: number;
  quote: string;
  name: string;
  title: string;
  company: string;
  image: string;
  hasVideo: boolean;
}

const testimonials: Testimonial[] = [
  {
    id: 1,
    quote: "KLC's leadership programs fundamentally changed how I approach team management and strategic decision-making in our organization.",
    name: "Rachel Thompson",
    title: "Senior Vice President",
    company: "Global Enterprises",
    image: "https://images.unsplash.com/photo-1580489944761-15a19d654956?w=600&h=800&fit=crop&crop=face",
    hasVideo: true
  },
  {
    id: 2,
    quote: "KLC's leadership development programs have completely changed how we approach team building and strategic planning. The results speak for themselves.",
    name: "Sarah Chen",
    title: "Chief Executive Officer",
    company: "TechForward Solutions",
    image: "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=600&h=800&fit=crop&crop=face",
    hasVideo: true
  },
  {
    id: 3,
    quote: "Working with KLC's consulting team was transformational. Their evidence-based approach helped us build stronger, more resilient leadership across all departments.",
    name: "Michael Rodriguez",
    title: "Head of Operations", 
    company: "Innovation Dynamics Inc",
    image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=600&h=800&fit=crop&crop=face",
    hasVideo: true
  }
];

export function TestimonialsHeroSection() {
  const [currentTestimonial, setCurrentTestimonial] = useState(0);
  const [isVideoPlaying, setIsVideoPlaying] = useState(false);
  const [showLightbox, setShowLightbox] = useState(false);

  const testimonial = testimonials[currentTestimonial];

  const handlePlayVideo = () => {
    setShowLightbox(true);
    setIsVideoPlaying(true);
  };

  const handleCloseLightbox = () => {
    setShowLightbox(false);
    setIsVideoPlaying(false);
  };

  return (
    <section 
      className="relative py-20 flex items-center"
      style={{ 
        backgroundColor: '#F7F7FD'
      }}
    >
      <div className="w-full section-margin-x">
        {/* Branded Tag */}
        <motion.div 
          className="flex justify-center mb-12"
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
        >
          <div className="inline-flex items-center gap-3 bg-[rgba(248,195,1,0.1)] px-4 py-2 rounded-lg">
            <div className="w-[7px] h-[7px] bg-[#f8c301] rounded-full" />
            <span className="text-[#26231a] text-lg lg:text-lg md:text-base sm:text-sm uppercase tracking-wider font-light">
              Client Success Stories
            </span>
          </div>
        </motion.div>

        {/* Main heading */}
        <motion.h2 
          className="text-h2 leading-tight mb-12 text-center"
          style={{ color: 'var(--color-brand-primary)' }}
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.7, delay: 0.2 }}
        >
          What Our Clients Say
        </motion.h2>

        {/* Split Layout Container with Max Width - Compact Version */}
        <div className="max-w-5xl mx-auto">
          <div className="flex h-[400px] rounded-2xl overflow-hidden shadow-2xl">
            {/* Left Side - Video Thumbnail */}
            <motion.div 
              className="flex-1 relative group cursor-pointer"
              initial={{ opacity: 0, x: -50 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.8, delay: 0.4 }}
              onClick={handlePlayVideo}
            >
              <div className="relative w-full h-full overflow-hidden">
                {/* Video Thumbnail */}
                <ImageWithFallback
                  src={testimonial.image}
                  alt={testimonial.name}
                  className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
                />
                
                {/* Dark overlay on hover */}
                <div className="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
                
                {/* Centered Play Button Overlay */}
                {testimonial.hasVideo && (
                  <div className="absolute inset-0 flex items-center justify-center">
                    <motion.div
                      className="flex items-center justify-center w-16 h-16 bg-white/90 backdrop-blur-sm rounded-full shadow-lg group-hover:scale-110 transition-all duration-300"
                      whileHover={{ scale: 1.15 }}
                      whileTap={{ scale: 0.95 }}
                    >
                      <Play 
                        className="w-7 h-7 ml-1 text-blue-600" 
                        fill="currentColor"
                      />
                    </motion.div>
                  </div>
                )}

                {/* Watch Video Text */}
                <div className="absolute bottom-4 left-4 text-white">
                  <div className="bg-black/30 backdrop-blur-sm rounded-lg px-3 py-1">
                    <span className="text-xs font-medium">▶ Video</span>
                  </div>
                </div>
              </div>
            </motion.div>

            {/* Right Side - Quote Content with White Background - Compact */}
            <motion.div 
              className="flex-1 flex items-center justify-center p-8 relative"
              style={{ 
                backgroundColor: 'white'
              }}
              initial={{ opacity: 0, x: 50 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.8, delay: 0.6 }}
            >
              {/* Large Opening Quotation Mark */}
              <div 
                className="absolute top-4 left-4 text-3xl opacity-30"
                style={{ color: 'var(--color-brand-primary)' }}
              >
                "
              </div>

              <div className="space-y-4 max-w-lg relative z-10">
                {/* Quote with Compact Typography */}
                <blockquote 
                  className="text-lg leading-relaxed font-medium"
                  style={{ 
                    fontFamily: 'var(--font-family-brand)',
                    color: 'var(--color-brand-black)'
                  }}
                >
                  {testimonial.quote}
                </blockquote>

                {/* Attribution */}
                <div className="space-y-1 pt-3">
                  <div 
                    className="text-base font-semibold"
                    style={{ color: 'var(--color-brand-primary)' }}
                  >
                    {testimonial.name}
                  </div>
                  {testimonial.title && (
                    <div 
                      className="text-xs"
                      style={{ color: 'var(--color-brand-gray-muted)' }}
                    >
                      {testimonial.title} {testimonial.company && `at ${testimonial.company}`}
                    </div>
                  )}
                </div>

                {/* Testimonial Navigation Dots */}
                <div className="flex items-center space-x-2 pt-4">
                  {testimonials.map((_, index) => (
                    <button
                      key={index}
                      className={`w-2 h-2 rounded-full transition-all duration-300 ${
                        index === currentTestimonial 
                          ? 'opacity-100' 
                          : 'opacity-30 hover:opacity-60'
                      }`}
                      style={{ 
                        backgroundColor: index === currentTestimonial 
                          ? 'var(--color-brand-accent)' 
                          : 'var(--color-brand-gray-muted)' 
                      }}
                      onClick={() => setCurrentTestimonial(index)}
                    />
                  ))}
                </div>
              </div>

              {/* Large Closing Quotation Mark */}
              <div 
                className="absolute bottom-4 right-4 text-3xl opacity-30"
                style={{ color: 'var(--color-brand-primary)' }}
              >
                "
              </div>
            </motion.div>
          </div>
        </div>

      </div>

      {/* Video Lightbox Modal */}
      {showLightbox && (
        <motion.div
          className="fixed inset-0 bg-black/90 flex items-center justify-center z-50"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
        >
          {/* Close Button */}
          <button
            className="absolute top-6 right-6 text-white hover:text-gray-300 transition-colors z-60"
            onClick={handleCloseLightbox}
          >
            <X className="w-8 h-8" />
          </button>

          {/* Video Container */}
          <motion.div
            className="relative w-full max-w-4xl mx-4"
            initial={{ scale: 0.8, opacity: 0 }}
            animate={{ scale: 1, opacity: 1 }}
            transition={{ duration: 0.3 }}
          >
            <div className="relative aspect-video bg-black rounded-lg overflow-hidden">
              {/* Placeholder for actual video */}
              <div className="absolute inset-0 flex items-center justify-center bg-gray-900">
                <div className="text-center text-white">
                  <Play className="w-16 h-16 mx-auto mb-4 opacity-60" fill="currentColor" />
                  <p className="text-lg">Video would play here</p>
                  <p className="text-sm opacity-70 mt-2">Replace with actual video element</p>
                </div>
              </div>

              {/* Video Controls */}
              <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent p-4">
                <div className="flex items-center space-x-3">
                  <button 
                    className="text-white hover:text-gray-300 transition-colors"
                    onClick={() => setIsVideoPlaying(!isVideoPlaying)}
                  >
                    <Play className="w-6 h-6" fill="currentColor" />
                  </button>
                  <div className="flex-1 bg-white/30 rounded-full h-1">
                    <motion.div 
                      className="h-full rounded-full"
                      style={{ backgroundColor: 'var(--color-brand-accent)' }}
                      initial={{ width: '0%' }}
                      animate={{ width: isVideoPlaying ? '100%' : '0%' }}
                      transition={{ duration: 30, ease: "linear" }}
                    />
                  </div>
                  <span className="text-white text-sm">2:34</span>
                </div>
              </div>
            </div>
          </motion.div>
        </motion.div>
      )}
    </section>
  );
}