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

gsap.registerPlugin(ScrollTrigger);

const CTA = () => {
  const sectionRef = useRef<HTMLElement>(null);
  const contentRef = useRef<HTMLDivElement>(null);
  const shapesRef = useRef<HTMLDivElement>(null);
  const headlineRef = useRef<HTMLHeadingElement>(null);
  const subtextRef = useRef<HTMLParagraphElement>(null);
  const buttonRef = useRef<HTMLAnchorElement>(null);

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

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

      if (buttonRef.current) {
        gsap.fromTo(
          buttonRef.current,
          { scale: 0, opacity: 0 },
          {
            scale: 1,
            opacity: 1,
            duration: 0.8,
            delay: 0.5,
            ease: 'elastic.out(1, 0.5)',
            scrollTrigger: {
              trigger: contentRef.current,
              start: 'top 80%',
              toggleActions: 'play none none reverse',
            },
          }
        );
      }

      // Floating shapes
      const shapes = shapesRef.current?.querySelectorAll('.cta-shape');
      if (shapes) {
        shapes.forEach((shape, i) => {
          gsap.fromTo(
            shape,
            { scale: 0, opacity: 0 },
            {
              scale: 1,
              opacity: 1,
              duration: 0.4,
              delay: 0.6 + i * 0.1,
              ease: 'elastic.out(1, 0.5)',
              scrollTrigger: {
                trigger: sectionRef.current,
                start: 'top 80%',
                toggleActions: 'play none none reverse',
              },
            }
          );

          // Continuous floating
          gsap.to(shape, {
            y: `random(-20, 20)`,
            x: `random(-15, 15)`,
            rotation: `random(-10, 10)`,
            duration: `random(8, 15)`,
            repeat: -1,
            yoyo: true,
            ease: 'sine.inOut',
          });
        });
      }
    }, sectionRef);

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

  return (
    <section
      ref={sectionRef}
      className="relative py-20 sm:py-28 overflow-hidden"
    >
      {/* Animated Gradient Background */}
      <div 
        className="absolute inset-0"
        style={{
          background: 'linear-gradient(135deg, #3b6aff, #8b5cf6, #06b6d4, #3b6aff)',
          backgroundSize: '400% 400%',
          animation: 'gradientShift 15s ease infinite',
        }}
      />
      
      {/* Overlay */}
      <div className="absolute inset-0 bg-[#050714]/30" />

      {/* Floating Shapes */}
      <div ref={shapesRef} className="absolute inset-0 pointer-events-none">
        <div className="cta-shape absolute top-[20%] left-[10%] w-16 h-16 rounded-full bg-white/10" />
        <div className="cta-shape absolute top-[30%] right-[15%] w-12 h-12 rounded-lg bg-white/10 rotate-45" />
        <div className="cta-shape absolute bottom-[25%] left-[20%] w-8 h-8 rounded-full bg-white/10" />
        <div className="cta-shape absolute bottom-[20%] right-[10%] w-20 h-20 rounded-xl bg-white/5" />
        <div className="cta-shape absolute top-[50%] left-[5%] w-6 h-6 rounded-full bg-white/10" />
        <div className="cta-shape absolute top-[40%] right-[5%] w-10 h-10 rounded-lg bg-white/10" />
      </div>

      <style>{`
        @keyframes gradientShift {
          0%, 100% { background-position: 0% 50%; }
          50% { background-position: 100% 50%; }
        }
      `}</style>

      <div className="relative z-10 section-padding">
        <div className="container-max">
          <div ref={contentRef} className="text-center max-w-3xl mx-auto">
            <h2 
              ref={headlineRef}
              className="text-3xl sm:text-4xl lg:text-5xl xl:text-6xl font-bold mb-6 font-['Outfit'] text-white"
            >
              Ready to Start Your Project?
            </h2>

            <p 
              ref={subtextRef}
              className="text-white/80 text-base sm:text-lg mb-10"
            >
              Let's discuss your website, web app, or SaaS idea today. 
              Get a free consultation and quote.
            </p>

            <a
              ref={buttonRef}
              href="#contact"
              className="inline-flex items-center gap-3 px-8 py-4 bg-white text-[#3b6aff] font-semibold rounded-xl hover:bg-white/90 hover:scale-105 transition-all duration-300 shadow-xl shadow-black/20 group"
            >
              Request Free Quote
              <ArrowRight size={20} className="group-hover:translate-x-1 transition-transform" />
            </a>
          </div>
        </div>
      </div>
    </section>
  );
};

export default CTA;