import React, { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'motion/react';
import {
  Sparkles,
  Clock,
  Coins,
  ShieldCheck,
  Gift,
  Flame,
  Award,
  Crown,
  CheckCircle2,
  ExternalLink,
  ChevronRight,
  Package,
  Zap,
  Lock,
  Globe,
  Users,
  Vote,
  Star,
  Check,
  ArrowRight,
  Eye,
  Sliders,
  DollarSign,
  TrendingUp,
  Gift as GiftIcon
} from 'lucide-react';
import { SectionHeading } from '../ui/SectionHeading';
import { GlassCard } from '../ui/GlassCard';
import { Badge } from '../ui/Badge';
import { Button } from '../ui/Button';

// Import generated image of the 3 coins
import coinShowcaseImg from '../../assets/images/birthday_memecoins_1785932159451.jpg';

interface MemeCoinLaunchSectionProps {
  onOpenWaitlist: () => void;
  onOpenTokenomics: () => void;
}

export const MemeCoinLaunchSection: React.FC<MemeCoinLaunchSectionProps> = ({
  onOpenWaitlist,
  onOpenTokenomics
}) => {
  const [activeTab, setActiveTab] = useState<'material' | 'non-material'>('material');

  // Custom Investment Calculator State
  const [customAmount, setCustomAmount] = useState<number>(25); // Default micro investment $25
  const quickAmounts = [1, 5, 10, 25, 50, 100, 250, 1000, 5000];

  // Countdown timer calculation targeting November 18, 2026 at 10:00 PM GMT
  const [timeLeft, setTimeLeft] = useState({
    days: 0,
    hours: 0,
    minutes: 0,
    seconds: 0
  });

  useEffect(() => {
    const launchDate = new Date('2026-11-18T22:00:00Z').getTime();

    const updateTimer = () => {
      const now = new Date().getTime();
      const difference = launchDate - now;

      if (difference > 0) {
        const days = Math.floor(difference / (1000 * 60 * 60 * 24));
        const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((difference % (1000 * 60)) / 1000);

        setTimeLeft({ days, hours, minutes, seconds });
      } else {
        setTimeLeft({ days: 0, hours: 0, minutes: 0, seconds: 0 });
      }
    };

    updateTimer();
    const interval = setInterval(updateTimer, 1000);
    return () => clearInterval(interval);
  }, []);

  // Calculation function for custom token amount and unlocked perks based on custom dollar input
  const calculateInvestmentDetails = (amount: number) => {
    const safeAmount = Math.max(1, isNaN(amount) ? 1 : amount);

    // Base rate: 1,000 $SX per $1
    // Volume bonus tiers:
    // $1 - $49: standard rate (1,000 $SX / $)
    // $50 - $249: +10% bonus (1,100 $SX / $)
    // $250 - $999: +20% bonus (1,200 $SX / $)
    // $1,000 - $4,999: +50% bonus (1,500 $SX / $)
    // $5,000+: +80% bonus (1,800 $SX / $)
    let rate = 1000;
    let bonusPercentage = 0;

    if (safeAmount >= 5000) {
      rate = 1800;
      bonusPercentage = 80;
    } else if (safeAmount >= 1000) {
      rate = 1500;
      bonusPercentage = 50;
    } else if (safeAmount >= 250) {
      rate = 1200;
      bonusPercentage = 20;
    } else if (safeAmount >= 50) {
      rate = 1100;
      bonusPercentage = 10;
    }

    const totalTokens = safeAmount * rate;

    // Material Perks unlocked
    const materialPerks: string[] = [
      `${totalTokens.toLocaleString()} $SX Meme Coin Launch Allocation`,
      `Official Digital Supporter Badge & Certificate`
    ];

    if (safeAmount >= 50) {
      const microAppsCount = Math.min(23, Math.floor(safeAmount / 25));
      materialPerks.push(`${microAppsCount} Free US$17 Marketing MicroApps of choice`);
    }

    if (safeAmount >= 250) {
      const coinCount = safeAmount >= 1000 ? 'Full 3-Coin Set (Alpha, Beta, Gamma)' : '1 Minted Physical Collector Coin';
      materialPerks.push(`${coinCount} with Worldwide Shipping`);
    }

    if (safeAmount >= 1000) {
      materialPerks.push('Lifetime Unlimited Pass to ALL 23 US$17 MicroApps');
      materialPerks.push('Software Revenue Buyback Dividend Pool Access');
      materialPerks.push('Physical Founders Swag Box (Team Hoodie & Hardware Wallet Case)');
    }

    if (safeAmount >= 5000) {
      materialPerks.push('Numbered Serialized Gold-Plated 3-Coin Master Set');
      materialPerks.push('Permanent Enterprise Pass for all future BM Connect tools');
    }

    // Non-Material Perks unlocked
    const nonMaterialPerks: string[] = [
      'Supporter Discord Role & Lounge Access',
      'Whitelisted Presale Launch Access',
      'Public Wall of Supporters Listing'
    ];

    if (safeAmount >= 50) {
      nonMaterialPerks.push('Priority Software Update Notifications');
    }

    if (safeAmount >= 250) {
      nonMaterialPerks.push('Private Beta Testing Access for All 30+ Core Apps');
      nonMaterialPerks.push('Insider Alpha Telegram Channel Entry');
      nonMaterialPerks.push('Quarterly Founders AMA Voice Calls');
    }

    if (safeAmount >= 1000) {
      nonMaterialPerks.push('VIP Founder Discord & Direct Developer Chat Access');
      nonMaterialPerks.push('On-Chain Founder Wall Permanent Name Inscription');
      nonMaterialPerks.push('Treasury Governance Voting Rights');
    }

    if (safeAmount >= 5000) {
      nonMaterialPerks.push('Treasury Advisory Board Seat & Direct Founder Line');
      nonMaterialPerks.push('Protocol Governance Veto & Acquisition Proposal Voting');
      nonMaterialPerks.push('Exclusive VIP Annual Retreat & Physical Event Passes');
    }

    // Calculate next milestone progress
    let nextMilestoneAmount = 50;
    let nextMilestoneName = 'Supporter Tier ($50)';
    let nextMilestonePerk = 'Unlock 2 Free US$17 MicroApps';

    if (safeAmount >= 50 && safeAmount < 250) {
      nextMilestoneAmount = 250;
      nextMilestoneName = 'Enthusiast Tier ($250)';
      nextMilestonePerk = 'Unlock 1 Physical Minted Collector Coin & Beta Access';
    } else if (safeAmount >= 250 && safeAmount < 1000) {
      nextMilestoneAmount = 1000;
      nextMilestoneName = 'VIP Whale Tier ($1,000)';
      nextMilestonePerk = 'Unlock Full 3-Coin Set, Swag Box & Lifetime Unlimited Pass';
    } else if (safeAmount >= 1000 && safeAmount < 5000) {
      nextMilestoneAmount = 5000;
      nextMilestoneName = 'Treasury Guardian ($5,000)';
      nextMilestonePerk = 'Unlock Gold-Plated Master Set & Advisory Board Seat';
    } else if (safeAmount >= 5000) {
      nextMilestoneAmount = 10000;
      nextMilestoneName = 'Legendary Backer ($10,000)';
      nextMilestonePerk = 'Maximum Protocol Allocation & Co-Founder Mentorship';
    }

    const neededForNext = Math.max(0, nextMilestoneAmount - safeAmount);
    const progressPercent = Math.min(100, Math.round((safeAmount / nextMilestoneAmount) * 100));

    return {
      safeAmount,
      totalTokens,
      bonusPercentage,
      materialPerks,
      nonMaterialPerks,
      nextMilestoneAmount,
      nextMilestoneName,
      nextMilestonePerk,
      neededForNext,
      progressPercent
    };
  };

  const calcDetails = calculateInvestmentDetails(customAmount);

  const pillars = [
    {
      id: 'alpha',
      code: 'ALPHA',
      title: 'THE REMINDER',
      tagline: 'The first one to remember.',
      motto: 'EVERY BIRTHDAY MATTERS • I REMEMBERED YOU',
      symbol: 'Candle & Letter A',
      colors: 'Tangerine Orange & Gold',
      badge: 'Pillar 01',
      description: 'The foundation token powering automated relationship reminders, contact syncing, and notification dispatch across all 30+ apps.',
      role: 'Automated Trigger Utility'
    },
    {
      id: 'beta',
      code: 'BETA',
      title: 'THE CELEBRATION',
      tagline: 'Celebrate every moment.',
      motto: 'SHARE JOY • SPREAD LOVE • MAKE EVERY DAY SPECIAL',
      symbol: 'Balloons, Gift Box & Letter B',
      colors: 'Sky Blue & Antique Bronze',
      badge: 'Pillar 02',
      description: 'The utility & access engine granting lifetime MicroApp access, campaign customization, and direct-response offer generation.',
      role: 'MicroApp & Access Engine'
    },
    {
      id: 'gamma',
      code: 'GAMMA',
      title: 'THE MEMORY',
      tagline: 'Memories that never fade.',
      motto: 'MEMORIES LAST FOREVER • CONNECTIONS THAT COUNT',
      symbol: 'Calendar, Bell & Letter G',
      colors: 'Sky Blue & Deep Gold',
      badge: 'Pillar 03',
      description: 'The governance and vault token linking revenue buybacks, on-chain treasury voting rights, and long-term ecosystem equity.',
      role: 'Treasury & Governance Vault'
    }
  ];

  const rewardTiers = [
    {
      name: 'Micro Backer',
      price: '$1 – $49',
      tokens: '1,000 – 49,000 $SX',
      materialRewards: [
        '1,000 $SX per $1 USD Invested',
        'Official Digital Collector Badge',
        'Whitelisted Presale Token Allocation'
      ],
      nonMaterialRewards: [
        'Supporter Discord Role & Lounge Access',
        'Public Wall of Supporters Listing',
        'Early Software Launch Notifications'
      ],
      highlight: false,
      badgeText: 'Micro Investment Welcome'
    },
    {
      name: 'Supporter Tier',
      price: '$50',
      tokens: '55,000 $SX Tokens (+10% Bonus)',
      materialRewards: [
        '55,000 $SX Meme Coin Launch Allocation',
        '2 Free US$17 Marketing MicroApps of choice',
        'Official Digital Collector Badge'
      ],
      nonMaterialRewards: [
        'Supporter Discord Role & Lounge Access',
        'Whitelisted Presale Launch Access',
        'Public Wall of Supporters Listing'
      ],
      highlight: false,
      badgeText: 'Great Starter'
    },
    {
      name: 'Enthusiast Tier',
      price: '$250',
      tokens: '300,000 $SX Tokens (+20% Bonus)',
      materialRewards: [
        '300,000 $SX Meme Coin Launch Allocation',
        '1 Minted Physical Collector Coin (Alpha, Beta, or Gamma)',
        'Full Access to 5 MicroApps in Program Store',
        'Ecosystem Sticker & Decal Collector Pack'
      ],
      nonMaterialRewards: [
        'Private Beta Testing Access for All 30+ Core Apps',
        'Insider Alpha Telegram Channel Entry',
        'Quarterly Founders AMA Voice Calls'
      ],
      highlight: false,
      badgeText: 'Collector Item Included'
    },
    {
      name: 'VIP Whale Tier',
      price: '$1,000',
      tokens: '1,500,000 $SX Tokens (+50% Bonus)',
      materialRewards: [
        '1,500,000 $SX Meme Coin Launch Allocation',
        'Full 3-Coin Physical Minted Collector Box Set (Alpha, Beta, Gamma)',
        'Lifetime Unlimited Pass to ALL 23 US$17 MicroApps',
        'Software Revenue Buyback Dividend Pool Access',
        'Physical Founders Swag Box (Embroidered Hoodie & Cold Wallet Case)'
      ],
      nonMaterialRewards: [
        'VIP Founder Discord & Direct Developer Chat Access',
        'On-Chain Founder Wall Permanent Name Inscription',
        'Treasury Governance Voting Rights',
        '1-on-1 Strategy Onboarding Session'
      ],
      highlight: true,
      badgeText: 'Most Popular'
    },
    {
      name: 'Treasury Guardian',
      price: '$5,000+',
      tokens: '9,000,000+ $SX Tokens (+80% Bonus)',
      materialRewards: [
        '9,000,000+ $SX Meme Coin Allocation + Bonus Yield',
        'Numbered Serialized Gold-Plated Physical 3-Coin Master Set',
        'Permanent Lifetime Enterprise Pass to ALL Apps & Future Tools',
        'Maximum Share of Subscription Revenue Buyback Pool',
        'Deluxe Founders Hardware & Apparel Luxury Box'
      ],
      nonMaterialRewards: [
        'Treasury Advisory Board Seat & Direct Founder Line',
        'Protocol Governance Veto & Acquisition Proposal Voting',
        'Exclusive VIP Annual Retreat & Physical Event Passes',
        'Custom Co-Branded SaaS Portal Integration'
      ],
      highlight: false,
      badgeText: 'Maximum Impact'
    }
  ];

  return (
    <section id="memecoin-launch" className="py-24 bg-slate-950 relative overflow-hidden border-t border-slate-900">
      {/* Background ambient glow */}
      <div className="absolute top-1/3 left-1/2 -translate-x-1/2 w-[800px] h-[800px] bg-gradient-to-tr from-orange-600/15 via-amber-500/10 to-sky-500/15 rounded-full blur-[150px] pointer-events-none" />

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        
        {/* Launch Banner Header with Live Countdown */}
        <div className="mb-16 p-8 sm:p-12 rounded-3xl bg-gradient-to-br from-slate-900 via-orange-950/40 to-slate-950 border border-orange-500/40 shadow-2xl relative overflow-hidden">
          <div className="flex flex-col lg:flex-row items-center justify-between gap-8">
            <div className="flex-1 text-left">
              <div className="flex items-center gap-3 mb-3">
                <Badge variant="tangerine" showDot={true}>
                  Official Funding Launch • November 18th at 10 PM GMT
                </Badge>
                <span className="text-xs font-mono text-sky-400 font-semibold flex items-center gap-1">
                  <Flame className="w-3.5 h-3.5" /> 100% Revenue Backed
                </span>
              </div>

              <h2 className="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-white tracking-tight">
                BirthdayMessaging <span className="text-transparent bg-clip-text bg-gradient-to-r from-orange-400 via-amber-400 to-sky-400">Meme Coin Launch</span>
              </h2>

              <p className="text-sm sm:text-base text-slate-300 mt-4 leading-relaxed max-w-2xl">
                We are launching the official <strong>$SX BirthdayMessaging Meme Coin</strong> on <strong>November 18th at 10 PM GMT</strong> to fund our rapid software expansion! Backers can invest <strong>ANY amount ($1, $5, $10, $50, $1,000+)</strong> and receive proportional token allocations, physical collector coins, micro-app access, and on-chain revenue dividends.
              </p>

              <div className="flex flex-wrap items-center gap-4 mt-8">
                <Button
                  variant="glow"
                  size="lg"
                  onClick={onOpenWaitlist}
                  icon={<Coins className="w-5 h-5" />}
                >
                  Join Nov 18, 10 PM GMT Presale Whitelist
                </Button>
                <Button
                  variant="outline"
                  size="lg"
                  onClick={onOpenTokenomics}
                  icon={<ShieldCheck className="w-5 h-5 text-sky-400" />}
                >
                  Tokenomics & Smart Contract
                </Button>
              </div>
            </div>

            {/* Countdown Clock Box */}
            <div className="w-full lg:w-auto p-6 sm:p-8 rounded-2xl bg-slate-950/90 border border-orange-500/30 backdrop-blur-xl shadow-2xl flex flex-col items-center text-center">
              <div className="flex items-center gap-2 text-xs font-mono uppercase tracking-widest text-orange-400 font-bold mb-4">
                <Clock className="w-4 h-4 animate-pulse" /> Launch Countdown (Nov 18, 10 PM GMT)
              </div>

              <div className="grid grid-cols-4 gap-3 sm:gap-4 font-mono">
                <div className="flex flex-col items-center bg-slate-900 border border-slate-800 rounded-xl px-3 sm:px-4 py-3 min-w-[65px] sm:min-w-[75px]">
                  <span className="text-2xl sm:text-3xl font-extrabold text-white">{timeLeft.days}</span>
                  <span className="text-[10px] text-slate-400 uppercase mt-1">Days</span>
                </div>
                <div className="flex flex-col items-center bg-slate-900 border border-slate-800 rounded-xl px-3 sm:px-4 py-3 min-w-[65px] sm:min-w-[75px]">
                  <span className="text-2xl sm:text-3xl font-extrabold text-orange-400">{timeLeft.hours}</span>
                  <span className="text-[10px] text-slate-400 uppercase mt-1">Hours</span>
                </div>
                <div className="flex flex-col items-center bg-slate-900 border border-slate-800 rounded-xl px-3 sm:px-4 py-3 min-w-[65px] sm:min-w-[75px]">
                  <span className="text-2xl sm:text-3xl font-extrabold text-sky-400">{timeLeft.minutes}</span>
                  <span className="text-[10px] text-slate-400 uppercase mt-1">Mins</span>
                </div>
                <div className="flex flex-col items-center bg-slate-900 border border-slate-800 rounded-xl px-3 sm:px-4 py-3 min-w-[65px] sm:min-w-[75px]">
                  <span className="text-2xl sm:text-3xl font-extrabold text-amber-400">{timeLeft.seconds}</span>
                  <span className="text-[10px] text-slate-400 uppercase mt-1">Secs</span>
                </div>
              </div>

              <p className="text-[11px] text-slate-400 font-mono mt-4">
                Fair public launch • Open to all sizes ($1+) • Guaranteed liquidity lock
              </p>
            </div>
          </div>
        </div>

        {/* CUSTOM INVESTMENT CALCULATOR SECTION */}
        <div className="mb-20">
          <SectionHeading
            badgeText="Flexible Micro & Custom Investment"
            badgeVariant="tangerine"
            title="Invest ANY Amount You Want"
            gradientTitle="From $1 to $10,000+"
            subtitle="Every dollar counts! Type or select any custom investment amount below to see your exact calculated $SX token allocation and unlocked physical & digital rewards."
          />

          <GlassCard gradientBorder={true} className="p-6 sm:p-10">
            <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center">
              
              {/* Left Column: Interactive Input Controls */}
              <div className="lg:col-span-6 flex flex-col gap-6">
                <div>
                  <div className="flex items-center justify-between mb-2">
                    <label className="text-xs font-mono uppercase tracking-widest text-orange-400 font-bold flex items-center gap-1.5">
                      <DollarSign className="w-4 h-4" /> Enter Your Custom Investment ($ USD)
                    </label>
                    <span className="text-xs font-mono text-slate-400">Min $1 • No Max Limit</span>
                  </div>

                  {/* Input Box */}
                  <div className="relative">
                    <span className="absolute left-4 top-1/2 -translate-y-1/2 text-2xl font-bold text-orange-400 font-mono">$</span>
                    <input
                      type="number"
                      min="1"
                      max="100000"
                      value={customAmount}
                      onChange={(e) => setCustomAmount(Math.max(1, parseInt(e.target.value) || 1))}
                      className="w-full bg-slate-950 border-2 border-orange-500/50 focus:border-orange-400 rounded-2xl pl-10 pr-4 py-4 text-3xl font-extrabold text-white font-mono focus:outline-none focus:ring-2 focus:ring-orange-500/30 transition-all shadow-inner"
                      placeholder="e.g. 10"
                    />
                  </div>
                </div>

                {/* Quick Selection Buttons */}
                <div>
                  <span className="text-xs font-mono text-slate-400 font-semibold block mb-2">
                    Quick Select Amount:
                  </span>
                  <div className="flex flex-wrap gap-2">
                    {quickAmounts.map((amt) => (
                      <button
                        key={amt}
                        onClick={() => setCustomAmount(amt)}
                        className={`px-3.5 py-2 rounded-xl text-xs font-mono font-bold transition-all cursor-pointer border ${
                          customAmount === amt
                            ? 'bg-orange-600 border-orange-400 text-white shadow-md shadow-orange-600/30 scale-105'
                            : 'bg-slate-900 border-slate-800 text-slate-300 hover:border-slate-700 hover:text-white'
                        }`}
                      >
                        ${amt}
                      </button>
                    ))}
                  </div>
                </div>

                {/* Range Slider */}
                <div>
                  <div className="flex justify-between text-xs font-mono text-slate-400 mb-1">
                    <span>$1 Micro</span>
                    <span>$250 Enthusiast</span>
                    <span>$1,000 VIP</span>
                    <span>$5,000+ Guardian</span>
                  </div>
                  <input
                    type="range"
                    min="1"
                    max="5000"
                    step="1"
                    value={Math.min(5000, customAmount)}
                    onChange={(e) => setCustomAmount(parseInt(e.target.value))}
                    className="w-full h-2 bg-slate-900 rounded-lg appearance-none cursor-pointer accent-orange-500"
                  />
                </div>

                {/* Next Milestone Progress Bar */}
                <div className="p-4 rounded-xl bg-slate-950/80 border border-slate-800/80">
                  <div className="flex items-center justify-between text-xs mb-2">
                    <span className="font-semibold text-slate-300 flex items-center gap-1.5">
                      <TrendingUp className="w-3.5 h-3.5 text-sky-400" /> Next Milestone: {calcDetails.nextMilestoneName}
                    </span>
                    <span className="font-mono text-orange-400 font-bold">
                      {calcDetails.progressPercent}%
                    </span>
                  </div>
                  <div className="w-full bg-slate-900 h-2 rounded-full overflow-hidden mb-2">
                    <div
                      className="bg-gradient-to-r from-orange-500 to-amber-400 h-full transition-all duration-300"
                      style={{ width: `${calcDetails.progressPercent}%` }}
                    />
                  </div>
                  {calcDetails.neededForNext > 0 ? (
                    <p className="text-[11px] text-slate-400 leading-snug">
                      💡 Add <strong className="text-orange-300">${calcDetails.neededForNext}</strong> more to unlock: <span className="text-sky-300">{calcDetails.nextMilestonePerk}</span>
                    </p>
                  ) : (
                    <p className="text-[11px] text-emerald-400 font-semibold">
                      🎉 Maximum Guardian Tier unlocked! You get gold-plated physical coin master sets and enterprise tools.
                    </p>
                  )}
                </div>
              </div>

              {/* Right Column: Calculated Output Card */}
              <div className="lg:col-span-6 p-6 sm:p-8 rounded-2xl bg-gradient-to-b from-slate-900 via-slate-950 to-slate-950 border border-orange-500/40 shadow-2xl relative">
                
                {calcDetails.bonusPercentage > 0 && (
                  <div className="absolute -top-3 right-6 bg-gradient-to-r from-amber-500 to-orange-500 text-slate-950 font-mono text-[10px] font-black uppercase tracking-wider px-3 py-1 rounded-full shadow-md flex items-center gap-1">
                    <Sparkles className="w-3 h-3" /> +{calcDetails.bonusPercentage}% Volume Bonus Token Yield
                  </div>
                )}

                <span className="text-xs font-mono uppercase tracking-widest text-slate-400 font-bold block mb-1">
                  Your Calculated Allocation for <span className="text-white">${calcDetails.safeAmount}</span>
                </span>

                {/* Big Token Display */}
                <div className="flex items-baseline gap-2 mt-2">
                  <span className="text-4xl sm:text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-orange-400 via-amber-300 to-sky-400 font-mono">
                    {calcDetails.totalTokens.toLocaleString()}
                  </span>
                  <span className="text-lg font-bold text-sky-400 font-mono">$SX Tokens</span>
                </div>

                <div className="mt-6 pt-6 border-t border-slate-800/80">
                  <span className="text-xs font-mono uppercase tracking-widest text-orange-400 font-bold block mb-3 flex items-center gap-1.5">
                    <Package className="w-4 h-4" /> Unlocked Material Rewards:
                  </span>
                  <ul className="flex flex-col gap-2.5">
                    {calcDetails.materialPerks.map((perk, i) => (
                      <li key={i} className="text-xs text-slate-200 flex items-start gap-2">
                        <CheckCircle2 className="w-4 h-4 text-orange-400 flex-shrink-0 mt-0.5" />
                        <span>{perk}</span>
                      </li>
                    ))}
                  </ul>
                </div>

                <div className="mt-5 pt-5 border-t border-slate-800/80">
                  <span className="text-xs font-mono uppercase tracking-widest text-sky-400 font-bold block mb-3 flex items-center gap-1.5">
                    <Crown className="w-4 h-4" /> Unlocked Digital & Community Perks:
                  </span>
                  <ul className="flex flex-col gap-2.5">
                    {calcDetails.nonMaterialPerks.map((perk, i) => (
                      <li key={i} className="text-xs text-slate-200 flex items-start gap-2">
                        <CheckCircle2 className="w-4 h-4 text-sky-400 flex-shrink-0 mt-0.5" />
                        <span>{perk}</span>
                      </li>
                    ))}
                  </ul>
                </div>

                <div className="mt-8">
                  <Button
                    variant="glow"
                    size="lg"
                    className="w-full"
                    onClick={onOpenWaitlist}
                    icon={<ArrowRight className="w-4 h-4" />}
                  >
                    Reserve ${calcDetails.safeAmount} Allocation ({calcDetails.totalTokens.toLocaleString()} $SX)
                  </Button>
                </div>

              </div>

            </div>
          </GlassCard>
        </div>

        {/* Section Heading for Pillars */}
        <SectionHeading
          badgeText="The Three Pillars of Memory"
          badgeVariant="sky"
          title="Alpha, Beta & Gamma Coins"
          gradientTitle="Tangerine & Sky Blue"
          subtitle="Discover the three core coin pillars representing BirthdayMessaging.io: The Reminder, The Celebration, and The Memory."
        />

        {/* Two-Image Community Showcase */}
        <div id="showcase-images" className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-16">

          {/* Coin artwork card */}
          <div className="overflow-hidden rounded-3xl border border-slate-800 bg-slate-950 shadow-2xl">
            <div className="relative p-4 sm:p-5">
              <span className="absolute left-7 top-7 z-10 rounded-full border border-orange-500/40 bg-slate-950/95 px-3 py-2 text-[10px] sm:text-xs font-mono font-bold uppercase tracking-widest text-orange-400">
                Official Physical Minted Artifact
              </span>

              <a href="#showcase-coin-viewer"
                 aria-label="View full-size BM Alpha coin image"
                 className="block cursor-zoom-in">
                <img
                  src="https://res.cloudinary.com/gg3hylnv/image/upload/v1792532111/image_93eb6f_4K.png"
                  alt="BM Alpha commemorative copper coin"
                  className="h-[420px] sm:h-[520px] w-full rounded-2xl bg-slate-950 object-contain object-center"
                  loading="lazy"
                />
              </a>

              <a href="#showcase-coin-viewer"
                 aria-label="View full-size BM Alpha coin image"
                 className="absolute right-7 top-7 z-20 flex h-12 w-12 items-center justify-center rounded-full border border-slate-600 bg-slate-950/95 text-white shadow-lg transition hover:scale-110 hover:border-orange-400 focus:outline-none focus:ring-2 focus:ring-orange-400">
                <span aria-hidden="true" className="pointer-events-none absolute left-1/2 top-1/2 h-5 w-5 -translate-x-1/2 -translate-y-1/2">
                  <span className="absolute left-1/2 top-0 h-5 w-px -translate-x-1/2 bg-current"></span>
                  <span className="absolute left-0 top-1/2 h-px w-5 -translate-y-1/2 bg-current"></span>
                </span>
              </a>
            </div>

            <div className="border-t border-slate-800 bg-gradient-to-b from-slate-900 to-slate-950 p-6 sm:p-7">
              <h3 className="text-xl sm:text-2xl font-bold text-white">BM Alpha Commemorative Coin</h3>
              <p className="mt-3 leading-relaxed text-slate-300">
                The BM Alpha coin represents the reminder: every birthday matters, and every meaningful connection deserves to be remembered.
              </p>
              <p className="mt-4 text-xs sm:text-sm font-semibold text-orange-400">
                Click the plus icon or image to view it full size.
              </p>
            </div>
          </div>

          {/* Community artwork card */}
          <div className="overflow-hidden rounded-3xl border border-slate-800 bg-slate-950 shadow-2xl">
            <div className="relative p-4 sm:p-5">
              <span className="absolute left-7 top-7 z-10 rounded-full border border-sky-500/40 bg-slate-950/95 px-3 py-2 text-[10px] sm:text-xs font-mono font-bold uppercase tracking-widest text-sky-400">
                BM Connect Community Movement
              </span>

              <a href="#showcase-community-viewer"
                 aria-label="View full-size BM Connect community image"
                 className="block cursor-zoom-in">
                <img
                  src="https://res.cloudinary.com/gg3hylnv/image/upload/v1792532072/image_116649_4K_1.jpg"
                  alt="Different generations and communities connected through BM Connect"
                  className="h-[420px] sm:h-[520px] w-full rounded-2xl bg-slate-950 object-contain object-center"
                  loading="lazy"
                />
              </a>

              <a href="#showcase-community-viewer"
                 aria-label="View full-size BM Connect community image"
                 className="absolute right-7 top-7 z-20 flex h-12 w-12 items-center justify-center rounded-full border border-slate-600 bg-slate-950/95 text-white shadow-lg transition hover:scale-110 hover:border-sky-400 focus:outline-none focus:ring-2 focus:ring-sky-400">
                <span aria-hidden="true" className="pointer-events-none absolute left-1/2 top-1/2 h-5 w-5 -translate-x-1/2 -translate-y-1/2">
                  <span className="absolute left-1/2 top-0 h-5 w-px -translate-x-1/2 bg-current"></span>
                  <span className="absolute left-0 top-1/2 h-px w-5 -translate-y-1/2 bg-current"></span>
                </span>
              </a>
            </div>

            <div className="border-t border-slate-800 bg-gradient-to-b from-slate-900 to-slate-950 p-6 sm:p-7">
              <h3 className="text-xl sm:text-2xl font-bold text-white">Different Faces. One Humanity.</h3>
              <p className="mt-3 leading-relaxed text-slate-300">
                The people and relationships at the heart of BirthdayMessaging.io and the BM Connect ecosystem.
              </p>
              <p className="mt-4 text-xs sm:text-sm font-semibold text-sky-400">
                Click the plus icon or image to view it full size.
              </p>
            </div>
          </div>

        </div>

        {/* In-page image viewer: the website remains open behind the overlay */}
        <div id="showcase-coin-viewer"
             className="fixed inset-0 z-[9999] hidden items-center justify-center bg-black/95 p-4 target:flex sm:p-8"
             role="dialog"
             aria-modal="true"
             aria-label="Full-size BM Alpha coin image">
          <a href="#showcase-images"
             className="absolute inset-0 cursor-default"
             aria-label="Close image viewer"></a>
          <a href="#showcase-images"
             className="absolute right-4 top-4 z-20 flex h-12 w-12 items-center justify-center rounded-full border border-white/40 bg-slate-900 text-3xl leading-none text-white hover:bg-slate-700"
             aria-label="Close image viewer">×</a>
          <img
            src="https://res.cloudinary.com/gg3hylnv/image/upload/v1792532111/image_93eb6f_4K.png"
            alt="BM Alpha commemorative copper coin, full size"
            className="pointer-events-none relative z-10 max-h-[88vh] max-w-[95vw] object-contain"
          />
        </div>

        <div id="showcase-community-viewer"
             className="fixed inset-0 z-[9999] hidden items-center justify-center bg-black/95 p-4 target:flex sm:p-8"
             role="dialog"
             aria-modal="true"
             aria-label="Full-size BM Connect community image">
          <a href="#showcase-images"
             className="absolute inset-0 cursor-default"
             aria-label="Close image viewer"></a>
          <a href="#showcase-images"
             className="absolute right-4 top-4 z-20 flex h-12 w-12 items-center justify-center rounded-full border border-white/40 bg-slate-900 text-3xl leading-none text-white hover:bg-slate-700"
             aria-label="Close image viewer">×</a>
          <img
            src="https://res.cloudinary.com/gg3hylnv/image/upload/v1792532072/image_116649_4K_1.jpg"
            alt="BM Connect community artwork, full size"
            className="pointer-events-none relative z-10 max-h-[88vh] max-w-[95vw] object-contain"
          />
        </div>

        {/* 3 Pillars Cards */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-20">
          {pillars.map((pillar) => (
            <GlassCard key={pillar.id} gradientBorder={true} className="flex flex-col justify-between">
              <div>
                <div className="flex items-center justify-between mb-4">
                  <Badge variant={pillar.id === 'alpha' ? 'tangerine' : pillar.id === 'beta' ? 'sky' : 'neutral'}>
                    {pillar.badge}
                  </Badge>
                  <span className="text-xs font-mono text-slate-400">{pillar.colors}</span>
                </div>

                <div className="flex items-center gap-3 mb-2">
                  <div className="w-10 h-10 rounded-xl bg-gradient-to-tr from-orange-500 to-amber-600 flex items-center justify-center text-white font-black text-lg shadow-md">
                    {pillar.code[0]}
                  </div>
                  <div>
                    <h3 className="text-xl font-bold text-white">{pillar.code}</h3>
                    <span className="text-xs font-mono text-orange-300 font-semibold">{pillar.title}</span>
                  </div>
                </div>

                <p className="text-xs font-medium italic text-sky-300 mt-2">
                  "{pillar.tagline}"
                </p>

                <p className="text-xs text-slate-300 mt-3 leading-relaxed">
                  {pillar.description}
                </p>

                <div className="mt-4 p-3 rounded-xl bg-slate-950 border border-slate-800 text-[11px] font-mono text-slate-300">
                  <span className="text-orange-400 font-bold block mb-1">Engraved Motto:</span>
                  {pillar.motto}
                </div>
              </div>

              <div className="mt-6 pt-3 border-t border-slate-800/80 flex items-center justify-between text-xs font-mono">
                <span className="text-slate-400">Ecosystem Role:</span>
                <span className="font-bold text-sky-400">{pillar.role}</span>
              </div>
            </GlassCard>
          ))}
        </div>

        {/* What Investors Get (Material & Non-Material Rewards) */}
        <div className="mb-20">
          <SectionHeading
            badgeText="Investor & Buyer Benefits"
            badgeVariant="tangerine"
            title="What You Get When You"
            gradientTitle="Invest & Buy Tokens"
            subtitle="We reward our community with a blend of high-value tangible physical assets and exclusive digital ecosystem privileges."
          />

          {/* Tab Controls: Material vs Non-Material */}
          <div className="flex justify-center mb-10">
            <div className="p-1.5 rounded-2xl bg-slate-900 border border-slate-800 inline-flex gap-2">
              <button
                onClick={() => setActiveTab('material')}
                className={`px-6 py-2.5 rounded-xl text-xs sm:text-sm font-bold transition-all cursor-pointer flex items-center gap-2 ${
                  activeTab === 'material'
                    ? 'bg-orange-600 text-white shadow-lg shadow-orange-600/30'
                    : 'text-slate-400 hover:text-white'
                }`}
              >
                <Package className="w-4 h-4" />
                <span>Material Rewards (Physical & Tangible)</span>
              </button>
              <button
                onClick={() => setActiveTab('non-material')}
                className={`px-6 py-2.5 rounded-xl text-xs sm:text-sm font-bold transition-all cursor-pointer flex items-center gap-2 ${
                  activeTab === 'non-material'
                    ? 'bg-sky-600 text-white shadow-lg shadow-sky-600/30'
                    : 'text-slate-400 hover:text-white'
                }`}
              >
                <Award className="w-4 h-4" />
                <span>Non-Material Rewards (Privileges & Roles)</span>
              </button>
            </div>
          </div>

          {/* Tab Content Display */}
          <AnimatePresence mode="wait">
            {activeTab === 'material' ? (
              <motion.div
                key="material"
                initial={{ opacity: 0, y: 15 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, y: -15 }}
                transition={{ duration: 0.3 }}
                className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"
              >
                <GlassCard className="flex flex-col justify-between">
                  <div>
                    <div className="w-12 h-12 rounded-2xl bg-orange-600/20 border border-orange-500/40 flex items-center justify-center text-orange-400 mb-4">
                      <Coins className="w-6 h-6" />
                    </div>
                    <h4 className="text-base font-bold text-white">Minted Physical Coins</h4>
                    <p className="text-xs text-slate-400 mt-2 leading-relaxed">
                      Heavyweight solid antique bronze/gold physical commemorative coins (Alpha, Beta, Gamma) delivered worldwide with engraved serial numbers.
                    </p>
                  </div>
                  <div className="mt-4 pt-3 border-t border-slate-800 text-[11px] font-mono text-orange-300">
                    Shipped directly to qualified buyers
                  </div>
                </GlassCard>

                <GlassCard className="flex flex-col justify-between">
                  <div>
                    <div className="w-12 h-12 rounded-2xl bg-amber-600/20 border border-amber-500/40 flex items-center justify-center text-amber-400 mb-4">
                      <Zap className="w-6 h-6" />
                    </div>
                    <h4 className="text-base font-bold text-white">Lifetime MicroApp Pass</h4>
                    <p className="text-xs text-slate-400 mt-2 leading-relaxed">
                      Permanent $0 access pass to all 23 US$17 marketing MicroApps in our store plus future tools without recurring monthly fees.
                    </p>
                  </div>
                  <div className="mt-4 pt-3 border-t border-slate-800 text-[11px] font-mono text-amber-300">
                    Worth $391+ in immediate software value
                  </div>
                </GlassCard>

                <GlassCard className="flex flex-col justify-between">
                  <div>
                    <div className="w-12 h-12 rounded-2xl bg-sky-600/20 border border-sky-500/40 flex items-center justify-center text-sky-400 mb-4">
                      <Flame className="w-6 h-6" />
                    </div>
                    <h4 className="text-base font-bold text-white">SaaS Revenue Buybacks</h4>
                    <p className="text-xs text-slate-400 mt-2 leading-relaxed">
                      Smart-contract automated token buybacks funded directly by subscription profits from BirthdayMessaging 2.0 & MicroApps.
                    </p>
                  </div>
                  <div className="mt-4 pt-3 border-t border-slate-800 text-[11px] font-mono text-sky-300">
                    Direct software revenue token sink
                  </div>
                </GlassCard>

                <GlassCard className="flex flex-col justify-between">
                  <div>
                    <div className="w-12 h-12 rounded-2xl bg-emerald-600/20 border border-emerald-500/40 flex items-center justify-center text-emerald-400 mb-4">
                      <Package className="w-6 h-6" />
                    </div>
                    <h4 className="text-base font-bold text-white">Founders Swag Box</h4>
                    <p className="text-xs text-slate-400 mt-2 leading-relaxed">
                      Custom physical team hoodie, metal hardware wallet sleeve, and signed certificate of early backing from the team.
                    </p>
                  </div>
                  <div className="mt-4 pt-3 border-t border-slate-800 text-[11px] font-mono text-emerald-300">
                    Whale & Guardian Tier Perks
                  </div>
                </GlassCard>
              </motion.div>
            ) : (
              <motion.div
                key="non-material"
                initial={{ opacity: 0, y: 15 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, y: -15 }}
                transition={{ duration: 0.3 }}
                className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"
              >
                <GlassCard className="flex flex-col justify-between">
                  <div>
                    <div className="w-12 h-12 rounded-2xl bg-sky-600/20 border border-sky-500/40 flex items-center justify-center text-sky-400 mb-4">
                      <Crown className="w-6 h-6" />
                    </div>
                    <h4 className="text-base font-bold text-white">VIP Discord & Telegram</h4>
                    <p className="text-xs text-slate-400 mt-2 leading-relaxed">
                      Exclusive VIP founder roles, direct chat access with lead developers, private alpha leaks, and priority feature suggestions.
                    </p>
                  </div>
                  <div className="mt-4 pt-3 border-t border-slate-800 text-[11px] font-mono text-sky-300">
                    Direct access to team
                  </div>
                </GlassCard>

                <GlassCard className="flex flex-col justify-between">
                  <div>
                    <div className="w-12 h-12 rounded-2xl bg-orange-600/20 border border-orange-500/40 flex items-center justify-center text-orange-400 mb-4">
                      <Lock className="w-6 h-6" />
                    </div>
                    <h4 className="text-base font-bold text-white">Private Beta Testing</h4>
                    <p className="text-xs text-slate-400 mt-2 leading-relaxed">
                      First-in-line access to test new software releases across all 30+ core platforms, web miners, and CRMs before public launch.
                    </p>
                  </div>
                  <div className="mt-4 pt-3 border-t border-slate-800 text-[11px] font-mono text-orange-300">
                    Early adopter advantage
                  </div>
                </GlassCard>

                <GlassCard className="flex flex-col justify-between">
                  <div>
                    <div className="w-12 h-12 rounded-2xl bg-amber-600/20 border border-amber-500/40 flex items-center justify-center text-amber-400 mb-4">
                      <Star className="w-6 h-6" />
                    </div>
                    <h4 className="text-base font-bold text-white">On-Chain Founder Wall</h4>
                    <p className="text-xs text-slate-400 mt-2 leading-relaxed">
                      Permanent, immutable inscription of your wallet address or handle on the BM Connect On-Chain Public Hall of Fame.
                    </p>
                  </div>
                  <div className="mt-4 pt-3 border-t border-slate-800 text-[11px] font-mono text-amber-300">
                    Forever recorded on blockchain
                  </div>
                </GlassCard>

                <GlassCard className="flex flex-col justify-between">
                  <div>
                    <div className="w-12 h-12 rounded-2xl bg-purple-600/20 border border-purple-500/40 flex items-center justify-center text-purple-400 mb-4">
                      <Vote className="w-6 h-6" />
                    </div>
                    <h4 className="text-base font-bold text-white">Treasury Governance Rights</h4>
                    <p className="text-xs text-slate-400 mt-2 leading-relaxed">
                      Vote on treasury capital deployment, software acquisitions, developer grant approvals, and quarterly burn schedules.
                    </p>
                  </div>
                  <div className="mt-4 pt-3 border-t border-slate-800 text-[11px] font-mono text-purple-300">
                    True community control
                  </div>
                </GlassCard>
              </motion.div>
            )}
          </AnimatePresence>
        </div>

        {/* Investment Tiers Comparison */}
        <div className="mb-12">
          <SectionHeading
            badgeText="Presale Contribution Tiers"
            badgeVariant="sky"
            title="Explore Preset Launch Tiers"
            gradientTitle="November 18th, 10 PM GMT Allotments"
            subtitle="Choose a preset tier below or type any custom dollar amount above to reserve your $SX tokens."
          />

          <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-5">
            {rewardTiers.map((tier, idx) => (
              <GlassCard
                key={tier.name}
                gradientBorder={tier.highlight}
                className={`flex flex-col justify-between relative ${
                  tier.highlight ? 'ring-2 ring-orange-500/50 bg-slate-900/90' : ''
                }`}
              >
                {tier.badgeText && (
                  <div className={`absolute -top-3 left-1/2 -translate-x-1/2 text-white font-mono text-[9px] font-extrabold uppercase tracking-widest px-2.5 py-0.5 rounded-full shadow-md whitespace-nowrap ${
                    tier.highlight ? 'bg-gradient-to-r from-orange-500 to-amber-500' : 'bg-slate-800 border border-slate-700 text-slate-300'
                  }`}>
                    {tier.badgeText}
                  </div>
                )}

                <div>
                  <h3 className="text-base font-bold text-white mt-2">{tier.name}</h3>
                  <div className="text-2xl font-extrabold text-orange-400 font-mono mt-1">
                    {tier.price}
                  </div>
                  <span className="text-[11px] font-mono text-sky-400 font-semibold block mt-0.5">
                    {tier.tokens}
                  </span>

                  <div className="mt-5">
                    <span className="text-[10px] font-mono uppercase tracking-widest text-slate-400 font-bold block mb-1.5">
                      📦 Material Perks:
                    </span>
                    <ul className="flex flex-col gap-1.5">
                      {tier.materialRewards.map((m, i) => (
                        <li key={i} className="text-[11px] text-slate-300 flex items-start gap-1.5 leading-snug">
                          <CheckCircle2 className="w-3 h-3 text-orange-400 flex-shrink-0 mt-0.5" />
                          <span>{m}</span>
                        </li>
                      ))}
                    </ul>
                  </div>

                  <div className="mt-3 pt-3 border-t border-slate-800">
                    <span className="text-[10px] font-mono uppercase tracking-widest text-slate-400 font-bold block mb-1.5">
                      👑 Non-Material Perks:
                    </span>
                    <ul className="flex flex-col gap-1.5">
                      {tier.nonMaterialRewards.map((nm, i) => (
                        <li key={i} className="text-[11px] text-slate-300 flex items-start gap-1.5 leading-snug">
                          <CheckCircle2 className="w-3 h-3 text-sky-400 flex-shrink-0 mt-0.5" />
                          <span>{nm}</span>
                        </li>
                      ))}
                    </ul>
                  </div>
                </div>

                <div className="mt-6">
                  <Button
                    variant={tier.highlight ? 'glow' : 'outline'}
                    size="sm"
                    className="w-full text-xs"
                    onClick={onOpenWaitlist}
                    icon={<ArrowRight className="w-3 h-3" />}
                  >
                    Select & Reserve
                  </Button>
                </div>
              </GlassCard>
            ))}
          </div>
        </div>

        {/* Footer Guarantee Box */}
        <div className="p-6 rounded-2xl bg-slate-900/80 border border-slate-800 flex flex-col sm:flex-row items-center justify-between gap-4">
          <div className="flex items-center gap-3">
            <ShieldCheck className="w-6 h-6 text-sky-400 flex-shrink-0" />
            <p className="text-xs text-slate-300">
              <strong>100% Micro-Friendly & Transparent:</strong> Everyone is welcome regardless of contribution size ($1 to $10,000+). Smart contracts audited on-chain. Liquidity locked permanently upon the November 18, 10 PM GMT launch.
            </p>
          </div>
          <Button
            variant="outline"
            size="sm"
            onClick={onOpenWaitlist}
            className="flex-shrink-0"
          >
            Join Launch Whitelist →
          </Button>
        </div>

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