'use client';

import { motion, AnimatePresence } from 'framer-motion';
import { useInView } from 'react-intersection-observer';
import { useState, useEffect } from 'react';
import { Star, Quote, ArrowLeft, ArrowRight, TrendingUp, Search, Target } from 'lucide-react';

const TestimonialsSection = () => {
  const [ref, inView] = useInView({
    triggerOnce: true,
    threshold: 0.1,
  });

  const [currentTestimonial, setCurrentTestimonial] = useState(0);
  const [direction, setDirection] = useState(0);

  // Pre-defined particle positions (no Math.random in render)
  const particlePositions = [
    { id: 1, left: 10, top: 20, duration: 3.5, delay: 0.2 },
    { id: 2, left: 25, top: 60, duration: 4.2, delay: 0.8 },
    { id: 3, left: 40, top: 30, duration: 3.8, delay: 1.5 },
    { id: 4, left: 60, top: 70, duration: 4.5, delay: 0.5 },
    { id: 5, left: 75, top: 40, duration: 3.2, delay: 1.2 },
    { id: 6, left: 90, top: 80, duration: 4.8, delay: 0.9 },
    { id: 7, left: 15, top: 85, duration: 3.9, delay: 1.8 },
    { id: 8, left: 35, top: 15, duration: 4.1, delay: 0.3 },
    { id: 9, left: 55, top: 55, duration: 3.6, delay: 1.1 },
    { id: 10, left: 80, top: 25, duration: 4.3, delay: 0.7 },
    { id: 11, left: 20, top: 45, duration: 3.4, delay: 1.6 },
    { id: 12, left: 45, top: 75, duration: 4.6, delay: 0.4 },
    { id: 13, left: 65, top: 35, duration: 3.7, delay: 1.3 },
    { id: 14, left: 85, top: 65, duration: 4.4, delay: 0.6 },
    { id: 15, left: 30, top: 50, duration: 3.3, delay: 1.7 },
    { id: 16, left: 50, top: 20, duration: 4.7, delay: 0.8 },
    { id: 17, left: 70, top: 60, duration: 3.5, delay: 1.4 },
    { id: 18, left: 95, top: 30, duration: 4.0, delay: 0.9 },
    { id: 19, left: 25, top: 75, duration: 3.8, delay: 1.0 },
    { id: 20, left: 40, top: 40, duration: 4.2, delay: 0.5 }
  ];

  const testimonials = [
    {
      id: 1,
      name: "Sarah Chen",
      company: "TechGrowth Inc.",
      role: "Marketing Director",
      image: "/api/placeholder/80/80",
      content: "Working with this platform transformed our SEO strategy. We saw a 240% increase in organic traffic within 3 months. The quality of publications exceeded our expectations.",
      rating: 5,
      before: {
        traffic: "5.2K",
        keywords: "120",
        authority: "28"
      },
      after: {
        traffic: "17.8K",
        keywords: "450",
        authority: "62"
      }
    },
    {
      id: 2,
      name: "Marcus Rodriguez",
      company: "StartupScale",
      role: "Founder & CEO",
      image: "/api/placeholder/80/80",
      content: "The ROI from our guest posting campaign was incredible. We acquired high-quality backlinks that boosted our domain authority and drove qualified leads to our business.",
      rating: 5,
      before: {
        traffic: "2.1K",
        keywords: "85",
        authority: "22"
      },
      after: {
        traffic: "8.9K",
        keywords: "320",
        authority: "48"
      }
    },
    {
      id: 3,
      name: "Emily Watson",
      company: "DigitalFirst Agency",
      role: "SEO Manager",
      image: "/api/placeholder/80/80",
      content: "Outstanding service from start to finish. The editorial team ensured our content was perfectly optimized, and the publication process was seamless. Highly recommended!",
      rating: 5,
      before: {
        traffic: "8.7K",
        keywords: "210",
        authority: "35"
      },
      after: {
        traffic: "24.3K",
        keywords: "680",
        authority: "71"
      }
    },
    {
      id: 4,
      name: "James Kim",
      company: "SaaSPro Solutions",
      role: "Growth Manager",
      image: "/api/placeholder/80/80",
      content: "The before-and-after results speak for themselves. Our organic visibility skyrocketed, and we're now ranking for competitive keywords we never thought possible.",
      rating: 5,
      before: {
        traffic: "3.5K",
        keywords: "95",
        authority: "26"
      },
      after: {
        traffic: "14.2K",
        keywords: "380",
        authority: "58"
      }
    }
  ];

  const nextTestimonial = () => {
    setDirection(1);
    setCurrentTestimonial((prev) => (prev + 1) % testimonials.length);
  };

  const prevTestimonial = () => {
    setDirection(-1);
    setCurrentTestimonial((prev) => (prev - 1 + testimonials.length) % testimonials.length);
  };

  // Auto-rotate testimonials
  useEffect(() => {
    const interval = setInterval(nextTestimonial, 5000);
    return () => clearInterval(interval);
  }, []);

  const slideVariants = {
    enter: (direction: number) => ({
      x: direction > 0 ? 300 : -300,
      opacity: 0,
      scale: 0.9
    }),
    center: {
      x: 0,
      opacity: 1,
      scale: 1,
      transition: {
        type: "spring" as const,
        stiffness: 300,
        damping: 30
      }
    },
    exit: (direction: number) => ({
      x: direction < 0 ? 300 : -300,
      opacity: 0,
      scale: 0.9,
      transition: {
        type: "spring" as const,
        stiffness: 300,
        damping: 30
      }
    })
  };

  const statsVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: {
      opacity: 1,
      y: 0,
      transition: {
        duration: 0.6,
        staggerChildren: 0.2
      }
    }
  };

  const statItemVariants = {
    hidden: { opacity: 0, scale: 0.8 },
    visible: {
      opacity: 1,
      scale: 1,
      transition: {
        type: "spring" as const,
        stiffness: 100
      }
    }
  };

  const currentTestimonialData = testimonials[currentTestimonial];

  return (
    <section id="testimonials" className="py-24 bg-gradient-to-br from-slate-900 via-purple-900 to-blue-900 relative overflow-hidden">
      {/* Animated Background Elements */}
      <div className="absolute top-10 left-10 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl animate-pulse"></div>
      <div className="absolute bottom-10 right-10 w-80 h-80 bg-blue-500/10 rounded-full blur-3xl animate-pulse"></div>
      <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-64 h-64 bg-cyan-500/5 rounded-full blur-3xl"></div>

      {/* Floating Particles */}
      <div className="absolute inset-0 overflow-hidden">
        {particlePositions.map((particle) => (
          <motion.div
            key={particle.id}
            className="absolute w-2 h-2 bg-white/10 rounded-full"
            style={{
              left: `${particle.left}%`,
              top: `${particle.top}%`,
            }}
            animate={{
              y: [0, -30, 0],
              opacity: [0.3, 1, 0.3],
            }}
            transition={{
              duration: particle.duration,
              repeat: Infinity,
              delay: particle.delay,
            }}
          />
        ))}
      </div>

      <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Section Header */}
        <motion.div
          ref={ref}
          initial={{ opacity: 0, y: 40 }}
          animate={inView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.8 }}
          className="text-center mb-20"
        >
          <motion.div
            initial={{ opacity: 0, scale: 0.8 }}
            animate={inView ? { opacity: 1, scale: 1 } : {}}
            transition={{ duration: 0.6, delay: 0.2 }}
            className="inline-flex items-center gap-3 bg-white/10 text-white/90 px-6 py-3 rounded-2xl text-sm font-semibold mb-8 backdrop-blur-sm border border-white/20"
          >
            <Quote className="h-5 w-5" />
            Client Success Stories
          </motion.div>
          
          <motion.h2
            initial={{ opacity: 0, y: 30 }}
            animate={inView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.8, delay: 0.3 }}
            className="text-5xl md:text-6xl font-bold text-white mb-6"
          >
            Real
            <span className="bg-gradient-to-r from-cyan-400 to-purple-400 bg-clip-text text-transparent ml-4">
              Results
            </span>
          </motion.h2>
          
          <motion.p
            initial={{ opacity: 0, y: 20 }}
            animate={inView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.8, delay: 0.4 }}
            className="text-xl text-white/80 max-w-3xl mx-auto leading-relaxed font-light"
          >
            Don`t just take our word for it. See what our clients have to say about their 
            <span className="font-semibold text-cyan-300"> remarkable SEO transformations.</span>
          </motion.p>
        </motion.div>

        {/* Main Content */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          {/* Testimonial Carousel */}
          <motion.div
            initial={{ opacity: 0, x: -50 }}
            animate={inView ? { opacity: 1, x: 0 } : {}}
            transition={{ duration: 0.8, delay: 0.5 }}
            className="relative"
          >
            <div className="relative bg-white/5 backdrop-blur-lg rounded-3xl p-8 border border-white/10 shadow-2xl">
              <Quote className="absolute top-6 left-6 h-8 w-8 text-cyan-400/30" />
              
              <AnimatePresence mode="wait" custom={direction}>
                <motion.div
                  key={currentTestimonial}
                  custom={direction}
                  variants={slideVariants}
                  initial="enter"
                  animate="center"
                  exit="exit"
                  className="space-y-6"
                >
                  {/* Rating */}
                  <div className="flex items-center gap-1">
                    {[...Array(currentTestimonialData.rating)].map((_, i) => (
                      <Star key={i} className="h-5 w-5 fill-yellow-400 text-yellow-400" />
                    ))}
                  </div>

                  {/* Content */}
                  <blockquote className="text-lg text-white/90 leading-relaxed italic">
                    {currentTestimonialData.content}
                  </blockquote>

                  {/* Author */}
                  <div className="flex items-center gap-4 pt-6 border-t border-white/10">
                    <div className="w-12 h-12 bg-gradient-to-r from-cyan-500 to-purple-500 rounded-full flex items-center justify-center text-white font-semibold">
                      {currentTestimonialData.name.split(' ').map(n => n[0]).join('')}
                    </div>
                    <div>
                      <div className="font-semibold text-white">{currentTestimonialData.name}</div>
                      <div className="text-white/70 text-sm">{currentTestimonialData.role}</div>
                      <div className="text-cyan-300 text-sm">{currentTestimonialData.company}</div>
                    </div>
                  </div>
                </motion.div>
              </AnimatePresence>

              {/* Navigation */}
              <div className="flex items-center justify-between mt-8">
                <div className="flex items-center gap-2">
                  {testimonials.map((_, index) => (
                    <button
                      key={index}
                      onClick={() => {
                        setDirection(index > currentTestimonial ? 1 : -1);
                        setCurrentTestimonial(index);
                      }}
                      className={`w-3 h-3 rounded-full transition-all duration-300 ${
                        index === currentTestimonial 
                          ? 'bg-cyan-400 w-8' 
                          : 'bg-white/30 hover:bg-white/50'
                      }`}
                    />
                  ))}
                </div>
                
                <div className="flex items-center gap-3">
                  <button
                    onClick={prevTestimonial}
                    className="p-3 bg-white/10 hover:bg-white/20 rounded-2xl transition-all duration-300 border border-white/20 backdrop-blur-sm"
                  >
                    <ArrowLeft className="h-5 w-5 text-white" />
                  </button>
                  <button
                    onClick={nextTestimonial}
                    className="p-3 bg-white/10 hover:bg-white/20 rounded-2xl transition-all duration-300 border border-white/20 backdrop-blur-sm"
                  >
                    <ArrowRight className="h-5 w-5 text-white" />
                  </button>
                </div>
              </div>
            </div>
          </motion.div>

          {/* SEO Results */}
          <motion.div
            initial={{ opacity: 0, x: 50 }}
            animate={inView ? { opacity: 1, x: 0 } : {}}
            transition={{ duration: 0.8, delay: 0.7 }}
            className="space-y-6"
          >
            <motion.h3
              initial={{ opacity: 0 }}
              animate={inView ? { opacity: 1 } : {}}
              transition={{ duration: 0.6, delay: 0.9 }}
              className="text-3xl font-bold text-white mb-8 text-center lg:text-left"
            >
              SEO Transformation
            </motion.h3>

            <motion.div
              variants={statsVariants}
              initial="hidden"
              animate={inView ? "visible" : "hidden"}
              className="grid grid-cols-1 gap-6"
            >
              {/* Organic Traffic */}
              <motion.div
                variants={statItemVariants}
                className="bg-gradient-to-r from-green-500/10 to-emerald-500/10 rounded-2xl p-6 border border-green-500/20 backdrop-blur-sm"
              >
                <div className="flex items-center justify-between mb-4">
                  <div className="flex items-center gap-3">
                    <div className="p-2 bg-green-500/20 rounded-xl">
                      <TrendingUp className="h-6 w-6 text-green-400" />
                    </div>
                    <span className="text-white font-semibold">Organic Traffic</span>
                  </div>
                  <div className="text-green-400 font-bold text-lg">+240%</div>
                </div>
                <div className="flex items-center justify-between text-white/80">
                  <span>Before: {currentTestimonialData.before.traffic}</span>
                  <span>After: {currentTestimonialData.after.traffic}</span>
                </div>
              </motion.div>

              {/* Ranking Keywords */}
              <motion.div
                variants={statItemVariants}
                className="bg-gradient-to-r from-blue-500/10 to-cyan-500/10 rounded-2xl p-6 border border-blue-500/20 backdrop-blur-sm"
              >
                <div className="flex items-center justify-between mb-4">
                  <div className="flex items-center gap-3">
                    <div className="p-2 bg-blue-500/20 rounded-xl">
                      <Search className="h-6 w-6 text-blue-400" />
                    </div>
                    <span className="text-white font-semibold">Ranking Keywords</span>
                  </div>
                  <div className="text-blue-400 font-bold text-lg">+275%</div>
                </div>
                <div className="flex items-center justify-between text-white/80">
                  <span>Before: {currentTestimonialData.before.keywords}</span>
                  <span>After: {currentTestimonialData.after.keywords}</span>
                </div>
              </motion.div>

              {/* Domain Authority */}
              <motion.div
                variants={statItemVariants}
                className="bg-gradient-to-r from-purple-500/10 to-pink-500/10 rounded-2xl p-6 border border-purple-500/20 backdrop-blur-sm"
              >
                <div className="flex items-center justify-between mb-4">
                  <div className="flex items-center gap-3">
                    <div className="p-2 bg-purple-500/20 rounded-xl">
                      <Target className="h-6 w-6 text-purple-400" />
                    </div>
                    <span className="text-white font-semibold">Domain Authority</span>
                  </div>
                  <div className="text-purple-400 font-bold text-lg">+122%</div>
                </div>
                <div className="flex items-center justify-between text-white/80">
                  <span>Before: {currentTestimonialData.before.authority}</span>
                  <span>After: {currentTestimonialData.after.authority}</span>
                </div>
              </motion.div>
            </motion.div>

            {/* Progress Bar */}
            <motion.div
              initial={{ opacity: 0 }}
              animate={inView ? { opacity: 1 } : {}}
              transition={{ duration: 0.6, delay: 1.1 }}
              className="bg-white/5 rounded-2xl p-6 border border-white/10 backdrop-blur-sm"
            >
              <div className="flex items-center justify-between text-white mb-3">
                <span className="font-semibold">Overall SEO Improvement</span>
                <span className="text-cyan-400 font-bold">+212%</span>
              </div>
              <div className="w-full bg-white/10 rounded-full h-3">
                <motion.div
                  initial={{ width: 0 }}
                  animate={inView ? { width: '85%' } : {}}
                  transition={{ duration: 1.5, delay: 1.3 }}
                  className="h-3 rounded-full bg-gradient-to-r from-cyan-400 to-purple-400"
                />
              </div>
            </motion.div>
          </motion.div>
        </div>
      </div>
    </section>
  );
};

export default TestimonialsSection;