import { useEffect, useRef } from 'react';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { Check, MessageSquare, DollarSign, Zap, Headphones } from 'lucide-react';

gsap.registerPlugin(ScrollTrigger);

const WhyChooseUs = () => {
  const sectionRef = useRef<HTMLElement>(null);
  const contentRef = useRef<HTMLDivElement>(null);
  const codeRef = useRef<HTMLDivElement>(null);
  const titleRef = useRef<HTMLHeadingElement>(null);
  const subtitleRef = useRef<HTMLParagraphElement>(null);

  const features = [
    { icon: MessageSquare, text: 'Direct Developer Communication' },
    { icon: DollarSign, text: 'No Hidden Costs or Fees' },
    { icon: Zap, text: 'Fast Loading & SEO Friendly' },
    { icon: Headphones, text: 'Ongoing Support & Maintenance' },
  ];

  useEffect(() => {
    const ctx = gsap.context(() => {
      // Content animation
      if (titleRef.current) {
        gsap.fromTo(
          titleRef.current,
          { x: -50, opacity: 0 },
          {
            x: 0,
            opacity: 1,
            duration: 0.7,
            ease: 'expo.out',
            scrollTrigger: {
              trigger: contentRef.current,
              start: 'top 80%',
              toggleActions: 'play none none reverse',
            },
          }
        );
      }

      if (subtitleRef.current) {
        gsap.fromTo(
          subtitleRef.current,
          { y: 20, opacity: 0 },
          {
            y: 0,
            opacity: 1,
            duration: 0.5,
            delay: 0.2,
            ease: 'expo.out',
            scrollTrigger: {
              trigger: contentRef.current,
              start: 'top 80%',
              toggleActions: 'play none none reverse',
            },
          }
        );
      }

      const featureItems = contentRef.current?.querySelectorAll('.feature-item');
      if (featureItems) {
        gsap.fromTo(
          featureItems,
          { x: -30, opacity: 0 },
          {
            x: 0,
            opacity: 1,
            duration: 0.5,
            stagger: 0.1,
            ease: 'expo.out',
            scrollTrigger: {
              trigger: contentRef.current,
              start: 'top 70%',
              toggleActions: 'play none none reverse',
            },
          }
        );
      }

      // Code block animation
      if (codeRef.current) {
        gsap.fromTo(
          codeRef.current,
          {
            rotateY: 30,
            opacity: 0,
          },
          {
            rotateY: 10,
            opacity: 1,
            duration: 1,
            ease: 'expo.out',
            scrollTrigger: {
              trigger: codeRef.current,
              start: 'top 80%',
              toggleActions: 'play none none reverse',
            },
          }
        );
      }

      // Code lines typing effect
      const codeLines = codeRef.current?.querySelectorAll('.code-line');
      if (codeLines) {
        gsap.fromTo(
          codeLines,
          { opacity: 0, x: 20 },
          {
            opacity: 1,
            x: 0,
            duration: 0.3,
            stagger: 0.2,
            ease: 'none',
            scrollTrigger: {
              trigger: codeRef.current,
              start: 'top 70%',
              toggleActions: 'play none none reverse',
            },
          }
        );
      }
    }, sectionRef);

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

  return (
    <section
      id="about"
      ref={sectionRef}
      className="relative py-20 sm:py-28"
    >
      <div className="section-padding">
        <div className="container-max">
          <div className="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
            {/* Left Column - Content */}
            <div ref={contentRef}>
              <h2 
                ref={titleRef}
                className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4 font-['Outfit']"
              >
                <span className="text-white">Why Choose</span>
                <br />
                <span className="gradient-text">Patil Web Solutions?</span>
              </h2>

              <p 
                ref={subtitleRef}
                className="text-[#94a3b8] text-base sm:text-lg mb-8 leading-relaxed"
              >
                We are not just coders; we are your technical partners. We focus on 
                writing clean code that scales with your business.
              </p>

              <div className="space-y-4">
                {features.map((feature, i) => (
                  <div
                    key={i}
                    className="feature-item flex items-center gap-4 p-4 rounded-xl bg-white/[0.03] border border-white/[0.08] hover:border-[#3b6aff]/30 transition-colors duration-300"
                  >
                    <div className="w-10 h-10 rounded-lg bg-[#3b6aff]/20 flex items-center justify-center flex-shrink-0">
                      <feature.icon size={20} className="text-[#3b6aff]" />
                    </div>
                    <span className="text-white font-medium">{feature.text}</span>
                    <Check size={20} className="text-[#10b981] ml-auto flex-shrink-0" />
                  </div>
                ))}
              </div>

              <a
                href="#contact"
                className="btn-primary inline-flex items-center gap-2 mt-8"
              >
                Work With Us
              </a>
            </div>

            {/* Right Column - Code Block */}
            <div
              ref={codeRef}
              className="relative hidden lg:block"
              style={{ perspective: '1000px' }}
            >
              <div
                className="glass-card p-6 font-mono text-sm"
                style={{
                  transform: 'rotateY(10deg) rotateX(-2deg)',
                  transformStyle: 'preserve-3d',
                }}
              >
                {/* Code Header */}
                <div className="flex items-center gap-2 mb-4 pb-4 border-b border-white/10">
                  <div className="w-3 h-3 rounded-full bg-red-500" />
                  <div className="w-3 h-3 rounded-full bg-yellow-500" />
                  <div className="w-3 h-3 rounded-full bg-green-500" />
                  <span className="ml-4 text-[#94a3b8] text-xs">clean-code.js</span>
                </div>

                {/* Code Content */}
                <div className="space-y-2">
                  <div className="code-line flex">
                    <span className="text-[#94a3b8] w-8">1</span>
                    <span>
                      <span className="text-[#c678dd]">const</span>
                      <span className="text-[#e06c75]"> quality</span>
                      <span className="text-white"> = </span>
                      <span className="text-[#98c379]">"High"</span>
                      <span className="text-white">;</span>
                    </span>
                  </div>
                  <div className="code-line flex">
                    <span className="text-[#94a3b8] w-8">2</span>
                    <span>
                      <span className="text-[#c678dd]">const</span>
                      <span className="text-[#e06c75]"> delivery</span>
                      <span className="text-white"> = </span>
                      <span className="text-[#98c379]">"On-Time"</span>
                      <span className="text-white">;</span>
                    </span>
                  </div>
                  <div className="code-line flex">
                    <span className="text-[#94a3b8] w-8">3</span>
                    <span className="text-white"></span>
                  </div>
                  <div className="code-line flex">
                    <span className="text-[#94a3b8] w-8">4</span>
                    <span>
                      <span className="text-[#c678dd]">return</span>
                      <span className="text-[#61afef]"> success</span>
                      <span className="text-white">;</span>
                    </span>
                  </div>
                  <div className="code-line flex">
                    <span className="text-[#94a3b8] w-8">5</span>
                    <span className="animate-pulse text-[#3b6aff]">|</span>
                  </div>
                </div>

                {/* Glow Effect */}
                <div className="absolute -inset-4 bg-[#3b6aff]/10 rounded-3xl blur-2xl -z-10" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default WhyChooseUs;