import { useEffect, useRef } from 'react';
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { Target, Heart, Globe, TrendingUp } from 'lucide-react';

gsap.registerPlugin(ScrollTrigger);

const stats = [
  { value: '1M+', label: 'Active Members', icon: Globe },
  { value: '50+', label: 'Countries', icon: Globe },
  { value: '99%', label: 'Satisfaction', icon: Heart },
  { value: '2023', label: 'Founded', icon: TrendingUp },
];

export default function About() {
  const sectionRef = useRef<HTMLElement>(null);
  const imageRef = useRef<HTMLDivElement>(null);
  const contentRef = useRef<HTMLDivElement>(null);
  const statsRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const ctx = gsap.context(() => {
      // Image reveal animation
      gsap.fromTo(
        imageRef.current,
        { opacity: 0, x: -100, scale: 0.9 },
        {
          opacity: 1,
          x: 0,
          scale: 1,
          duration: 1,
          ease: 'power3.out',
          scrollTrigger: {
            trigger: sectionRef.current,
            start: 'top 70%',
            toggleActions: 'play none none reverse',
          },
        }
      );

      // Content reveal
      gsap.fromTo(
        contentRef.current?.children || [],
        { opacity: 0, x: 50 },
        {
          opacity: 1,
          x: 0,
          duration: 0.8,
          stagger: 0.1,
          ease: 'power3.out',
          scrollTrigger: {
            trigger: contentRef.current,
            start: 'top 75%',
            toggleActions: 'play none none reverse',
          },
        }
      );

      // Stats counter animation
      const statItems = statsRef.current?.querySelectorAll('.stat-item');
      if (statItems) {
        gsap.fromTo(
          statItems,
          { opacity: 0, y: 30 },
          {
            opacity: 1,
            y: 0,
            duration: 0.6,
            stagger: 0.1,
            ease: 'power3.out',
            scrollTrigger: {
              trigger: statsRef.current,
              start: 'top 85%',
              toggleActions: 'play none none reverse',
            },
          }
        );
      }
    }, sectionRef);

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

  return (
    <section
      id="about"
      ref={sectionRef}
      className="relative py-24 md:py-32 px-4 overflow-hidden"
    >
      <div className="max-w-7xl mx-auto">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center">
          {/* Image Side */}
          <div ref={imageRef} className="relative">
            <div className="relative aspect-square max-w-lg mx-auto lg:mx-0">
              {/* Main Image Container */}
              <div className="absolute inset-0 rounded-3xl overflow-hidden">
                <div className="w-full h-full bg-gradient-to-br from-[#CCFF00]/20 to-[#00FFFF]/20 flex items-center justify-center">
                  <div className="text-center p-8">
                    <div className="w-32 h-32 mx-auto mb-6 rounded-full bg-gradient-to-br from-[#CCFF00] to-[#00FFFF] flex items-center justify-center">
                      <Target className="w-16 h-16 text-black" />
                    </div>
                    <h3 className="font-['Orbitron'] text-2xl font-bold text-white mb-2">
                      Our Mission
                    </h3>
                    <p className="font-['Rajdhani'] text-white/70">
                      Democratizing access to creative tools for students worldwide
                    </p>
                  </div>
                </div>
              </div>

              {/* Decorative Elements */}
              <div className="absolute -top-4 -right-4 w-24 h-24 border-2 border-[#CCFF00]/30 rounded-2xl" />
              <div className="absolute -bottom-4 -left-4 w-32 h-32 border-2 border-[#00FFFF]/30 rounded-full" />
              
              {/* Floating Cards */}
              <div className="absolute top-8 -right-8 glass-card p-4 animate-pulse-glow">
                <div className="font-['Orbitron'] text-2xl font-bold text-[#CCFF00]">
                  Free
                </div>
                <div className="font-['Rajdhani'] text-xs text-white/60">
                  Forever
                </div>
              </div>
              
              <div className="absolute bottom-8 -left-8 glass-card p-4">
                <div className="font-['Orbitron'] text-2xl font-bold text-[#00FFFF]">
                  24/7
                </div>
                <div className="font-['Rajdhani'] text-xs text-white/60">
                  Support
                </div>
              </div>
            </div>
          </div>

          {/* Content Side */}
          <div ref={contentRef}>
            <div className="inline-flex items-center gap-2 px-4 py-2 mb-6 rounded-full bg-white/5 border border-white/10">
              <Heart className="w-4 h-4 text-[#CCFF00]" />
              <span className="font-['Rajdhani'] text-sm text-white/70">
                About MFA Tools Pro
              </span>
            </div>

            <h2 className="font-['Orbitron'] text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-6">
              Empowering{' '}
              <span className="gradient-text">1 Million+</span>{' '}
              Creators Globally
            </h2>

            <div className="space-y-4 mb-8">
              <p className="font-['Rajdhani'] text-lg text-white/70">
                MFA Tools Pro is a digital access and resource platform built to support 
                modern learners. We provide guidance, access opportunities, and affordable 
                solutions for popular digital tools, creative assets, and productivity 
                platforms used by students and online creators.
              </p>
              <p className="font-['Rajdhani'] text-lg text-white/70">
                Unlike single-tool websites, MFA Tools Pro is designed as a multi-resource 
                hub. From design tools and digital assets to learning resources and software 
                access options, our platform helps users discover what is available, how to 
                access it responsibly, and where to get official updates.
              </p>
            </div>

            {/* Story Block */}
            <div className="glass-card p-6 mb-8">
              <h3 className="font-['Orbitron'] text-xl font-bold text-white mb-3">
                Our Story
              </h3>
              <p className="font-['Rajdhani'] text-white/60">
                Started in 2023 as a small educational initiative, we grew into a global 
                platform serving students, designers, editors, educators, and digital learners 
                from around the world. Through community support and responsible sharing models, 
                we expanded beyond a single tool and began offering access guidance for multiple 
                digital services.
              </p>
            </div>

            {/* Values */}
            <div className="flex flex-wrap gap-3">
              {['Education First', 'Community Driven', 'Transparent', 'Ethical Access'].map(
                (value, i) => (
                  <span
                    key={i}
                    className="px-4 py-2 rounded-full bg-[#CCFF00]/10 border border-[#CCFF00]/30 font-['Rajdhani'] text-sm text-[#CCFF00]"
                  >
                    {value}
                  </span>
                )
              )}
            </div>
          </div>
        </div>

        {/* Stats Bar */}
        <div
          ref={statsRef}
          className="mt-20 grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6"
        >
          {stats.map((stat, index) => (
            <div
              key={index}
              className="stat-item glass-card p-6 text-center group hover:border-[#CCFF00]/50 transition-colors"
            >
              <stat.icon className="w-6 h-6 text-[#CCFF00] mx-auto mb-3 group-hover:scale-110 transition-transform" />
              <div className="font-['Orbitron'] text-3xl md:text-4xl font-bold text-white mb-1">
                {stat.value}
              </div>
              <div className="font-['Rajdhani'] text-sm text-white/60">
                {stat.label}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}