import React, { useState, useEffect } from 'react';
import Head from 'next/head';
import { motion, AnimatePresence, useScroll, useTransform } from 'framer-motion';
import { 
  Trophy, 
  Users, 
  Zap, 
  Play, 
  MessageCircle, 
  Mail, 
  Twitter, 
  Instagram, 
  Youtube, 
  Menu, 
  X,
  ChevronRight,
  Star,
  Gamepad2,
  Target,
  Award
} from 'lucide-react';
import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';

// Utility for cleaner tailwind classes
function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

// --- Components ---

const Navbar = () => {
  const [isScrolled, setIsScrolled] = useState(false);
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  useEffect(() => {
    const handleScroll = () => setIsScrolled(window.scrollY > 50);
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const navLinks = [
    { name: 'About', href: '#about' },
    { name: 'Roster', href: '#roster' },
    { name: 'Achievements', href: '#achievements' },
    { name: 'Highlights', href: '#highlights' },
    { name: 'Contact', href: '#contact' },
  ];

  return (
    <nav
      className={cn(
        'fixed top-0 left-0 right-0 z-50 transition-all duration-300 border-b border-transparent',
        isScrolled ? 'bg-slate-950/80 backdrop-blur-md border-white/10 py-4' : 'bg-transparent py-6'
      )}
    >
      <div className="container mx-auto px-6 flex items-center justify-between">
        <div className="flex items-center gap-2">
          <div className="w-10 h-10 bg-gradient-to-br from-cyan-500 to-purple-600 rounded-lg flex items-center justify-center shadow-lg shadow-purple-500/20">
            <Zap className="text-white w-6 h-6" />
          </div>
          <span className="text-2xl font-bold tracking-tighter text-white">
            ABYSSAL<span className="text-cyan-400">NEXUS</span>
          </span>
        </div>

        {/* Desktop Nav */}
        <div className="hidden md:flex items-center gap-8">
          {navLinks.map((link) => (
            <a
              key={link.name}
              href={link.href}
              className="text-sm font-medium text-slate-300 hover:text-cyan-400 transition-colors uppercase tracking-widest"
            >
              {link.name}
            </a>
          ))}
          <button className="px-5 py-2 bg-white text-slate-950 font-bold rounded-full hover:bg-cyan-400 transition-colors">
            JOIN US
          </button>
        </div>

        {/* Mobile Toggle */}
        <button 
          className="md:hidden text-white"
          onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
        >
          {mobileMenuOpen ? <X /> : <Menu />}
        </button>
      </div>

      {/* Mobile Menu */}
      <AnimatePresence>
        {mobileMenuOpen && (
          <motion.div
            initial={{ opacity: 0, height: 0 }}
            animate={{ opacity: 1, height: 'auto' }}
            exit={{ opacity: 0, height: 0 }}
            className="md:hidden bg-slate-950 border-b border-white/10 overflow-hidden"
          >
            <div className="flex flex-col p-6 gap-4">
              {navLinks.map((link) => (
                <a
                  key={link.name}
                  href={link.href}
                  onClick={() => setMobileMenuOpen(false)}
                  className="text-lg font-medium text-slate-300 hover:text-cyan-400"
                >
                  {link.name}
                </a>
              ))}
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </nav>
  );
};

const Hero = () => {
  return (
    <section className="relative min-h-screen flex items-center justify-center overflow-hidden pt-20">
      {/* Background Elements */}
      <div className="absolute inset-0 bg-slate-950">
        <div className="absolute top-0 left-1/4 w-96 h-96 bg-purple-600/20 rounded-full blur-[128px] animate-pulse" />
        <div className="absolute bottom-0 right-1/4 w-96 h-96 bg-cyan-600/20 rounded-full blur-[128px] animate-pulse delay-1000" />
        <div className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/carbon-fibre.png')] opacity-10" />
      </div>

      <div className="container mx-auto px-6 relative z-10 text-center">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
        >
          <span className="inline-block py-1 px-3 rounded-full bg-white/5 border border-white/10 text-cyan-400 text-sm font-bold tracking-widest mb-6">
            SEASON 12 CONTENDERS
          </span>
          <h1 className="text-6xl md:text-8xl lg:text-9xl font-black text-white tracking-tighter mb-6">
            ABYSSAL <span className="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-purple-500">NEXUS</span>
          </h1>
          <p className="text-xl md:text-2xl text-slate-400 max-w-2xl mx-auto mb-10 font-light">
            Forging legends in the Land of Dawn. We are the architects of chaos, the masters of the meta.
          </p>
          
          <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
            <button className="group relative px-8 py-4 bg-white text-slate-950 font-bold text-lg rounded-full overflow-hidden">
              <div className="absolute inset-0 w-full h-full bg-gradient-to-r from-cyan-400 to-purple-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
              <span className="relative flex items-center gap-2">
                Join Our Journey <ChevronRight className="w-5 h-5" />
              </span>
            </button>
            <button className="px-8 py-4 bg-white/5 backdrop-blur-sm border border-white/10 text-white font-bold text-lg rounded-full hover:bg-white/10 transition-colors">
              Watch Highlights
            </button>
          </div>
        </motion.div>
      </div>

      {/* Scroll Indicator */}
      <motion.div 
        className="absolute bottom-10 left-1/2 -translate-x-1/2 text-slate-500"
        animate={{ y: [0, 10, 0] }}
        transition={{ repeat: Infinity, duration: 2 }}
      >
        <div className="w-6 h-10 border-2 border-slate-500 rounded-full flex justify-center p-1">
          <div className="w-1 h-2 bg-slate-500 rounded-full" />
        </div>
      </motion.div>
    </section>
  );
};

const About = () => {
  return (
    <section id="about" className="py-24 bg-slate-950 relative">
      <div className="container mx-auto px-6">
        <div className="grid md:grid-cols-2 gap-16 items-center">
          <motion.div
            initial={{ opacity: 0, x: -50 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6 }}
          >
            <h2 className="text-4xl md:text-5xl font-bold text-white mb-6">
              Redefining <span className="text-purple-500">Mobile Esports</span>
            </h2>
            <p className="text-slate-400 text-lg leading-relaxed mb-6">
              Founded in 2023, Abyssal Nexus emerged from a shared vision to dominate the Mobile Legends competitive scene. We don't just play the game; we analyze, adapt, and evolve faster than the meta itself.
            </p>
            <p className="text-slate-400 text-lg leading-relaxed mb-8">
              Our mission is to build a sustainable legacy of excellence, fostering talent and creating unforgettable moments for our fans worldwide.
            </p>
            
            <div className="grid grid-cols-2 gap-6">
              <div className="p-4 rounded-xl bg-white/5 border border-white/5">
                <Target className="w-8 h-8 text-cyan-400 mb-3" />
                <h3 className="text-white font-bold text-lg">Strategic Depth</h3>
                <p className="text-slate-500 text-sm">Data-driven decision making</p>
              </div>
              <div className="p-4 rounded-xl bg-white/5 border border-white/5">
                <Users className="w-8 h-8 text-purple-400 mb-3" />
                <h3 className="text-white font-bold text-lg">Team Synergy</h3>
                <p className="text-slate-500 text-sm">Unbreakable bonds</p>
              </div>
            </div>
          </motion.div>

          <motion.div
            initial={{ opacity: 0, scale: 0.9 }}
            whileInView={{ opacity: 1, scale: 1 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6 }}
            className="relative"
          >
            <div className="absolute inset-0 bg-gradient-to-r from-cyan-500 to-purple-600 rounded-2xl blur-2xl opacity-20" />
            <div className="relative bg-slate-900 border border-white/10 rounded-2xl p-8 overflow-hidden">
               {/* Abstract Visual Representation */}
               <div className="aspect-video bg-slate-800 rounded-lg mb-6 relative overflow-hidden group">
                  <div className="absolute inset-0 bg-gradient-to-br from-slate-800 to-slate-900" />
                  <div className="absolute inset-0 flex items-center justify-center">
                    <Gamepad2 className="w-24 h-24 text-slate-700 group-hover:text-cyan-500/50 transition-colors duration-500" />
                  </div>
                  {/* Decorative Grid */}
                  <div className="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.03)_1px,transparent_1px)] bg-[size:20px_20px]" />
               </div>
               <div className="space-y-4">
                  <div className="h-2 bg-slate-800 rounded-full w-3/4" />
                  <div className="h-2 bg-slate-800 rounded-full w-1/2" />
                  <div className="h-2 bg-slate-800 rounded-full w-5/6" />
               </div>
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  );
};

const Roster = () => {
  const players = [
    { name: 'Vex', role: 'Jungler', kda: '4.2', hero: 'Fanny', color: 'from-purple-500 to-indigo-500' },
    { name: 'Kairos', role: 'Gold Lane', kda: '5.8', hero: 'Beatrix', color: 'from-cyan-500 to-blue-500' },
    { name: 'Riven', role: 'Mid Lane', kda: '6.1', hero: 'Yve', color: 'from-pink-500 to-rose-500' },
    { name: 'Titan', role: 'Exp Lane', kda: '3.9', hero: 'Terizla', color: 'from-amber-500 to-orange-500' },
    { name: 'Aegis', role: 'Roamer', kda: '8.5', hero: 'Chou', color: 'from-emerald-500 to-green-500' },
  ];

  return (
    <section id="roster" className="py-24 bg-slate-950 relative overflow-hidden">
      <div className="absolute top-0 right-0 w-1/2 h-full bg-gradient-to-l from-purple-900/10 to-transparent pointer-events-none" />
      
      <div className="container mx-auto px-6 relative z-10">
        <div className="text-center mb-16">
          <h2 className="text-4xl md:text-5xl font-bold text-white mb-4">Meet The <span className="text-cyan-400">Squad</span></h2>
          <p className="text-slate-400 max-w-2xl mx-auto">The elite warriors carrying the Abyssal banner into battle.</p>
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-6">
          {players.map((player, idx) => (
            <motion.div
              key={idx}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: idx * 0.1 }}
              className="group relative"
            >
              <div className={cn(
                "absolute inset-0 bg-gradient-to-br opacity-0 group-hover:opacity-20 transition-opacity duration-500 rounded-2xl blur-xl",
                player.color
              )} />
              <div className="relative bg-slate-900/50 backdrop-blur-sm border border-white/10 rounded-2xl p-6 hover:border-white/20 transition-all duration-300 h-full flex flex-col items-center text-center">
                <div className="w-24 h-24 rounded-full bg-slate-800 mb-4 relative overflow-hidden border-2 border-white/5 group-hover:border-cyan-400/50 transition-colors">
                   {/* Placeholder for Player Image */}
                   <div className="absolute inset-0 flex items-center justify-center bg-slate-800">
                      <Users className="w-10 h-10 text-slate-600" />
                   </div>
                   {/* Overlay on hover */}
                   <div className="absolute inset-0 bg-slate-950/80 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                      <span className="text-xs font-bold text-cyan-400">VIEW STATS</span>
                   </div>
                </div>
                
                <h3 className="text-xl font-bold text-white mb-1">{player.name}</h3>
                <span className="text-xs font-bold uppercase tracking-wider text-slate-500 mb-4">{player.role}</span>
                
                <div className="w-full pt-4 border-t border-white/5 flex justify-between items-center text-sm">
                  <div className="text-left">
                    <span className="block text-slate-500 text-xs">Signature</span>
                    <span className="text-white font-medium">{player.hero}</span>
                  </div>
                  <div className="text-right">
                    <span className="block text-slate-500 text-xs">KDA</span>
                    <span className="text-cyan-400 font-bold">{player.kda}</span>
                  </div>
                </div>

                <div className="flex gap-3 mt-6 opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0">
                  <button className="p-2 rounded-full bg-white/5 hover:bg-white/10 text-white"><Twitter size={16} /></button>
                  <button className="p-2 rounded-full bg-white/5 hover:bg-white/10 text-white"><Instagram size={16} /></button>
                </div>
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
};

const Achievements = () => {
  const stats = [
    { label: 'Tournament Wins', value: 12, suffix: '+' },
    { label: 'Win Rate', value: 78, suffix: '%' },
    { label: 'Total Kills', value: 4500, suffix: '+' },
  ];

  const tournaments = [
    { year: '2023', title: 'MPL Invitational', place: 'Champion' },
    { year: '2023', title: 'SEA Games Qualifiers', place: '1st Place' },
    { year: '2024', title: 'MPL Regular Season', place: 'Runner Up' },
  ];

  return (
    <section id="achievements" className="py-24 bg-slate-950 border-y border-white/5">
      <div className="container mx-auto px-6">
        <div className="grid lg:grid-cols-2 gap-16">
          {/* Stats Side */}
          <div>
            <h2 className="text-4xl font-bold text-white mb-12">Our <span className="text-purple-500">Legacy</span></h2>
            <div className="grid grid-cols-1 sm:grid-cols-3 gap-8">
              {stats.map((stat, idx) => (
                <div key={idx} className="relative">
                  <div className="text-4xl md:text-5xl font-black text-white mb-2">
                    {stat.value}<span className="text-cyan-400">{stat.suffix}</span>
                  </div>
                  <div className="text-slate-400 text-sm uppercase tracking-widest">{stat.label}</div>
                  <div className="absolute -top-4 -right-4 text-slate-800 opacity-20">
                    <Trophy size={64} />
                  </div>
                </div>
              ))}
            </div>
            
            <div className="mt-16">
              <h3 className="text-2xl font-bold text-white mb-6 flex items-center gap-2">
                <Award className="text-yellow-500" /> Hall of Fame
              </h3>
              <div className="space-y-4">
                {tournaments.map((t, i) => (
                  <div key={i} className="flex items-center justify-between p-4 rounded-xl bg-white/5 border border-white/5 hover:border-white/10 transition-colors">
                    <div>
                      <div className="text-cyan-400 text-sm font-bold mb-1">{t.year}</div>
                      <div className="text-white font-bold text-lg">{t.title}</div>
                    </div>
                    <div className="px-4 py-1 rounded-full bg-white/10 text-white text-sm font-bold">
                      {t.place}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* Visual Side */}
          <div className="relative">
             <div className="absolute inset-0 bg-gradient-to-br from-cyan-500/10 to-purple-500/10 rounded-3xl" />
             <div className="relative h-full min-h-[400px] bg-slate-900/50 border border-white/10 rounded-3xl p-8 flex flex-col justify-center items-center text-center">
                <div className="w-32 h-32 bg-gradient-to-br from-yellow-400 to-orange-500 rounded-full flex items-center justify-center mb-6 shadow-2xl shadow-orange-500/20">
                  <Trophy className="w-16 h-16 text-white" />
                </div>
                <h3 className="text-3xl font-bold text-white mb-2">MPL Champions 2023</h3>
                <p className="text-slate-400 max-w-md">
                  Our most prestigious victory yet. Abyssal Nexus defeated the reigning champions in a stunning 4-1 series, cementing our place in history.
                </p>
                <button className="mt-8 px-6 py-3 bg-white/10 hover:bg-white/20 text-white rounded-full font-medium transition-colors flex items-center gap-2">
                  <Play size={18} /> Watch Finals
                </button>
             </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const Highlights = () => {
  return (
    <section id="highlights" className="py-24 bg-slate-950">
      <div className="container mx-auto px-6">
        <div className="flex flex-col md:flex-row justify-between items-end mb-12">
          <div>
            <h2 className="text-4xl font-bold text-white mb-4">Match <span className="text-cyan-400">Highlights</span></h2>
            <p className="text-slate-400">Relive the most intense moments from our recent battles.</p>
          </div>
          <button className="hidden md:flex items-center gap-2 text-white hover:text-cyan-400 transition-colors mt-4 md:mt-0">
            View All Videos <ChevronRight size={20} />
          </button>
        </div>

        <div className="grid md:grid-cols-3 gap-8">
          {[1, 2, 3].map((item) => (
            <div key={item} className="group cursor-pointer">
              <div className="relative aspect-video rounded-xl overflow-hidden mb-4 border border-white/10">
                <div className="absolute inset-0 bg-slate-800 group-hover:scale-105 transition-transform duration-500">
                   {/* Placeholder for Video Thumbnail */}
                   <div className="w-full h-full bg-gradient-to-br from-slate-800 to-slate-900 flex items-center justify-center">
                      <Play className="w-12 h-12 text-white opacity-50 group-hover:opacity-100 group-hover:scale-110 transition-all duration-300" />
                   </div>
                </div>
                <div className="absolute bottom-3 right-3 px-2 py-1 bg-black/80 rounded text-xs text-white font-mono">
                  12:45
                </div>
              </div>
              <h3 className="text-lg font-bold text-white group-hover:text-cyan-400 transition-colors">
                Nexus vs Titans - Game {item} Highlights
              </h3>
              <p className="text-slate-500 text-sm mt-1">2 days ago • 45k views</p>
            </div>
          ))}
        </div>
        
        <button className="md:hidden w-full mt-8 py-3 bg-white/5 border border-white/10 rounded-lg text-white font-medium">
          View All Videos
        </button>
      </div>
    </section>
  );
};

const Sponsors = () => {
  return (
    <section className="py-16 bg-slate-900 border-y border-white/5">
      <div className="container mx-auto px-6">
        <p className="text-center text-slate-500 text-sm font-bold uppercase tracking-widest mb-8">Powered By</p>
        <div className="flex flex-wrap justify-center items-center gap-12 md:gap-24 opacity-50 grayscale hover:grayscale-0 transition-all duration-500">
           {/* Mock Logos using Text for simplicity in single file */}
           {['HyperX', 'Razer', 'Red Bull', 'SecretLab'].map((brand) => (
             <span key={brand} className="text-2xl font-black text-white tracking-tighter hover:text-cyan-400 transition-colors cursor-pointer">
               {brand}
             </span>
           ))}
        </div>
      </div>
    </section>
  );
};

const Contact = () => {
  return (
    <section id="contact" className="py-24 bg-slate-950 relative overflow-hidden">
      <div className="absolute bottom-0 left-0 w-full h-1/2 bg-gradient-to-t from-purple-900/10 to-transparent pointer-events-none" />
      
      <div className="container mx-auto px-6 relative z-10">
        <div className="max-w-4xl mx-auto bg-slate-900/50 backdrop-blur-xl border border-white/10 rounded-3xl p-8 md:p-12">
          <div className="grid md:grid-cols-2 gap-12">
            <div>
              <h2 className="text-3xl font-bold text-white mb-6">Join The <span className="text-purple-500">Nexus</span></h2>
              <p className="text-slate-400 mb-8">
                Think you have what it takes to compete at the highest level? Or maybe you just want to partner with us? Reach out.
              </p>
              
              <div className="space-y-4">
                <a href="#" className="flex items-center gap-4 p-4 rounded-xl bg-white/5 hover:bg-white/10 border border-white/5 hover:border-cyan-400/30 transition-all group">
                  <div className="w-10 h-10 rounded-full bg-indigo-500/20 flex items-center justify-center text-indigo-400 group-hover:bg-indigo-500 group-hover:text-white transition-colors">
                    <MessageCircle size={20} />
                  </div>
                  <div>
                    <div className="text-white font-bold">Discord Community</div>
                    <div className="text-slate-500 text-sm">discord.gg/abyssalnexus</div>
                  </div>
                </a>
                
                <a href="#" className="flex items-center gap-4 p-4 rounded-xl bg-white/5 hover:bg-white/10 border border-white/5 hover:border-cyan-400/30 transition-all group">
                  <div className="w-10 h-10 rounded-full bg-pink-500/20 flex items-center justify-center text-pink-400 group-hover:bg-pink-500 group-hover:text-white transition-colors">
                    <Mail size={20} />
                  </div>
                  <div>
                    <div className="text-white font-bold">Email Us</div>
                    <div className="text-slate-500 text-sm">contact@abyssal.gg</div>
                  </div>
                </a>
              </div>
            </div>

            <form className="space-y-4" onSubmit={(e) => e.preventDefault()}>
              <div>
                <label className="block text-slate-400 text-sm font-bold mb-2">IGN (In-Game Name)</label>
                <input type="text" className="w-full bg-slate-950 border border-white/10 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-cyan-400 transition-colors" placeholder="e.g. ProPlayer123" />
              </div>
              <div>
                <label className="block text-slate-400 text-sm font-bold mb-2">Email Address</label>
                <input type="email" className="w-full bg-slate-950 border border-white/10 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-cyan-400 transition-colors" placeholder="player@example.com" />
              </div>
              <div>
                <label className="block text-slate-400 text-sm font-bold mb-2">Message / Role</label>
                <textarea rows={4} className="w-full bg-slate-950 border border-white/10 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-cyan-400 transition-colors" placeholder="I want to join as a Jungler..." />
              </div>
              <button className="w-full py-4 bg-gradient-to-r from-cyan-500 to-purple-600 text-white font-bold rounded-lg hover:opacity-90 transition-opacity shadow-lg shadow-purple-500/25">
                RECRUIT ME
              </button>
            </form>
          </div>
        </div>
      </div>
    </section>
  );
};

const Footer = () => {
  return (
    <footer className="bg-slate-950 py-12 border-t border-white/5">
      <div className="container mx-auto px-6">
        <div className="flex flex-col md:flex-row justify-between items-center gap-6">
          <div className="flex items-center gap-2">
            <div className="w-8 h-8 bg-gradient-to-br from-cyan-500 to-purple-600 rounded flex items-center justify-center">
              <Zap className="text-white w-5 h-5" />
            </div>
            <span className="text-xl font-bold text-white">
              ABYSSAL<span className="text-cyan-400">NEXUS</span>
            </span>
          </div>
          
          <div className="flex gap-6">
            <a href="#" className="text-slate-400 hover:text-white transition-colors"><Twitter size={20} /></a>
            <a href="#" className="text-slate-400 hover:text-white transition-colors"><Instagram size={20} /></a>
            <a href="#" className="text-slate-400 hover:text-white transition-colors"><Youtube size={20} /></a>
            <a href="#" className="text-slate-400 hover:text-white transition-colors"><MessageCircle size={20} /></a>
          </div>
          
          <div className="text-slate-600 text-sm">
            © 2024 Abyssal Nexus Esports. All rights reserved.
          </div>
        </div>
      </div>
    </footer>
  );
};

export default function LandingPage() {
  return (
    <div className="bg-slate-950 min-h-screen text-slate-200 selection:bg-cyan-500/30 font-sans">
      <Head>
        <title>Abyssal Nexus | Professional MLBB Team</title>
        <meta name="description" content="Official website of Abyssal Nexus, a premier Mobile Legends: Bang Bang esports team." />
      </Head>

      <Navbar />
      
      <main>
        <Hero />
        <About />
        <Roster />
        <Achievements />
        <Highlights />
        <Sponsors />
        <Contact />
      </main>

      <Footer />
    </div>
  );
}