import React from 'react';
import { MessagesSquare, Youtube, HelpCircle, ArrowUpRight, MessageCircle, Twitter } from 'lucide-react';
import { YOUR_DISCORD_URL, YOUR_WHATSAPP_URL, YOUR_X_URL, YOUR_YOUTUBE_URL, YOUR_BUY_LINK } from '../config';

export const SocialSection: React.FC = () => {
  const socialCards = [
    {
      id: 'social-whatsapp',
      title: 'WHATSAPP CHANNEL',
      subtitle: 'Exclusive updates, community invites & chat',
      cta: 'JOIN WHATSAPP',
      link: YOUR_WHATSAPP_URL,
      isExternal: true,
      badge: 'Invite Active',
      icon: MessageCircle,
      border: 'hover:border-emerald-500/60',
      glowColor: 'group-hover:shadow-[0_0_30px_rgba(16,185,129,0.35)]',
      iconBg: 'bg-emerald-500/15 text-emerald-500',
      tagColor: 'text-emerald-500 bg-emerald-500/10 border-emerald-500/30'
    },
    {
      id: 'social-discord',
      title: 'DISCORD SERVER',
      subtitle: 'Official BM Alpha Discord & community channels',
      cta: 'JOIN DISCORD',
      link: YOUR_DISCORD_URL,
      isExternal: true,
      badge: 'Active Server',
      icon: MessagesSquare,
      border: 'hover:border-[#5865F2]/60',
      glowColor: 'group-hover:shadow-[0_0_30px_rgba(88,101,242,0.35)]',
      iconBg: 'bg-[#5865F2]/15 text-[#5865F2]',
      tagColor: 'text-[#5865F2] bg-[#5865F2]/10 border-[#5865F2]/30'
    },
    {
      id: 'social-x',
      title: 'FOLLOW ON X',
      subtitle: 'Real-time memes, announcements & spaces',
      cta: 'FOLLOW @TheBMBlueprint',
      link: YOUR_X_URL,
      isExternal: true,
      badge: 'Official X',
      icon: Twitter,
      border: 'hover:border-[#FF8C32]/60',
      glowColor: 'group-hover:shadow-[0_0_30px_rgba(255,140,50,0.35)]',
      iconBg: 'bg-[#FF8C32]/15 text-[#FF8C32]',
      tagColor: 'text-[#FF8C32] bg-[#FF8C32]/10 border-[#FF8C32]/30'
    },
    {
      id: 'social-youtube',
      title: 'YOUTUBE',
      subtitle: 'Video releases, tutorials & community highlights',
      cta: 'SUBSCRIBE CHANNEL',
      link: YOUR_YOUTUBE_URL,
      isExternal: true,
      badge: 'Videos & Guides',
      icon: Youtube,
      border: 'hover:border-red-500/60',
      glowColor: 'group-hover:shadow-[0_0_30px_rgba(239,68,68,0.3)]',
      iconBg: 'bg-red-500/15 text-red-500',
      tagColor: 'text-red-500 bg-red-500/10 border-red-500/30'
    }
  ];

  return (
    <section id="community" className="py-20 relative overflow-hidden">
      {/* Background ambient lighting */}
      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-7xl h-64 bg-gradient-to-r from-[#FF8C32]/10 via-[#00D7FF]/10 to-[#FF8C32]/10 blur-3xl pointer-events-none -z-10" />

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        {/* Section Header */}
        <div className="flex flex-col items-center text-center mb-12">
          <div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 text-xs font-bold text-slate-700 dark:text-gray-300 mb-3 shadow-sm">
            <span className="w-2 h-2 rounded-full bg-[#00D7FF] animate-pulse" />
            COMMUNITY & SOCIAL HUBS
          </div>
          <h2 className="font-display text-3xl sm:text-4xl lg:text-5xl font-black text-slate-900 dark:text-white tracking-tight">
            CONNECT WITH THE <span className="text-gradient-brand">ALPHA MOVEMENT</span>
          </h2>
          <p className="mt-3 text-slate-600 dark:text-gray-400 max-w-xl text-sm sm:text-base font-medium">
            Join thousands of BirthdayMessaging members across WhatsApp, Discord, X, and YouTube.
          </p>
        </div>

        {/* 4 Social Cards Grid */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
          {socialCards.map((card) => {
            const Icon = card.icon;
            return (
              <a
                key={card.id}
                id={card.id}
                href={card.link}
                target={card.isExternal ? '_blank' : '_self'}
                rel={card.isExternal ? 'noopener noreferrer' : undefined}
                className={`group relative flex flex-col justify-between p-6 rounded-2xl bg-white/90 dark:bg-[#161b2b]/90 border border-slate-200 dark:border-white/10 ${card.border} transition-all duration-300 ${card.glowColor} transform hover:-translate-y-1 backdrop-blur-xl shadow-md dark:shadow-lg`}
              >
                <div>
                  {/* Top Bar: Icon & Badge */}
                  <div className="flex items-center justify-between mb-4">
                    <div className={`p-3 rounded-xl ${card.iconBg} transition-transform duration-300 group-hover:scale-110 shadow-md`}>
                      <Icon className="w-6 h-6" />
                    </div>
                    <span className={`text-[10px] font-bold px-2.5 py-1 rounded-full border ${card.tagColor} tracking-widest uppercase`}>
                      {card.badge}
                    </span>
                  </div>

                  {/* Title & Description */}
                  <h3 className="font-display font-black text-xl text-slate-900 dark:text-white group-hover:text-[#00A6DB] dark:group-hover:text-[#00D7FF] transition-colors">
                    {card.title}
                  </h3>
                  <p className="mt-2 text-xs sm:text-sm text-slate-600 dark:text-gray-400 leading-relaxed">
                    {card.subtitle}
                  </p>
                </div>

                {/* Bottom CTA bar */}
                <div className="mt-6 pt-4 border-t border-slate-200 dark:border-white/5 flex items-center justify-between text-xs font-bold font-display text-slate-700 dark:text-gray-300 group-hover:text-slate-900 dark:group-hover:text-white transition-colors">
                  <span>{card.cta}</span>
                  <div className="w-7 h-7 rounded-lg bg-slate-100 dark:bg-white/5 group-hover:bg-[#FF8C32] flex items-center justify-center transition-colors">
                    <ArrowUpRight className="w-4 h-4 text-slate-600 dark:text-gray-300 group-hover:text-black group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform" />
                  </div>
                </div>
              </a>
            );
          })}
        </div>

      </div>
    </section>
  );
};
