import React from 'react';
import { MessagesSquare, Twitter, Sparkles, MessageCircle } from 'lucide-react';
import { YOUR_DISCORD_URL, YOUR_WHATSAPP_URL, YOUR_X_URL } from '../config';
import { triggerBirthdayConfetti } from '../utils/confetti';

export const CommunityCTA: React.FC = () => {
  const handleCommunityClick = () => {
    triggerBirthdayConfetti();
  };

  return (
    <section className="py-20 sm:py-28 relative overflow-hidden">
      {/* Container with Tangerine to Sky Blue Immersive UI Gradient Backdrop */}
      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 relative">
        
        <div
          id="final-community-cta-box"
          className="relative rounded-3xl overflow-hidden p-8 sm:p-14 lg:p-16 border border-slate-200 dark:border-white/20 shadow-[0_0_60px_rgba(255,140,50,0.25)] text-center"
        >
          {/* Intense glowing gradient background */}
          <div className="absolute inset-0 bg-gradient-to-br from-[#FF8C32] via-[#FFA843] to-[#00D7FF] pointer-events-none -z-10 opacity-75" />
          {/* Theme-aware glass overlay for high-contrast readability */}
          <div className="absolute inset-0 bg-white/85 dark:bg-[#0a0c14]/80 backdrop-blur-md pointer-events-none -z-10" />

          {/* Floating cyber particles */}
          <div className="absolute -top-24 -left-24 w-72 h-72 bg-[#FF8C32]/30 rounded-full blur-3xl pointer-events-none" />
          <div className="absolute -bottom-24 -right-24 w-72 h-72 bg-[#00D7FF]/30 rounded-full blur-3xl pointer-events-none" />

          {/* Badge */}
          <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-black/10 dark:bg-black/40 border border-slate-300 dark:border-white/20 text-xs font-bold text-slate-800 dark:text-white mb-6 backdrop-blur-md">
            <Sparkles className="w-4 h-4 text-[#FF8C32]" />
            <span>THE COUNTDOWN HAS BEGUN</span>
          </div>

          {/* Heading */}
          <h2
            id="community-cta-heading"
            className="font-display text-4xl sm:text-6xl lg:text-7xl font-black text-slate-900 dark:text-white tracking-tight leading-tight"
          >
            DON'T MISS THE ALPHA.
          </h2>

          {/* Subheading */}
          <p
            id="community-cta-subheading"
            className="mt-4 text-xl sm:text-2xl lg:text-3xl font-extrabold text-[#00A6DB] dark:text-[#00D7FF] drop-shadow-sm"
          >
            BM Alpha launches October 28 at 10 PM GMT.
          </p>

          <p className="mt-3 text-slate-700 dark:text-gray-300 text-sm sm:text-base max-w-xl mx-auto font-medium">
            Be part of the earliest wave. Join our official channels for real-time launch alerts, meme drops, and birthday giveaways.
          </p>

          {/* Action CTAs */}
          <div className="mt-10 flex flex-col sm:flex-row items-center justify-center gap-3 sm:gap-4 max-w-2xl mx-auto">
            <a
              id="cta-join-whatsapp"
              href={YOUR_WHATSAPP_URL}
              target="_blank"
              rel="noopener noreferrer"
              onClick={handleCommunityClick}
              className="w-full sm:w-auto flex-1 flex items-center justify-center gap-2 px-6 py-3.5 rounded-full font-display font-black text-xs sm:text-sm text-white bg-emerald-600 hover:bg-emerald-500 shadow-xl transition-all duration-300 transform hover:-translate-y-0.5 active:scale-95"
            >
              <MessageCircle className="w-4 h-4 text-white" />
              <span>JOIN WHATSAPP</span>
            </a>

            <a
              id="cta-join-discord"
              href={YOUR_DISCORD_URL}
              target="_blank"
              rel="noopener noreferrer"
              onClick={handleCommunityClick}
              className="w-full sm:w-auto flex-1 flex items-center justify-center gap-2 px-6 py-3.5 rounded-full font-display font-black text-xs sm:text-sm text-white bg-[#5865F2] hover:bg-[#4752C4] shadow-[0_0_20px_rgba(88,101,242,0.35)] transition-all duration-300 transform hover:-translate-y-0.5 active:scale-95"
            >
              <MessagesSquare className="w-4 h-4 text-white" />
              <span>JOIN DISCORD</span>
            </a>

            <a
              id="cta-follow-x"
              href={YOUR_X_URL}
              target="_blank"
              rel="noopener noreferrer"
              onClick={handleCommunityClick}
              className="w-full sm:w-auto flex-1 flex items-center justify-center gap-2 px-6 py-3.5 rounded-full font-display font-black text-xs sm:text-sm text-slate-900 dark:text-white bg-white/80 dark:bg-[#0a0c14]/90 hover:bg-white dark:hover:bg-white/10 border border-slate-300 dark:border-white/20 hover:border-[#FF8C32] shadow-xl transition-all duration-300 transform hover:-translate-y-0.5"
            >
              <Twitter className="w-4 h-4 text-[#FF8C32]" />
              <span>FOLLOW ON X</span>
            </a>
          </div>

        </div>

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