import React from 'react';
import { Users, Sparkles, Zap, Shield, Gift, Heart } from 'lucide-react';
import globalNetImg from '../assets/images/global_network_1786969619613.jpg';
import giftBoxImg from '../assets/images/futuristic_gift_box_1786969590300.jpg';
import cakeImg from '../assets/images/holographic_cake_1786969603927.jpg';

export const WhySection: React.FC = () => {
  const cards = [
    {
      id: 'why-community',
      title: 'COMMUNITY',
      tag: 'Global Family',
      description: 'Built around a growing community that wants to participate, share, and have fun.',
      points: ['Decentralized celebrations', 'Worldwide member milestones', 'Community airdrops & rewards'],
      image: globalNetImg,
      icon: Users,
      accentColor: 'text-[#00D7FF]',
      badgeBg: 'bg-[#00D7FF]/15 text-[#00D7FF] border-[#00D7FF]/30',
      glow: 'group-hover:shadow-[0_0_35px_rgba(0,215,255,0.25)]',
      borderHover: 'group-hover:border-[#00D7FF]/60'
    },
    {
      id: 'why-memes',
      title: 'MEMES',
      tag: 'Pure Energy',
      description: 'Internet culture meets BirthdayMessaging energy.',
      points: ['Viral crypto culture', 'Continuous meme contests', 'Unbox the Alpha every day'],
      image: giftBoxImg,
      icon: Sparkles,
      accentColor: 'text-[#FF8C32]',
      badgeBg: 'bg-[#FF8C32]/15 text-[#FF8C32] border-[#FF8C32]/30',
      glow: 'group-hover:shadow-[0_0_35px_rgba(255,140,50,0.3)]',
      borderHover: 'group-hover:border-[#FF8C32]/60'
    },
    {
      id: 'why-solana',
      title: 'ON SOLANA',
      tag: 'Lightning Chain',
      description: 'Fast, low-cost transactions powered by the Solana ecosystem.',
      points: ['Sub-cent transaction fees', '400ms block confirmations', 'Instant Raydium & Jupiter liquidity'],
      image: cakeImg,
      icon: Zap,
      accentColor: 'text-[#00D7FF]',
      badgeBg: 'bg-white/10 text-white border-white/20',
      glow: 'group-hover:shadow-[0_0_35px_rgba(0,215,255,0.25)]',
      borderHover: 'group-hover:border-[#00D7FF]/60'
    }
  ];

  return (
    <section id="why-bm-alpha" className="py-24 relative overflow-hidden bg-transparent">
      {/* Subtle background divider light */}
      <div className="absolute top-0 inset-x-0 h-px bg-gradient-to-r from-transparent via-white/10 to-transparent" />
      <div className="absolute bottom-0 inset-x-0 h-px bg-gradient-to-r from-transparent via-white/10 to-transparent" />

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        {/* Section Header */}
        <div className="text-center max-w-3xl mx-auto mb-16">
          <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-[#FF8C32] mb-4 shadow-sm">
            <Gift className="w-3.5 h-3.5 text-[#FF8C32]" />
            THE CONCEPT
          </div>

          <h2
            id="why-bm-alpha-heading"
            className="font-display text-4xl sm:text-5xl font-black text-slate-900 dark:text-white tracking-tight"
          >
            WHY <span className="text-gradient-brand">BM ALPHA?</span>
          </h2>

          <p
            id="why-bm-alpha-copy"
            className="mt-5 text-lg sm:text-xl text-slate-700 dark:text-gray-300 font-semibold leading-relaxed"
          >
            BM Alpha is more than a meme. It's the community's front door into the next chapter of{' '}
            <span className="text-[#00A6DB] dark:text-[#00D7FF] font-bold">BirthdayMessaging</span>.
          </p>
        </div>

        {/* 3 Main Feature Cards */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {cards.map((card) => {
            const Icon = card.icon;
            return (
              <div
                key={card.id}
                id={card.id}
                className={`group relative flex flex-col rounded-2xl bg-white/90 dark:bg-[#161b2b]/90 border border-slate-200 dark:border-white/10 overflow-hidden transition-all duration-500 ${card.borderHover} ${card.glow} hover:-translate-y-1.5 backdrop-blur-xl shadow-md dark:shadow-lg`}
              >
                {/* Artwork Graphic Container */}
                <div className="relative h-64 sm:h-72 w-full overflow-hidden bg-slate-900/10 dark:bg-black/50">
                  <img
                    src={card.image}
                    alt={card.title}
                    className="w-full h-full object-cover object-center group-hover:scale-105 transition-transform duration-700 opacity-90 group-hover:opacity-100"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-white/95 via-white/40 dark:from-[#161b2b] dark:via-[#161b2b]/30 to-transparent" />
                  
                  {/* Floating Tag Badge */}
                  <div className="absolute top-4 right-4">
                    <span className={`text-[10px] font-extrabold px-3 py-1 rounded-full border backdrop-blur-md ${card.badgeBg} uppercase tracking-wider`}>
                      {card.tag}
                    </span>
                  </div>

                  {/* Icon Emblem */}
                  <div className="absolute bottom-4 left-6 w-12 h-12 rounded-2xl bg-white/95 dark:bg-[#0a0c14]/95 border border-slate-200 dark:border-white/10 p-2.5 flex items-center justify-center shadow-lg">
                    <Icon className={`w-6 h-6 ${card.accentColor}`} />
                  </div>
                </div>

                {/* Card Content Body */}
                <div className="p-6 sm:p-7 flex-1 flex flex-col justify-between">
                  <div>
                    <h3 className="font-display font-black text-2xl text-slate-900 dark:text-white tracking-tight group-hover:text-[#FF8C32] transition-colors">
                      {card.title}
                    </h3>
                    
                    <p className="mt-3 text-sm sm:text-base text-slate-600 dark:text-gray-300 leading-relaxed font-medium">
                      {card.description}
                    </p>
                  </div>

                  {/* Feature Highlights */}
                  <div className="mt-6 pt-5 border-t border-slate-200 dark:border-white/5 space-y-2">
                    {card.points.map((point, idx) => (
                      <div key={idx} className="flex items-center gap-2 text-xs font-medium text-slate-600 dark:text-gray-400">
                        <div className="w-1.5 h-1.5 rounded-full bg-[#FF8C32]" />
                        <span>{point}</span>
                      </div>
                    ))}
                  </div>
                </div>

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

        {/* Supporting BirthdayMessaging Ecosystem Callout */}
        <div className="mt-12 p-6 sm:p-8 rounded-2xl bg-white/90 dark:bg-[#161b2b]/90 border border-slate-200 dark:border-white/10 flex flex-col sm:flex-row items-center justify-between gap-6 backdrop-blur-xl shadow-md dark:shadow-lg">
          <div className="flex items-center gap-4">
            <div className="w-12 h-12 rounded-2xl bg-[#FF8C32]/15 border border-[#FF8C32]/30 flex items-center justify-center shrink-0">
              <Heart className="w-6 h-6 text-[#FF8C32]" />
            </div>
            <div>
              <h4 className="font-display font-bold text-slate-900 dark:text-white text-base sm:text-lg">
                The BirthdayMessaging Ecosystem
              </h4>
              <p className="text-slate-600 dark:text-gray-400 text-xs sm:text-sm mt-0.5 font-medium">
                Connecting millions celebrating birthdays globally through joyful Web3 utility and viral culture.
              </p>
            </div>
          </div>
          <a
            href="#token"
            className="shrink-0 px-5 py-2.5 rounded-full text-xs font-bold font-display text-slate-800 dark:text-white bg-slate-100 hover:bg-[#FF8C32] dark:bg-white/10 dark:hover:bg-[#FF8C32] hover:text-black dark:hover:text-black border border-slate-300 dark:border-white/10 transition-colors"
          >
            VIEW TOKENOMICS
          </a>
        </div>

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