import { useEffect, useRef } from 'react';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { 
  Globe, 
  Cloud, 
  Layout, 
  Search, 
  Bug, 
  Brain 
} from 'lucide-react';

gsap.registerPlugin(ScrollTrigger);

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

  const services = [
    {
      icon: Globe,
      title: 'Website Development',
      description: 'Custom websites designed for speed and conversions. Business sites, portfolios, and landing pages.',
      color: 'from-[#3b6aff] to-[#06b6d4]',
    },
    {
      icon: Cloud,
      title: 'SaaS & Web Apps',
      description: 'We build complex software solutions, admin panels, and SaaS products with secure login systems.',
      color: 'from-[#8b5cf6] to-[#3b6aff]',
    },
    {
      icon: Layout,
      title: 'WordPress Expert',
      description: 'Custom themes, plugin development, and speed optimization for the world\'s most popular CMS.',
      color: 'from-[#06b6d4] to-[#8b5cf6]',
    },
    {
      icon: Search,
      title: 'SEO Optimization',
      description: 'Rank higher on Google. We handle technical SEO, schema markup, and on-page optimization.',
      color: 'from-[#3b6aff] to-[#8b5cf6]',
    },
    {
      icon: Bug,
      title: 'Bug Fixing',
      description: 'Quick resolution of website issues, broken functionality, and performance problems.',
      color: 'from-[#8b5cf6] to-[#06b6d4]',
    },
    {
      icon: Brain,
      title: 'AI Services',
      description: 'Integrate AI capabilities into your applications for enhanced user experiences.',
      color: 'from-[#06b6d4] to-[#3b6aff]',
    },
  ];

  useEffect(() => {
    const ctx = gsap.context(() => {
      // Title animation
      const titleWords = titleRef.current?.querySelectorAll('.word');
      if (titleWords) {
        gsap.fromTo(
          titleWords,
          { y: 50, opacity: 0 },
          {
            y: 0,
            opacity: 1,
            duration: 0.6,
            stagger: 0.08,
            ease: 'expo.out',
            scrollTrigger: {
              trigger: titleRef.current,
              start: 'top 80%',
              toggleActions: 'play none none reverse',
            },
          }
        );
      }

      // Cards animation
      const cards = cardsRef.current?.querySelectorAll('.service-card');
      if (cards) {
        gsap.fromTo(
          cards,
          {
            rotateY: -90,
            opacity: 0,
          },
          {
            rotateY: 0,
            opacity: 1,
            duration: 0.7,
            stagger: 0.1,
            ease: 'expo.out',
            scrollTrigger: {
              trigger: cardsRef.current,
              start: 'top 80%',
              toggleActions: 'play none none reverse',
            },
          }
        );
      }
    }, sectionRef);

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

  return (
    <section
      id="services"
      ref={sectionRef}
      className="relative py-20 sm:py-28"
    >
      <div className="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="word inline-block text-white">Our</span>{' '}
              <span className="word inline-block gradient-text">Services</span>
            </h2>
            <p className="word text-[#94a3b8] text-base sm:text-lg max-w-2xl mx-auto">
              High-performance services tailored for your growth.
            </p>
          </div>

          {/* Services Grid */}
          <div
            ref={cardsRef}
            className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6"
            style={{ perspective: '1000px' }}
          >
            {services.map((service, i) => (
              <div
                key={i}
                className="service-card group relative glass-card p-6 sm:p-8 transition-all duration-500 hover:scale-[1.02]"
                style={{ transformStyle: 'preserve-3d' }}
              >
                {/* Gradient Border on Hover */}
                <div className="absolute inset-0 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500">
                  <div className={`absolute inset-0 rounded-2xl bg-gradient-to-r ${service.color} p-[1px]`}>
                    <div className="w-full h-full rounded-2xl bg-[#0a0f1e]" />
                  </div>
                </div>

                {/* Content */}
                <div className="relative z-10">
                  {/* Icon */}
                  <div className={`w-14 h-14 rounded-xl bg-gradient-to-r ${service.color} flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-500`}>
                    <service.icon size={28} className="text-white" />
                  </div>

                  {/* Title */}
                  <h3 className="text-xl font-semibold text-white mb-3 font-['Outfit']">
                    {service.title}
                  </h3>

                  {/* Description */}
                  <p className="text-[#94a3b8] text-sm leading-relaxed">
                    {service.description}
                  </p>

                  {/* Learn More Link */}
                  <a
                    href="#contact"
                    className="inline-flex items-center gap-2 mt-6 text-sm text-[#3b6aff] hover:text-white transition-colors group/link"
                  >
                    Learn More
                    <span className="group-hover/link:translate-x-1 transition-transform">→</span>
                  </a>
                </div>

                {/* Glow Effect */}
                <div className={`absolute -inset-2 bg-gradient-to-r ${service.color} rounded-3xl opacity-0 group-hover:opacity-20 blur-xl transition-opacity duration-500 -z-10`} />
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export default Services;