import { useEffect, useRef } from 'react';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { Quote } from 'lucide-react';

gsap.registerPlugin(ScrollTrigger);

const Testimonials = () => {
  const sectionRef = useRef<HTMLElement>(null);
  const titleRef = useRef<HTMLDivElement>(null);
  const cardsRef = useRef<HTMLDivElement>(null);

  const testimonials = [
    {
      name: 'Rahul Sharma',
      role: 'CEO, TechStart India',
      image: '/images/avatar-rahul.jpg',
      quote: 'Patil Web Solutions transformed our online presence. Our new website loads in under 2 seconds and we\'ve seen a 40% increase in leads.',
    },
    {
      name: 'Priya Patel',
      role: 'Founder, StyleMart',
      image: '/images/avatar-priya.jpg',
      quote: 'The team delivered our e-commerce platform on time and within budget. The attention to detail and ongoing support has been exceptional.',
    },
    {
      name: 'Amit Deshmukh',
      role: 'CTO, DataFlow Systems',
      image: '/images/avatar-amit.jpg',
      quote: 'Professional, responsive, and technically skilled. They built our SaaS dashboard exactly as envisioned. Highly recommended!',
    },
  ];

  useEffect(() => {
    const ctx = gsap.context(() => {
      // Title animation
      gsap.fromTo(
        titleRef.current,
        { scale: 0.95, opacity: 0 },
        {
          scale: 1,
          opacity: 1,
          duration: 0.6,
          ease: 'expo.out',
          scrollTrigger: {
            trigger: titleRef.current,
            start: 'top 80%',
            toggleActions: 'play none none reverse',
          },
        }
      );

      // Cards animation
      const cards = cardsRef.current?.querySelectorAll('.testimonial-card');
      if (cards) {
        cards.forEach((card, i) => {
          gsap.fromTo(
            card,
            {
              y: 50,
              rotateZ: i === 0 ? -2 : i === 2 ? 2 : 0,
              opacity: 0,
            },
            {
              y: 0,
              rotateZ: i === 0 ? -1 : i === 2 ? 1 : 0,
              opacity: 1,
              duration: 0.7,
              delay: i * 0.15,
              ease: 'expo.out',
              scrollTrigger: {
                trigger: cardsRef.current,
                start: 'top 80%',
                toggleActions: 'play none none reverse',
              },
            }
          );
        });
      }

      // Quote marks animation
      const quoteMarks = cardsRef.current?.querySelectorAll('.quote-mark');
      if (quoteMarks) {
        gsap.fromTo(
          quoteMarks,
          { scale: 0 },
          {
            scale: 1,
            duration: 0.4,
            stagger: 0.1,
            ease: 'elastic.out(1, 0.5)',
            scrollTrigger: {
              trigger: cardsRef.current,
              start: 'top 70%',
              toggleActions: 'play none none reverse',
            },
          }
        );
      }
    }, sectionRef);

    return () => ctx.revert();
  }, []);

  return (
    <section
      ref={sectionRef}
      className="relative py-20 sm:py-28 overflow-hidden"
    >
      {/* Background Orbs */}
      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] rounded-full bg-gradient-radial from-[#3b6aff]/10 to-transparent opacity-50 blur-3xl" />

      <div className="relative z-10 section-padding">
        <div className="container-max">
          {/* Section Header */}
          <div ref={titleRef} className="text-center mb-16">
            <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4 font-['Outfit']">
              <span className="text-white">What Our</span>{' '}
              <span className="gradient-text">Clients Say</span>
            </h2>
            <p className="text-[#94a3b8] text-base sm:text-lg max-w-2xl mx-auto">
              Trusted by businesses across Chhatrapati Sambhajinagar and beyond.
            </p>
          </div>

          {/* Testimonials Grid */}
          <div
            ref={cardsRef}
            className="grid md:grid-cols-2 lg:grid-cols-3 gap-6"
          >
            {testimonials.map((testimonial, i) => (
              <div
                key={i}
                className="testimonial-card glass-card p-6 sm:p-8 relative"
              >
                {/* Quote Mark */}
                <div className="quote-mark absolute -top-4 -left-2 w-10 h-10 rounded-full bg-gradient-to-r from-[#3b6aff] to-[#8b5cf6] flex items-center justify-center">
                  <Quote size={20} className="text-white" />
                </div>

                {/* Quote Text */}
                <p className="text-[#94a3b8] text-sm sm:text-base leading-relaxed mb-6 mt-4">
                  "{testimonial.quote}"
                </p>

                {/* Author */}
                <div className="flex items-center gap-4">
                  <div className="relative">
                    <img
                      src={testimonial.image}
                      alt={testimonial.name}
                      className="w-12 h-12 rounded-full object-cover"
                    />
                    <div className="absolute inset-0 rounded-full ring-2 ring-[#3b6aff]/50 ring-offset-2 ring-offset-[#0a0f1e]" />
                  </div>
                  <div>
                    <h4 className="text-white font-semibold font-['Outfit']">
                      {testimonial.name}
                    </h4>
                    <p className="text-[#94a3b8] text-sm">{testimonial.role}</p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export default Testimonials;