import { useEffect, useRef } from 'react';
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { ChevronDown, Zap, Users, Shield } from 'lucide-react';

gsap.registerPlugin(ScrollTrigger);

export default function Hero() {
  const sectionRef = useRef<HTMLElement>(null);
  const headingRef = useRef<HTMLHeadingElement>(null);
  const subheadingRef = useRef<HTMLSpanElement>(null);
  const ctaRef = useRef<HTMLDivElement>(null);
  const statsRef = useRef<HTMLDivElement>(null);
  const scrollHintRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const ctx = gsap.context(() => {
      // Initial reveal animation
      const tl = gsap.timeline({ delay: 0.3 });

      // Heading glitch reveal
      tl.fromTo(
        headingRef.current,
        { opacity: 0, scale: 0.8 },
        { opacity: 1, scale: 1, duration: 1, ease: 'power3.out' }
      );

      // Subheading
      tl.fromTo(
        subheadingRef.current,
        { opacity: 0, y: 30 },
        { opacity: 1, y: 0, duration: 0.8, ease: 'power3.out' },
        '-=0.5'
      );

      // CTA buttons
      tl.fromTo(
        ctaRef.current,
        { opacity: 0, y: 30 },
        { opacity: 1, y: 0, duration: 0.8, ease: 'power3.out' },
        '-=0.4'
      );

      // Stats
      tl.fromTo(
        statsRef.current?.children || [],
        { opacity: 0, y: 20 },
        { opacity: 1, y: 0, duration: 0.6, stagger: 0.1, ease: 'power3.out' },
        '-=0.4'
      );

      // Scroll hint
      tl.fromTo(
        scrollHintRef.current,
        { opacity: 0 },
        { opacity: 1, duration: 0.5 },
        '-=0.2'
      );

      // Scroll-triggered exit animation
      ScrollTrigger.create({
        trigger: sectionRef.current,
        start: 'top top',
        end: 'bottom top',
        scrub: 1,
        onUpdate: (self) => {
          const progress = self.progress;
          gsap.set(headingRef.current, {
            scale: 1 + progress * 0.5,
            opacity: 1 - progress,
          });
          gsap.set(subheadingRef.current, {
            y: progress * -100,
            opacity: 1 - progress,
          });
          gsap.set(ctaRef.current, {
            y: progress * -50,
            opacity: 1 - progress,
          });
        },
      });
    }, sectionRef);

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

  return (
    <section
      id="hero"
      ref={sectionRef}
      className="relative min-h-screen flex flex-col items-center justify-center px-4 overflow-hidden"
    >
      {/* Content */}
      <div className="relative z-10 text-center max-w-6xl mx-auto">
        {/* Badge */}
        <div className="inline-flex items-center gap-2 px-4 py-2 mb-8 rounded-full bg-white/5 border border-[#CCFF00]/30">
          <Zap className="w-4 h-4 text-[#CCFF00]" />
          <span className="font-['Rajdhani'] text-sm text-white/80">
            Trusted by 1,000,000+ Creators Worldwide
          </span>
        </div>

        {/* Main Heading */}
        <h1
          ref={headingRef}
          className="relative mb-4 font-['Orbitron'] text-[12vw] md:text-[10vw] lg:text-[8vw] font-black leading-none"
        >
          <span className="text-outline block">MFA TOOLS</span>
          <span
            ref={subheadingRef}
            className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-[#CCFF00] neon-text-glow text-[15vw] md:text-[12vw] lg:text-[10vw]"
          >
            PRO
          </span>
        </h1>

        {/* Tagline */}
        <p className="font-['Rajdhani'] text-xl md:text-2xl lg:text-3xl text-white/80 mb-4 max-w-2xl mx-auto">
          Free Kanva Pro Education Access for Students & Creators
        </p>

        {/* Description */}
        <p className="font-['Rajdhani'] text-base md:text-lg text-white/60 mb-10 max-w-xl mx-auto">
          Join education teams and unlock premium digital tools. Lifetime access, 
          no credit card required, one-click join.
        </p>

        {/* CTA Buttons */}
        <div ref={ctaRef} className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-16">
          <a
            href="https://t.me/mfatools"
            target="_blank"
            rel="noopener noreferrer"
            className="btn-neon flex items-center gap-2 text-lg"
          >
            <Zap className="w-5 h-5" />
            Get Kanva Pro Free
          </a>
          <a
            href="https://wa.me/917038146526"
            target="_blank"
            rel="noopener noreferrer"
            className="px-8 py-4 rounded-full font-semibold text-white border border-white/30 hover:border-[#CCFF00] hover:text-[#CCFF00] transition-all duration-300 font-['Orbitron']"
          >
            Contact Support
          </a>
        </div>

        {/* Stats */}
        <div
          ref={statsRef}
          className="grid grid-cols-3 gap-4 md:gap-8 max-w-2xl mx-auto"
        >
          <div className="glass-card p-4 md:p-6 text-center">
            <Users className="w-6 h-6 md:w-8 md:h-8 text-[#CCFF00] mx-auto mb-2" />
            <div className="font-['Orbitron'] text-2xl md:text-3xl font-bold text-white">
              1M+
            </div>
            <div className="font-['Rajdhani'] text-xs md:text-sm text-white/60">
              Active Users
            </div>
          </div>
          <div className="glass-card p-4 md:p-6 text-center">
            <Shield className="w-6 h-6 md:w-8 md:h-8 text-[#00FFFF] mx-auto mb-2" />
            <div className="font-['Orbitron'] text-2xl md:text-3xl font-bold text-white">
              100%
            </div>
            <div className="font-['Rajdhani'] text-xs md:text-sm text-white/60">
              Free Access
            </div>
          </div>
          <div className="glass-card p-4 md:p-6 text-center">
            <Zap className="w-6 h-6 md:w-8 md:h-8 text-[#CCFF00] mx-auto mb-2" />
            <div className="font-['Orbitron'] text-2xl md:text-3xl font-bold text-white">
              24/7
            </div>
            <div className="font-['Rajdhani'] text-xs md:text-sm text-white/60">
              Support
            </div>
          </div>
        </div>
      </div>

      {/* Scroll Hint */}
      <div
        ref={scrollHintRef}
        className="absolute bottom-8 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2"
      >
        <span className="font-['Rajdhani'] text-sm text-white/50">Scroll to Explore</span>
        <ChevronDown className="w-6 h-6 text-[#CCFF00] animate-bounce" />
      </div>

      {/* Decorative Elements */}
      <div className="absolute top-1/4 left-10 w-32 h-32 border border-[#CCFF00]/20 rounded-full animate-pulse pointer-events-none" />
      <div className="absolute bottom-1/4 right-10 w-48 h-48 border border-[#00FFFF]/20 rounded-full animate-pulse pointer-events-none" style={{ animationDelay: '0.5s' }} />
    </section>
  );
}