import React from 'react';
import { createRoot } from 'react-dom/client';
import { 
  Send
} from 'lucide-react';

const App: React.FC = () => {
  // Using the filenames mentioned in the user's message
  const LOGO_URL = "Bye Bye Maduro.png"; 
  const MEME_URL = "meme.png";

  return (
    <div className="min-h-screen relative bg-[#050505]">
      {/* Background Floating Elements */}
      <div className="fixed inset-0 pointer-events-none overflow-hidden z-0 select-none">
        <span className="absolute text-4xl opacity-20 top-20 left-[10%] animate-float" style={{ animationDelay: '0.1s' }}>👋</span>
        <span className="absolute text-4xl opacity-20 top-40 right-[15%] animate-float" style={{ animationDelay: '0.3s' }}>🚀</span>
        <span className="absolute text-4xl opacity-20 top-60 left-[5%] animate-float" style={{ animationDelay: '0.5s' }}>😂</span>
        <span className="absolute text-4xl opacity-20 bottom-40 right-[10%] animate-float" style={{ animationDelay: '0.2s' }}>🔥</span>
        <span className="absolute text-4xl opacity-20 bottom-20 left-[20%] animate-float" style={{ animationDelay: '0.4s' }}>✨</span>
        <span className="absolute text-4xl opacity-20 top-32 right-[25%] animate-float" style={{ animationDelay: '0.6s' }}>🎉</span>
      </div>

      <main className="relative z-10">
        {/* Hero Section */}
        <section className="min-h-screen flex flex-col items-center justify-center relative overflow-hidden px-4 py-12">
          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-yellow-500/10 rounded-full blur-[120px] pointer-events-none"></div>
          
          <div className="text-center z-10 max-w-4xl mx-auto flex flex-col items-center">
            {/* Header Logo Badge */}
            <div className="mb-6">
              <img 
                src={LOGO_URL} 
                alt="Bye Bye Maduro Badge" 
                className="w-32 h-32 md:w-40 md:h-40 mx-auto drop-shadow-2xl object-contain"
              />
            </div>
            
            <h1 className="text-5xl md:text-8xl font-black font-display mb-6 tracking-tight">
              <span className="text-[#F7D117]">Bye Bye</span> <span className="text-white">Maduro</span>
            </h1>
            
            <p className="text-xl md:text-2xl text-gray-300 max-w-2xl mx-auto mb-10 font-medium">
              A meme token celebrating freedom, internet culture and historic moments. 🚀
            </p>
            
            <div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-16">
              <button className="bg-[#F7D117] text-black font-black py-4 px-10 rounded-xl text-lg flex items-center gap-2 hover:scale-105 transition-all animate-pulse-glow shadow-lg h-14">
                🔥 Buy $BYEBYE
              </button>
              <a href="https://t.me/byebyemaduro" target="_blank" rel="noopener noreferrer" className="border-2 border-white/30 bg-transparent text-white font-black py-4 px-10 rounded-xl text-lg flex items-center gap-2 hover:bg-white/10 hover:border-white/50 hover:scale-105 transition-all h-14">
                <Send size={20} /> Join Telegram
              </a>
            </div>

            {/* Large Moment Illustration */}
            <div className="w-full max-w-xl mx-auto mb-8">
              <img 
                src={MEME_URL} 
                alt="Trump leading Maduro Illustration" 
                className="w-full drop-shadow-2xl rounded-2xl animate-float"
              />
            </div>

            <div className="flex justify-center gap-8 text-gray-500 text-xs md:text-sm font-bold uppercase tracking-widest mt-4">
              <span className="flex items-center gap-2">🎭 100% Meme</span>
              <span className="flex items-center gap-2">🤝 Community Driven</span>
              <span className="flex items-center gap-2">⚡ No Promises</span>
            </div>
          </div>
        </section>

        {/* What Section */}
        <section id="what" className="py-20 px-4">
          <div className="container max-w-6xl mx-auto">
            <div className="text-center mb-12">
              <h2 className="text-3xl md:text-5xl font-bold font-display mb-4">
                <span className="mr-3">🤔</span>What is Bye Bye Maduro?
              </h2>
              <p className="text-lg text-gray-400 max-w-2xl mx-auto">Just a meme. Nothing more, nothing less.</p>
            </div>

            <div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
              <div className="glass-card p-8 transition-all duration-300 hover:scale-105 hover:border-yellow-500/30">
                <div className="text-4xl mb-4">🎭</div>
                <h3 className="text-xl font-bold font-display mb-3 text-[#F7D117]">It's a Memecoin</h3>
                <p className="text-gray-400">A token created purely for entertainment, satire, and internet culture. Born from a historic moment that the internet couldn't stop talking about.</p>
              </div>
              <div className="glass-card p-8 transition-all duration-300 hover:scale-105 hover:border-yellow-500/30">
                <div className="text-4xl mb-4">🌐</div>
                <h3 className="text-xl font-bold font-display mb-3 text-[#0088cc]">Internet Culture</h3>
                <p className="text-gray-400">This is not a political statement. It's the internet doing what it does best — turning world events into memes. Pure zoeira, nothing more.</p>
              </div>
              <div className="glass-card p-8 transition-all duration-300 hover:scale-105 hover:border-yellow-500/30">
                <div className="text-4xl mb-4">🚫</div>
                <h3 className="text-xl font-bold font-display mb-3 text-red-600">No Utility</h3>
                <p className="text-gray-400">Let's be real — there's no technical utility here. No staking, no rewards, no ecosystem. Just vibes and community energy.</p>
              </div>
              <div className="glass-card p-8 transition-all duration-300 hover:scale-105 hover:border-yellow-500/30">
                <div className="text-4xl mb-4">😂</div>
                <h3 className="text-xl font-bold font-display mb-3 text-orange-500">Pure Entertainment</h3>
                <p className="text-gray-400">If you're looking for the next 100x investment, this isn't it. But if you want to own a piece of internet history? Welcome aboard. 👋</p>
              </div>
            </div>
          </div>
        </section>

        {/* History Section */}
        <section id="history" className="py-20 px-4 bg-[#080808]">
          <div className="container max-w-6xl mx-auto">
            <div className="text-center mb-12">
              <h2 className="text-3xl md:text-5xl font-bold font-display mb-4">
                <span className="mr-3">📰</span>The Historic Moment
              </h2>
              <p className="text-lg text-gray-400 max-w-2xl mx-auto">The event that inspired the meme</p>
            </div>
            
            <div className="max-w-4xl mx-auto">
              <div className="flex flex-col items-center gap-12">
                <div className="relative w-full max-w-md">
                  <div className="absolute inset-0 bg-yellow-500/20 rounded-3xl blur-xl scale-110"></div>
                  <img 
                    src={MEME_URL} 
                    alt="Maduro Capture Illustration" 
                    className="relative w-full rounded-3xl shadow-2xl"
                  />
                </div>
                
                <div className="bg-[#111] border border-white/10 rounded-2xl p-8 md:p-12 text-center max-w-2xl">
                  <h3 className="text-2xl font-bold text-white mb-6 flex items-center justify-center gap-2">📅 Historical Context</h3>
                  <p className="text-gray-400 leading-relaxed text-lg font-medium">
                    In early 2025, former Venezuelan President Nicolás Maduro was captured in a U.S.-led operation. The apprehension was carried out swiftly and without incident, marking the end of his controversial leadership. The event generated massive international attention and sparked reactions across the globe, becoming one of the most discussed moments on social media.
                  </p>
                  <p className="text-gray-500 text-sm mt-6 italic">
                    This meme token was created purely as internet culture satire inspired by this historic moment. It does not represent any political position or endorsement.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Why Section */}
        <section id="why" className="py-20 px-4">
          <div className="container max-w-6xl mx-auto">
            <div className="text-center mb-12">
              <h2 className="text-3xl md:text-5xl font-bold font-display mb-4">
                <span className="mr-3">💡</span>Why a Memecoin?
              </h2>
              <p className="text-lg text-gray-400 max-w-2xl mx-auto">Because the internet never sleeps.</p>
            </div>
            
            <div className="max-w-3xl mx-auto space-y-6">
              <div className="glass-card p-8 border-l-4 border-l-yellow-500">
                <div className="flex items-start gap-4">
                  <span className="text-3xl">🌍</span>
                  <div>
                    <h3 className="text-xl font-bold font-display mb-2">History Happens in Real-Time</h3>
                    <p className="text-gray-400">The internet reacts to history as it unfolds. Memes are how we process, celebrate, and sometimes mock the moments that define our era.</p>
                  </div>
                </div>
              </div>
              <div className="glass-card p-8 border-l-4 border-l-[#0088cc]">
                <div className="flex items-start gap-4">
                  <span className="text-3xl">🎨</span>
                  <div>
                    <h3 className="text-xl font-bold font-display mb-2">Memes = Modern Expression</h3>
                    <p className="text-gray-400">From cave paintings to tweets, humans have always found ways to express collective feelings. Memecoins are just the crypto-native version.</p>
                  </div>
                </div>
              </div>
              <div className="glass-card p-8 border-l-4 border-l-red-600">
                <div className="flex items-start gap-4">
                  <span className="text-3xl">🎫</span>
                  <div>
                    <h3 className="text-xl font-bold font-display mb-2">Participation Tokens</h3>
                    <p className="text-gray-400">Some people collect stamps, some collect NFTs. Others like to hold a token that represents a moment they witnessed. That's all this is.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Fair Project Section */}
        <section id="fair" className="py-20 px-4 bg-white/[0.01]">
          <div className="container max-w-6xl mx-auto">
            <div className="text-center mb-12">
              <h2 className="text-3xl md:text-5xl font-bold font-display mb-4">
                <span className="mr-3">✨</span>Fair & Free Project
              </h2>
              <p className="text-lg text-gray-400 max-w-2xl mx-auto">No tricks, no games. Just transparent meme energy.</p>
            </div>
            
            <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
              {[
                { emoji: "🚫", title: "No Team Wallet", desc: "The creator doesn't hold a massive bag. No rug pull setup here." },
                { emoji: "🤝", title: "Community Owned", desc: "100% driven by the community. You are the project." },
                { emoji: "⚖️", title: "No Manipulation", desc: "No market making, no fake pumps, no coordinated schemes." },
                { emoji: "🔓", title: "Open & Transparent", desc: "Everything is on-chain. Verify, don't trust." },
                { emoji: "🏛️", title: "No Company", desc: "There's no entity behind this. No office, no employees, no CEO." },
                { emoji: "🎭", title: "Pure Meme", desc: "What you see is what you get. A meme token, nothing else." }
              ].map((item, i) => (
                <div key={i} className="glass-card p-8 text-center hover:scale-105 transition-all">
                  <div className="text-5xl mb-6">{item.emoji}</div>
                  <h3 className="text-xl font-bold font-display mb-3">{item.title}</h3>
                  <p className="text-gray-400 text-sm leading-relaxed">{item.desc}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Warning Section */}
        <section id="warning" className="py-20 px-4">
          <div className="container max-w-6xl mx-auto text-center">
            <h2 className="text-3xl md:text-5xl font-bold font-display mb-8 text-yellow-500">
              <span className="mr-3">⚠️</span>Speculation & Responsibility
            </h2>
            <div className="max-w-3xl mx-auto glass-card p-10 border-2 border-yellow-500/30">
              <div className="text-7xl mb-8">🎰</div>
              <p className="text-2xl font-display font-bold text-yellow-500 mb-6 uppercase tracking-wider">Memecoins are NOT investments.</p>
              <p className="text-gray-300 text-lg mb-10 font-medium">
                They are highly volatile, speculative, and can go to zero at any moment. There is no team working to "deliver value." There is no product.
              </p>
              <div className="grid sm:grid-cols-2 gap-6 text-left">
                <div className="bg-white/5 p-4 rounded-xl">
                  <p className="font-bold flex items-center gap-2 mb-2"><span className="text-xl">💸</span> Only spend what you can lose</p>
                  <p className="text-sm text-gray-500">If it hurts to lose it, don't buy it.</p>
                </div>
                <div className="bg-white/5 p-4 rounded-xl">
                  <p className="font-bold flex items-center gap-2 mb-2"><span className="text-xl">🎢</span> Expect extreme volatility</p>
                  <p className="text-sm text-gray-500">100% up, 99% down — it's all possible.</p>
                </div>
                <div className="bg-white/5 p-4 rounded-xl">
                  <p className="font-bold flex items-center gap-2 mb-2"><span className="text-xl">🧠</span> DYOR — Always</p>
                  <p className="text-sm text-gray-500">Never trust anyone blindly, including this page.</p>
                </div>
                <div className="bg-white/5 p-4 rounded-xl">
                  <p className="font-bold flex items-center gap-2 mb-2"><span className="text-xl">🎭</span> Buy for fun, not profit</p>
                  <p className="text-sm text-gray-500">If you're here for gains, you're in the wrong place.</p>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Roadmap Section */}
        <section id="roadmap" className="py-20 px-4 text-center">
          <div className="container max-w-4xl mx-auto">
            <div className="flex justify-center gap-4 mb-8">
              <span className="text-8xl">🗺️</span>
              <span className="text-8xl">❌</span>
            </div>
            <h2 className="text-4xl md:text-7xl font-black font-display mb-10 leading-tight">
              No Roadmap. <br/><span className="text-[#F7D117]">No Promises.</span>
            </h2>
            <div className="glass-card p-10 max-w-xl mx-auto text-left inline-block w-full">
              <div className="space-y-4 text-lg text-gray-400 font-medium">
                <p className="flex items-center gap-3">❌ No roadmap</p>
                <p className="flex items-center gap-3">❌ No utility</p>
                <p className="flex items-center gap-3">❌ No fake future promises</p>
                <p className="flex items-center gap-3">❌ No "revolutionary technology"</p>
                <p className="flex items-center gap-3">❌ No ecosystem announcements</p>
                <div className="pt-6 border-t border-white/10 text-white font-black text-2xl flex items-center gap-3">
                  ✅ Just memes & vibes 😎
                </div>
              </div>
            </div>
            <p className="mt-12 text-gray-400 text-xl font-medium">What happens next? We have no idea. And that's the point. 🤷</p>
          </div>
        </section>

        {/* Community Section */}
        <section id="community" className="py-20 px-4">
          <div className="container max-w-6xl mx-auto text-center">
            <h2 className="text-3xl md:text-5xl font-bold font-display mb-12">
              <span className="mr-3">🌍</span>Community
            </h2>
            <div className="max-w-3xl mx-auto glass-card p-12">
              <div className="text-7xl mb-8">✈️</div>
              <h3 className="text-3xl font-bold mb-6">Telegram Only</h3>
              <p className="text-gray-400 text-lg mb-10 font-medium">
                We're keeping it simple. No Twitter drama, no Instagram posts, no Discord servers. Just one Telegram group where the community can chat, share memes, and vibe.
              </p>
              <div className="flex justify-center gap-10 mb-10">
                <div className="text-center"><span className="text-4xl">🚫</span><p className="text-gray-500 text-sm mt-2 font-black uppercase">No Twitter/X</p></div>
                <div className="text-center"><span className="text-4xl">🚫</span><p className="text-gray-500 text-sm mt-2 font-black uppercase">No Instagram</p></div>
                <div className="text-center"><span className="text-4xl">✅</span><p className="text-green-500 text-sm mt-2 font-black uppercase font-display">Only Telegram</p></div>
              </div>
              <a href="https://t.me/byebyemaduro" target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-3 bg-[#0088cc] text-white font-black py-5 px-10 rounded-2xl text-xl hover:scale-105 transition-all shadow-xl">
                <Send size={24} /> Join Telegram Group
              </a>
            </div>
          </div>
        </section>

        {/* Legal Disclaimer */}
        <section id="disclaimer" className="py-20 px-4">
          <div className="container max-w-4xl mx-auto">
            <div className="glass-card p-10 border border-white/5">
              <div className="flex items-center gap-4 mb-8">
                <span className="text-4xl">📜</span>
                <h2 className="text-3xl font-bold font-display">Legal Disclaimer</h2>
              </div>
              <div className="space-y-6 text-gray-500 text-sm leading-relaxed font-medium">
                <p><strong className="text-gray-300">$BYEBYE is a meme token created purely for entertainment purposes.</strong> It has no intrinsic value, no utility, and no promise of future development. This is not a security, not an investment vehicle, and should not be treated as such.</p>
                <p><strong className="text-gray-300">This is NOT financial advice.</strong> Nothing on this website should be construed as investment advice, financial guidance, or a recommendation to buy, sell, or hold any cryptocurrency. Always do your own research (DYOR) and consult with qualified professionals before making any financial decisions.</p>
                <p><strong className="text-gray-300">No guarantees of any kind.</strong> There is no guarantee that this token will retain any value, increase in value, or be tradeable in the future. The crypto market is highly volatile, and you can lose 100% of your investment.</p>
                <p><strong className="text-gray-300">Full responsibility lies with the buyer.</strong> By purchasing, holding, or trading $BYEBYE, you acknowledge that you are doing so at your own risk and take full responsibility for any outcomes, including total loss of funds.</p>
                <p><strong className="text-gray-300">No company, team, or entity.</strong> There is no registered company, no team, no employees, and no entity behind this project. The creator does not control the market and cannot influence the token's price or liquidity.</p>
                <p className="text-xs pt-8 border-t border-white/5 opacity-50">By accessing this website and interacting with the $BYEBYE token, you agree to these terms and acknowledge that you have read and understood this disclaimer in its entirety.</p>
              </div>
            </div>
          </div>
        </section>

        {/* Footer */}
        <footer className="py-12 px-4 border-t border-white/5">
          <div className="container max-w-6xl mx-auto">
            <div className="flex flex-col md:flex-row items-center justify-between gap-8">
              <div className="flex items-center gap-3">
                <span className="text-4xl animate-wave">👋</span>
                <span className="text-2xl font-black font-display tracking-tight">Bye Bye Maduro</span>
              </div>
              <p className="text-gray-500 text-center font-bold">A meme token. Nothing more, nothing less. 🎭</p>
              <div className="flex items-center gap-6 text-gray-600 text-sm font-black">
                <span>2025</span>
                <span>•</span>
                <span>No Rights Reserved 😂</span>
              </div>
            </div>
          </div>
        </footer>
      </main>
    </div>
  );
};

const rootElement = document.getElementById('root');
if (rootElement) {
  createRoot(rootElement).render(<App />);
}