import React, { useState, useEffect } from 'react';
import { Flame, Mail, ArrowRight, Sparkles, Globe, MessageSquare, Video } from 'lucide-react';

const globalStyles = `
  @keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0px); }
  }
  @keyframes pulseGlow {
    0% { box-shadow: 0 0 0 0 rgba(65, 143, 222, 0.4); }
    70% { box-shadow: 0 0 0 20px rgba(65, 143, 222, 0); }
    100% { box-shadow: 0 0 0 0 rgba(65, 143, 222, 0); }
  }
  .animate-float {
    animation: float 6s ease-in-out infinite;
  }
  .animate-float-delayed {
    animation: float 6s ease-in-out 3s infinite;
  }
  .glass-panel {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
`;

export default function LandingPage() {
  const [email, setEmail] = useState('');
  const [submitted, setSubmitted] = useState(false);
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  const handleSubmit = (e) => {
    e.preventDefault();
    if (email) {
      // Here you would normally send the email to your backend (e.g., Firebase, Supabase)
      setSubmitted(true);
      setEmail('');
    }
  };

  return (
    <div className="min-h-screen bg-slate-950 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-blue-900/40 via-slate-950 to-black text-white font-sans overflow-hidden relative flex flex-col justify-center items-center selection:bg-[#418FDE] selection:text-white p-4">
      <style>{globalStyles}</style>

      {/* Background Ambient Glows */}
      <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-[#418FDE] rounded-full mix-blend-screen filter blur-[128px] opacity-20 animate-pulse"></div>
      <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-blue-600 rounded-full mix-blend-screen filter blur-[128px] opacity-20"></div>

      {/* Floating UI Elements (Background) */}
      <div className={`absolute top-20 right-[10%] lg:right-[20%] glass-panel p-4 rounded-2xl shadow-2xl shadow-[#418FDE]/10 animate-float transition-all duration-1000 ${mounted ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
        <div className="flex items-center gap-3 text-sm text-gray-300">
          <Globe className="text-[#418FDE]" size={20} />
          <span>News & Updates</span>
        </div>
      </div>
      <div className={`absolute bottom-32 left-[5%] lg:left-[15%] glass-panel p-4 rounded-2xl shadow-2xl shadow-[#418FDE]/10 animate-float-delayed transition-all duration-1000 delay-300 ${mounted ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
        <div className="flex items-center gap-3 text-sm text-gray-300">
          <MessageSquare className="text-[#418FDE]" size={20} />
          <span>Diaspora Discussions</span>
        </div>
      </div>
      <div className={`absolute top-40 left-[10%] lg:left-[25%] glass-panel p-4 rounded-2xl shadow-2xl shadow-[#418FDE]/10 animate-float transition-all duration-1000 delay-150 ${mounted ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
        <div className="flex items-center gap-3 text-sm text-gray-300">
          <Video className="text-[#418FDE]" size={20} />
          <span>Viral TikToks</span>
        </div>
      </div>

      {/* Main Content */}
      <div className={`relative z-10 max-w-3xl w-full mx-auto text-center transition-all duration-1000 ease-out ${mounted ? 'opacity-100 scale-100' : 'opacity-0 scale-95'}`}>
        
        {/* Logo */}
        <div className="flex justify-center mb-8">
          <div className="bg-gradient-to-br from-[#418FDE] to-[#2B6CB0] p-4 rounded-3xl shadow-[0_0_40px_rgba(65,143,222,0.4)] relative group cursor-pointer" style={{ animation: 'pulseGlow 3s infinite' }}>
            <div className="absolute inset-0 bg-white/20 rounded-3xl mix-blend-overlay"></div>
            <Flame className="text-white relative z-10 w-12 h-12 sm:w-16 sm:h-16 group-hover:scale-110 transition-transform duration-300" />
          </div>
        </div>

        {/* Status Badge */}
        <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-[#418FDE]/30 bg-[#418FDE]/10 text-[#418FDE] text-sm font-semibold tracking-wide mb-8">
          <span className="relative flex h-2.5 w-2.5">
            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-[#418FDE] opacity-75"></span>
            <span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-[#418FDE]"></span>
          </span>
          IN ACTIVE DEVELOPMENT
        </div>

        {/* Headlines */}
        <h1 className="text-5xl sm:text-7xl font-extrabold tracking-tight mb-6 bg-clip-text text-transparent bg-gradient-to-b from-white to-gray-400">
          Qarxis
        </h1>
        <h2 className="text-2xl sm:text-3xl font-semibold text-gray-200 mb-6">
          The Front Page of the <br className="sm:hidden" />
          <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#418FDE] to-blue-400">Global Somali Community.</span>
        </h2>
        <p className="text-lg text-gray-400 mb-12 max-w-2xl mx-auto leading-relaxed">
          We're building the ultimate high-tech hub to share breaking news, discuss diaspora life, debate, and connect with Somalis around the globe. Get ready to drop a Qarxis.
        </p>

        {/* Waitlist Form / Success Message */}
        <div className="max-w-md mx-auto glass-panel p-2 sm:p-3 rounded-2xl sm:rounded-full shadow-2xl">
          {submitted ? (
            <div className="py-4 px-6 flex items-center justify-center gap-3 text-green-400 font-medium">
              <Sparkles size={24} />
              <span>You're on the list! We'll notify you when we launch.</span>
            </div>
          ) : (
            <form onSubmit={handleSubmit} className="flex flex-col sm:flex-row gap-2">
              <div className="relative flex-1">
                <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                  <Mail className="h-5 w-5 text-gray-500" />
                </div>
                <input
                  type="email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  placeholder="Enter your email address..."
                  className="w-full bg-slate-900/50 border border-slate-700/50 text-white rounded-xl sm:rounded-full py-4 pl-12 pr-4 focus:outline-none focus:ring-2 focus:ring-[#418FDE]/50 focus:border-[#418FDE] transition-all placeholder-gray-500"
                  required
                />
              </div>
              <button
                type="submit"
                className="bg-gradient-to-r from-[#418FDE] to-[#2B6CB0] hover:from-[#3a82c9] hover:to-[#245991] text-white px-8 py-4 rounded-xl sm:rounded-full font-bold transition-all duration-300 shadow-lg shadow-[#418FDE]/20 hover:shadow-[#418FDE]/40 flex items-center justify-center gap-2 group whitespace-nowrap"
              >
                <span>Join Waitlist</span>
                <ArrowRight size={18} className="group-hover:translate-x-1 transition-transform" />
              </button>
            </form>
          )}
        </div>

        {/* Footer info */}
        <div className="mt-16 text-gray-500 text-sm">
          <p>© 2026 Qarxis Networks. Coming soon to Web, iOS, and Android.</p>
        </div>

      </div>
    </div>
  );
}