import { useEffect, useRef } from 'react';
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { MessageCircle, Send, Instagram, Youtube, Users, Crown } from 'lucide-react';

gsap.registerPlugin(ScrollTrigger);

const channels = [
  {
    name: 'WhatsApp Support',
    description: 'Get instant support and answers to your questions',
    url: 'https://wa.me/917038146526',
    icon: MessageCircle,
    color: '#25D366',
    members: '50K+',
    badge: '24/7 Support',
  },
  {
    name: 'Telegram Support',
    description: 'Direct chat with our support team',
    url: 'https://t.me/mfatool',
    icon: Send,
    color: '#0088CC',
    members: '100K+',
    badge: 'Fast Response',
  },
  {
    name: 'WhatsApp Channel',
    description: 'Official announcements and updates',
    url: 'https://whatsapp.com/channel/0029VagHitR9RZAUsbUBr80o',
    icon: MessageCircle,
    color: '#25D366',
    members: '200K+',
    badge: 'Updates',
  },
  {
    name: 'Telegram Channel',
    description: 'Join our main community channel',
    url: 'https://t.me/mfatools',
    icon: Send,
    color: '#0088CC',
    members: '500K+',
    badge: 'Main Channel',
  },
  {
    name: 'Premium Community',
    description: 'Exclusive paid group with premium benefits',
    url: 'https://t.me/+RaGCyR6z5zZkMzE1',
    icon: Crown,
    color: '#FFD700',
    members: '10K+',
    badge: 'Premium',
  },
  {
    name: 'Instagram',
    description: 'Follow us for tips and inspiration',
    url: 'https://instagram.com/mfatools',
    icon: Instagram,
    color: '#E4405F',
    members: '150K+',
    badge: 'Social',
  },
  {
    name: 'YouTube',
    description: 'Tutorials and educational content',
    url: 'https://youtube.com/@mfatools',
    icon: Youtube,
    color: '#FF0000',
    members: '300K+',
    badge: 'Tutorials',
  },
  {
    name: 'Kanva Activation',
    description: 'Direct link to join Kanva education team',
    url: 'https://www.kanva.com/brand/join?token=MCPV3W5P_9yg_J1aNEd9Ag&brandingVariant=edu&referrer=team-invite',
    icon: Users,
    color: '#00C4CC',
    members: 'Join Now',
    badge: 'Direct Access',
  },
];

export default function Channels() {
  const sectionRef = useRef<HTMLElement>(null);
  const headingRef = useRef<HTMLDivElement>(null);
  const gridRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const ctx = gsap.context(() => {
      // Heading animation
      gsap.fromTo(
        headingRef.current,
        { opacity: 0, y: 50 },
        {
          opacity: 1,
          y: 0,
          duration: 0.8,
          ease: 'power3.out',
          scrollTrigger: {
            trigger: headingRef.current,
            start: 'top 80%',
            toggleActions: 'play none none reverse',
          },
        }
      );

      // Grid items stagger animation
      const items = gridRef.current?.querySelectorAll('.channel-card');
      if (items) {
        gsap.fromTo(
          items,
          { opacity: 0, y: 50, scale: 0.95 },
          {
            opacity: 1,
            y: 0,
            scale: 1,
            duration: 0.6,
            stagger: 0.08,
            ease: 'power3.out',
            scrollTrigger: {
              trigger: gridRef.current,
              start: 'top 75%',
              toggleActions: 'play none none reverse',
            },
          }
        );
      }
    }, sectionRef);

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

  return (
    <section
      id="channels"
      ref={sectionRef}
      className="relative py-24 md:py-32 px-4 overflow-hidden"
    >
      <div className="max-w-7xl mx-auto">
        {/* Section Header */}
        <div ref={headingRef} className="text-center mb-16 md:mb-20">
          <div className="inline-flex items-center gap-2 px-4 py-2 mb-6 rounded-full bg-white/5 border border-white/10">
            <Users className="w-4 h-4 text-[#CCFF00]" />
            <span className="font-['Rajdhani'] text-sm text-white/70">
              Join Our Community
            </span>
          </div>
          <h2 className="font-['Orbitron'] text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-4">
            Connect With <span className="gradient-text">Us</span>
          </h2>
          <p className="font-['Rajdhani'] text-lg md:text-xl text-white/60 max-w-2xl mx-auto">
            Join our official channels for updates, support, and community. 
            Stay connected with 1M+ creators worldwide.
          </p>
        </div>

        {/* Channels Grid */}
        <div
          ref={gridRef}
          className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6"
        >
          {channels.map((channel, index) => (
            <a
              key={index}
              href={channel.url}
              target="_blank"
              rel="noopener noreferrer"
              className="channel-card group relative"
            >
              <div
                className="glass-card p-5 h-full transition-all duration-300 hover:scale-[1.02]"
                style={{
                  borderColor: `${channel.color}30`,
                }}
              >
                {/* Badge */}
                <div
                  className="absolute top-3 right-3 px-2 py-1 rounded-full text-xs font-['Rajdhani'] font-semibold"
                  style={{
                    backgroundColor: `${channel.color}20`,
                    color: channel.color,
                  }}
                >
                  {channel.badge}
                </div>

                {/* Icon */}
                <div
                  className="w-12 h-12 rounded-xl flex items-center justify-center mb-4 transition-transform duration-300 group-hover:scale-110"
                  style={{
                    backgroundColor: `${channel.color}20`,
                  }}
                >
                  <channel.icon
                    className="w-6 h-6"
                    style={{ color: channel.color }}
                  />
                </div>

                {/* Content */}
                <h3 className="font-['Orbitron'] text-lg font-bold text-white mb-1 group-hover:text-[#CCFF00] transition-colors">
                  {channel.name}
                </h3>
                <p className="font-['Rajdhani'] text-sm text-white/60 mb-3">
                  {channel.description}
                </p>

                {/* Members */}
                <div className="flex items-center gap-2">
                  <Users className="w-4 h-4 text-white/40" />
                  <span
                    className="font-['Rajdhani'] text-sm font-semibold"
                    style={{ color: channel.color }}
                  >
                    {channel.members}
                  </span>
                </div>

                {/* Hover Border */}
                <div
                  className="absolute inset-0 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"
                  style={{
                    border: `2px solid ${channel.color}`,
                    boxShadow: `0 0 20px ${channel.color}30`,
                  }}
                />
              </div>
            </a>
          ))}
        </div>

        {/* Trust Badges */}
        <div className="mt-16 flex flex-wrap items-center justify-center gap-6 md:gap-10">
          <div className="flex items-center gap-2 text-white/50">
            <div className="w-2 h-2 rounded-full bg-[#CCFF00] animate-pulse" />
            <span className="font-['Rajdhani'] text-sm">Verified Channels</span>
          </div>
          <div className="flex items-center gap-2 text-white/50">
            <div className="w-2 h-2 rounded-full bg-[#00FFFF] animate-pulse" style={{ animationDelay: '0.3s' }} />
            <span className="font-['Rajdhani'] text-sm">Active Support</span>
          </div>
          <div className="flex items-center gap-2 text-white/50">
            <div className="w-2 h-2 rounded-full bg-[#CCFF00] animate-pulse" style={{ animationDelay: '0.6s' }} />
            <span className="font-['Rajdhani'] text-sm">Daily Updates</span>
          </div>
        </div>
      </div>
    </section>
  );
}