BM-Alpha-Connect/src/components/HeroSection.tsx

import React from 'react';
import { Rocket, MessagesSquare, Sparkles, ShieldCheck, Flame, ArrowRight, TrendingUp } from 'lucide-react';
import { Countdown } from './Countdown';
import { YOUR_BUY_LINK, YOUR_DISCORD_URL } from '../config';
import { triggerBirthdayConfetti } from '../utils/confetti';
import coinImg from '../assets/images/bm_connect_coin_1787085516443.jpg';

export const HeroSection: React.FC = () => {
  const handleBuyClick = () => {
    triggerBirthdayConfetti();
  };

  return (
    <section
      id="hero"
      className="relative min-h-screen pt-32 pb-20 sm:pt-36 sm:pb-28 flex items-center justify-center overflow-hidden"
    >
      {/* Background Gradients and Glowing Ambient Orbs */}
      <div className="absolute top-1/4 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] sm:w-[800px] h-[350px] bg-gradient-to-tr from-[#FF8C32]/20 via-transparent to-[#00D7FF]/20 blur-[140px] rounded-full pointer-events-none -z-10" />
      <div className="absolute top-1/3 -left-32 w-80 h-80 bg-[#FF8C32]/15 rounded-full blur-[110px] pointer-events-none -z-10" />
      <div className="absolute top-1/2 -right-32 w-80 h-80 bg-[#00D7FF]/15 rounded-full blur-[110px] pointer-events-none -z-10" />

      {/* Subtle grid lines */}
      <div className="absolute inset-0 bg-[linear-gradient(to_right,rgba(255,255,255,0.03)_1px,transparent_1px),linear-gradient(to_bottom,rgba(255,255,255,0.03)_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_40%,#000_70%,transparent_100%)] pointer-events-none -z-10" />

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full">
        <div className="flex flex-col items-center text-center">
          
          {/* Prominent Launch Badge */}
          <div
            id="hero-launch-badge"
            className="inline-flex items-center gap-2.5 px-4 py-1.5 rounded-full bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 shadow-sm dark:shadow-[0_0_20px_rgba(255,140,50,0.2)] backdrop-blur-md mb-8 animate-bounce duration-1000"
          >
            <span className="text-sm">🚀</span>
            <span className="font-display font-black text-xs tracking-widest text-[#00A6DB] dark:text-[#00D7FF]">
              OFFICIAL LAUNCH: OCTOBER 28, 2026 AT 10 PM GMT
            </span>
            <span className="inline-block w-2 h-2 rounded-full bg-[#FF8C32] animate-pulse" />
          </div>

          {/* Main Headline */}
          <h1
            id="hero-main-headline"
            className="font-display text-5xl sm:text-7xl lg:text-8xl font-black tracking-tighter leading-[1.02] max-w-5xl"
          >
            <span className="text-slate-900 dark:text-white">BM ALPHA </span>
            <span className="text-gradient-brand drop-shadow-[0_0_35px_rgba(255,140,50,0.35)]">
              IS HERE.
            </span>
          </h1>

          {/* Supporting Headline */}
          <p
            id="hero-supporting-headline"
            className="mt-6 text-xl sm:text-2xl lg:text-3xl font-bold text-slate-700 dark:text-gray-200 max-w-3xl leading-snug tracking-tight"
          >
            The community-powered meme coin from{' '}
            <span className="text-[#00A6DB] dark:text-[#00D7FF] font-extrabold">BirthdayMessaging</span>.
          </p>

          {/* Short Description */}
          <p
            id="hero-description"
            className="mt-4 text-base sm:text-lg text-slate-600 dark:text-gray-400 max-w-2xl font-medium"
          >
            Built for the community. Powered by memes. Launching October 28, 2026 at 10 PM GMT on Solana.
          </p>

          {/* Primary CTA Buttons */}
          <div className="mt-8 flex flex-col sm:flex-row items-center justify-center gap-4 w-full max-w-md">
            <a
              id="hero-buy-btn"
              href="#how-to-buy"
              onClick={handleBuyClick}
              className="w-full sm:w-auto flex-1 flex items-center justify-center gap-2.5 px-8 py-4 rounded-full font-display font-black text-sm text-black bg-[#FF8C32] hover:bg-[#E6761D] shadow-[0_0_25px_rgba(255,140,50,0.4)] hover:shadow-[0_0_35px_rgba(0,215,255,0.6)] transition-all duration-300 transform hover:-translate-y-0.5 active:scale-95"
            >
              <Rocket className="w-4 h-4 text-black" />
              <span>BUY BM ALPHA</span>
            </a>

            <a
              id="hero-community-btn"
              href={YOUR_DISCORD_URL}
              target="_blank"
              rel="noopener noreferrer"
              className="w-full sm:w-auto flex-1 flex items-center justify-center gap-2.5 px-8 py-4 rounded-full font-display font-bold text-sm text-slate-800 dark:text-white bg-white dark:bg-white/5 hover:bg-slate-100 dark:hover:bg-white/10 border border-slate-300 dark:border-white/10 hover:border-[#5865F2]/50 shadow-md dark:shadow-lg transition-all duration-300 transform hover:-translate-y-0.5"
            >
              <MessagesSquare className="w-4 h-4 text-[#5865F2]" />
              <span>JOIN DISCORD</span>
            </a>
          </div>

          {/* Launch Countdown Component */}
          <div className="mt-12 w-full max-w-xl">
            <Countdown />
          </div>

          {/* 3D Coin & Interactive Graphic Showcase */}
          <div className="mt-14 relative flex items-center justify-center w-full max-w-2xl">
            
            {/* Animated Ring 1 */}
            <div className="absolute w-[280px] sm:w-[380px] h-[280px] sm:h-[380px] rounded-full border border-dashed border-[#FF8C32]/40 dark:border-[#FF8C32]/30 animate-spin-slow pointer-events-none" />
            {/* Animated Ring 2 */}
            <div className="absolute w-[340px] sm:w-[460px] h-[340px] sm:h-[460px] rounded-full border border-[#00D7FF]/30 dark:border-[#00D7FF]/20 animate-spin-slow-reverse pointer-events-none" />

            {/* Glowing Coin Core */}
            <div className="relative group cursor-pointer" onClick={triggerBirthdayConfetti}>
              <div className="absolute inset-0 bg-gradient-to-r from-[#FF8C32] to-[#00D7FF] rounded-full blur-2xl opacity-50 dark:opacity-60 group-hover:opacity-80 dark:group-hover:opacity-90 transition-opacity duration-500 scale-95 group-hover:scale-105" />
              
              <div className="relative w-52 sm:w-64 h-52 sm:h-64 rounded-full p-2 bg-gradient-to-tr from-[#FF8C32] via-[#FFA843] to-[#00D7FF] shadow-[0_0_40px_rgba(255,140,50,0.35)] dark:shadow-[0_0_50px_rgba(255,140,50,0.4)] transform group-hover:scale-105 transition-all duration-500">
                <div className="w-full h-full rounded-full overflow-hidden bg-white dark:bg-[#0a0c14] border-4 border-slate-200 dark:border-[#161b2b] flex items-center justify-center relative">
                  <img
                    src={coinImg}
                    alt="BM Alpha Meme Coin Token 3D"
                    className="w-full h-full object-cover animate-[pulse_4s_ease-in-out_infinite]"
                  />
                  {/* Subtle hover overlay hint */}
                  <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 flex items-center justify-center transition-opacity">
                    <span className="px-3 py-1 rounded-full bg-[#FF8C32] text-black text-xs font-bold font-display shadow-lg">
                      🎉 Click for Hype!
                    </span>
                  </div>
                </div>
              </div>
            </div>

            {/* Floating Web3 Feature Chips */}
            <div className="hidden sm:flex absolute -left-6 top-1/4 items-center gap-2 px-3.5 py-2 rounded-xl bg-white/90 dark:bg-[#161b2b]/90 border border-slate-200 dark:border-white/10 backdrop-blur-md shadow-md dark:shadow-xl animate-bounce duration-1000">
              <Flame className="w-4 h-4 text-[#FF8C32]" />
              <span className="text-xs font-bold text-slate-800 dark:text-white font-display">0% Buy/Sell Tax</span>
            </div>

            <div className="hidden sm:flex absolute -right-6 top-1/3 items-center gap-2 px-3.5 py-2 rounded-xl bg-white/90 dark:bg-[#161b2b]/90 border border-slate-200 dark:border-white/10 backdrop-blur-md shadow-md dark:shadow-xl animate-bounce duration-1000 delay-300">
              <Sparkles className="w-4 h-4 text-[#00A6DB] dark:text-[#00D7FF]" />
              <span className="text-xs font-bold text-slate-800 dark:text-white font-display">Solana Ecosystem</span>
            </div>

            <div className="hidden sm:flex absolute left-8 bottom-4 items-center gap-2 px-3.5 py-2 rounded-xl bg-white/90 dark:bg-[#161b2b]/90 border border-slate-200 dark:border-white/10 backdrop-blur-md shadow-md dark:shadow-xl">
              <ShieldCheck className="w-4 h-4 text-emerald-500 dark:text-emerald-400" />
              <span className="text-xs font-bold text-slate-700 dark:text-gray-300 font-display">100% Community LP</span>
            </div>

            <div className="hidden sm:flex absolute right-8 bottom-2 items-center gap-2 px-3.5 py-2 rounded-xl bg-white/90 dark:bg-[#161b2b]/90 border border-slate-200 dark:border-white/10 backdrop-blur-md shadow-md dark:shadow-xl">
              <TrendingUp className="w-4 h-4 text-[#FF8C32]" />
              <span className="text-xs font-bold text-slate-800 dark:text-white font-display">10B Total Supply</span>
            </div>

          </div>

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