import React from 'react';
import { ThemeProvider } from './context/ThemeContext';
import { Navbar } from './components/Navbar';
import { HeroSection } from './components/HeroSection';
import { SocialSection } from './components/SocialSection';
import { WhySection } from './components/WhySection';
import { TokenSection } from './components/TokenSection';
import { HowToBuySection } from './components/HowToBuySection';
import { CommunityCTA } from './components/CommunityCTA';
import { Footer } from './components/Footer';

export default function App() {
  return (
    <ThemeProvider>
      <div className="min-h-screen bg-[#f8fafc] dark:bg-[#0a0c14] text-slate-900 dark:text-white selection:bg-[#FF8C32] selection:text-black flex flex-col relative overflow-x-hidden transition-colors duration-300">
        {/* Immersive UI Ambient Background & Lighting Lines */}
        <div className="fixed inset-0 pointer-events-none overflow-hidden -z-10 transition-opacity duration-500">
          <div className="absolute top-[-10%] left-[-10%] w-[45%] h-[45%] bg-[#FF8C32]/10 dark:bg-[#FF8C32]/15 blur-[140px] rounded-full" />
          <div className="absolute bottom-[-10%] right-[-10%] w-[50%] h-[50%] bg-[#00D7FF]/10 dark:bg-[#00D7FF]/15 blur-[160px] rounded-full" />
          <div className="absolute top-1/4 right-[15%] w-[350px] h-[350px] bg-[#00D7FF]/10 blur-[130px] rounded-full" />
          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[1200px] h-[1px] bg-gradient-to-r from-transparent via-slate-300/60 dark:via-white/10 to-transparent rotate-12" />
          <div className="absolute top-1/3 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[900px] h-[1px] bg-gradient-to-r from-transparent via-slate-300/40 dark:via-white/5 to-transparent -rotate-6" />
          <div className="absolute bottom-1/3 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[1000px] h-[1px] bg-gradient-to-r from-transparent via-[#FF8C32]/20 dark:via-[#FF8C32]/10 to-transparent rotate-3" />
        </div>

        {/* Sticky Navigation Header */}
        <Navbar />

        {/* Main Page Content Flow */}
        <main className="flex-1 relative z-10">
          {/* 1. Hero Section with Live Countdown & 3D Visual */}
          <HeroSection />

          {/* 2. Social & Community Hub Section */}
          <SocialSection />

          {/* 3. Why BM Alpha? (Concept & Solana feature cards) */}
          <WhySection />

          {/* 4. Token Information & Copy Contract Address Card */}
          <TokenSection />

          {/* 5. How To Buy (4-step Solana Guide & Swap Tool) */}
          <HowToBuySection />

          {/* 6. Final Community CTA Section (Tangerine -> Sky Blue Gradient) */}
          <CommunityCTA />
        </main>

        {/* 7. Footer with disclaimer & links */}
        <Footer />
      </div>
    </ThemeProvider>
  );
}
