import React, { useState, useEffect } from 'react';
import { 
  Menu, 
  X, 
  Play, 
  Users, 
  Target, 
  Zap, 
  Shield, 
  Crosshair,
  Calendar,
  Star,
  Download,
  ExternalLink,
  ChevronRight,
  Server,
  Activity,
  Globe,
  Clock,
  UserCheck,
  Wifi,
  MapPin,
  Trophy,
  Gamepad2
} from 'lucide-react';

function App() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [activeMode, setActiveMode] = useState(0);
  const [currentPage, setCurrentPage] = useState('home');
  const [activeServer, setActiveServer] = useState(0);

  const gameModes = [
    {
      title: "Conquest",
      description: "Large-scale battles with up to 128 players fighting for control of strategic points",
      players: "128 Players",
      icon: <Target className="w-8 h-8" />
    },
    {
      title: "Breakthrough",
      description: "Intense frontline combat where attackers must capture sectors to advance",
      players: "128 Players", 
      icon: <Zap className="w-8 h-8" />
    },
    {
      title: "Hazard Zone",
      description: "High-stakes squad-based extraction mode with limited lives",
      players: "32 Players",
      icon: <Shield className="w-8 h-8" />
    }
  ];

  const weapons = [
    { name: "AK-24", category: "Assault Rifle", image: "https://images.pexels.com/photos/63778/pexels-photo-63778.jpeg?auto=compress&cs=tinysrgb&w=400" },
    { name: "M5A3", category: "Assault Rifle", image: "https://images.pexels.com/photos/209271/pexels-photo-209271.jpeg?auto=compress&cs=tinysrgb&w=400" },
    { name: "DM7", category: "Sniper Rifle", image: "https://images.pexels.com/photos/1573666/pexels-photo-1573666.jpeg?auto=compress&cs=tinysrgb&w=400" },
    { name: "PP-29", category: "SMG", image: "https://images.pexels.com/photos/1906441/pexels-photo-1906441.jpeg?auto=compress&cs=tinysrgb&w=400" }
  ];

  const news = [
    {
      title: "Season 3: Escalation Now Live",
      date: "December 15, 2024",
      category: "Update",
      image: "https://images.pexels.com/photos/442576/pexels-photo-442576.jpeg?auto=compress&cs=tinysrgb&w=600",
      excerpt: "Experience the most intense season yet with new maps, weapons, and game modes that will change the battlefield forever.",
      content: "Season 3 brings unprecedented warfare to Battlefield 6 with three new maps, including the urban combat zone of Metro City and the desert fortress of Sand Dune Outpost. Players can now access 12 new weapons, enhanced vehicle customization, and the revolutionary new Portal mode that lets you create custom game experiences."
    },
    {
      title: "New Map: Orbital Revealed",
      date: "December 10, 2024", 
      category: "Content",
      image: "https://images.pexels.com/photos/356040/pexels-photo-356040.jpeg?auto=compress&cs=tinysrgb&w=600",
      excerpt: "Fight among the stars in this zero-gravity combat experience that redefines vertical warfare.",
      content: "Orbital takes combat to new heights with its space station setting. Experience unique zero-gravity mechanics, destructible environments, and strategic gameplay that utilizes both interior corridors and exterior spacewalks. This map supports all major game modes with specialized variants for the unique environment."
    },
    {
      title: "Weapon Balance Update 4.2",
      date: "December 5, 2024",
      category: "Patch Notes",
      image: "https://images.pexels.com/photos/4827/nature-forest-trees-fog.jpg?auto=compress&cs=tinysrgb&w=600",
      excerpt: "Major adjustments to assault rifles and sniper rifles based on community feedback and gameplay data.",
      content: "This update addresses weapon balance issues identified by our community. Assault rifles receive improved accuracy at medium range, while sniper rifles get reduced scope sway. We've also adjusted vehicle armor values and introduced new attachment options for SMGs and LMGs."
    },
    {
      title: "Community Tournament Announced",
      date: "November 28, 2024",
      category: "Esports",
      image: "https://images.pexels.com/photos/442576/pexels-photo-442576.jpeg?auto=compress&cs=tinysrgb&w=600",
      excerpt: "Join the ultimate Battlefield competition with $100,000 in prizes and exclusive rewards.",
      content: "The Battlefield 6 World Championship is coming! Register your squad for the biggest tournament in franchise history. Featuring multiple game modes, regional qualifiers, and live broadcasts. Winners receive exclusive in-game items, cash prizes, and the title of World Champions."
    },
    {
      title: "Developer Diary: The Future of Battlefield",
      date: "November 20, 2024",
      category: "Behind the Scenes",
      image: "https://images.pexels.com/photos/356040/pexels-photo-356040.jpeg?auto=compress&cs=tinysrgb&w=600",
      excerpt: "Our development team shares insights into upcoming features and the long-term vision for the franchise.",
      content: "In this exclusive developer diary, our team discusses the technology behind Battlefield 6's massive 128-player battles, the challenges of creating dynamic weather systems, and our plans for post-launch content. Learn about our commitment to community feedback and the exciting features coming in 2025."
    },
    {
      title: "Holiday Event: Winter Warfare",
      date: "November 15, 2024",
      category: "Event",
      image: "https://images.pexels.com/photos/4827/nature-forest-trees-fog.jpg?auto=compress&cs=tinysrgb&w=600",
      excerpt: "Limited-time winter-themed content including new skins, maps, and special game modes.",
      content: "Celebrate the holidays with Winter Warfare! This limited-time event features snow-covered versions of popular maps, exclusive winter camouflage skins, and the new Snowball Fight arcade mode. Complete daily challenges to unlock rare cosmetics and holiday-themed weapon charms."
    }
  ];

  const servers = [
    {
      name: "EU West - Conquest #1",
      map: "Orbital Station",
      mode: "Conquest",
      players: "124/128",
      ping: "23ms",
      region: "Europe",
      status: "active"
    },
    {
      name: "US East - Breakthrough",
      map: "Metro City",
      mode: "Breakthrough", 
      players: "98/128",
      ping: "45ms",
      region: "North America",
      status: "active"
    },
    {
      name: "Asia Pacific - Hazard Zone",
      map: "Sand Dune Outpost",
      mode: "Hazard Zone",
      players: "28/32",
      ping: "78ms",
      region: "Asia",
      status: "active"
    },
    {
      name: "EU Central - All Maps",
      map: "Rotation",
      mode: "Mixed",
      players: "112/128",
      ping: "31ms",
      region: "Europe",
      status: "active"
    }
  ];

  const teamMembers = [
    {
      name: "Alex 'Sniper' Johnson",
      role: "Squad Leader",
      rank: "Colonel",
      kd: "2.4",
      score: "45,230",
      status: "online",
      avatar: "https://images.pexels.com/photos/1222271/pexels-photo-1222271.jpeg?auto=compress&cs=tinysrgb&w=150"
    },
    {
      name: "Maria 'Phoenix' Rodriguez",
      role: "Assault",
      rank: "Major",
      kd: "1.8",
      score: "38,940",
      status: "online",
      avatar: "https://images.pexels.com/photos/1239291/pexels-photo-1239291.jpeg?auto=compress&cs=tinysrgb&w=150"
    },
    {
      name: "Chen 'Ghost' Wei",
      role: "Recon",
      rank: "Captain",
      kd: "3.1",
      score: "52,180",
      status: "away",
      avatar: "https://images.pexels.com/photos/1681010/pexels-photo-1681010.jpeg?auto=compress&cs=tinysrgb&w=150"
    },
    {
      name: "Jake 'Thunder' Miller",
      role: "Support",
      rank: "Lieutenant",
      kd: "1.6",
      score: "29,750",
      status: "offline",
      avatar: "https://images.pexels.com/photos/1043471/pexels-photo-1043471.jpeg?auto=compress&cs=tinysrgb&w=150"
    }
  ];

  useEffect(() => {
    const interval = setInterval(() => {
      setActiveMode((prev) => (prev + 1) % gameModes.length);
      setActiveServer((prev) => (prev + 1) % servers.length);
    }, 4000);
    return () => clearInterval(interval);
  }, []);

  const renderHomePage = () => (
    <>
      {/* Hero Section */}
      <section id="home" className="relative h-screen flex items-center justify-center overflow-hidden">
        <div 
          className="absolute inset-0 bg-cover bg-center bg-no-repeat animate-pulse"
          style={{
            backgroundImage: 'linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.4)), url(https://images.pexels.com/photos/635279/pexels-photo-635279.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1)'
          }}
        />
        
        <div className="relative z-10 text-center max-w-4xl mx-auto px-4">
          <div className="mb-6 animate-fade-in-up">
            <span className="inline-block bg-orange-500/20 text-orange-500 px-4 py-2 rounded-full text-sm font-medium mb-4 border border-orange-500/30 animate-pulse">
              Available Now
            </span>
          </div>
          
          <h1 className="text-6xl md:text-8xl font-black mb-6 leading-none animate-fade-in-up delay-200">
            BATTLE<span className="text-orange-500">FIELD</span>
            <br />
            <span className="text-orange-500 text-5xl md:text-7xl animate-glow">2042</span>
          </h1>
          
          <p className="text-xl md:text-2xl text-gray-300 mb-8 max-w-2xl mx-auto leading-relaxed animate-fade-in-up delay-400">
            Experience the most intense multiplayer battles in human history. 
            128 players. All-out warfare. The future of combat.
          </p>
          
          <div className="flex flex-col sm:flex-row gap-4 justify-center items-center animate-fade-in-up delay-600">
            <button className="bg-orange-500 hover:bg-orange-600 text-white px-8 py-4 rounded-lg font-bold text-lg transition-all duration-300 hover:scale-105 flex items-center gap-2 shadow-lg shadow-orange-500/25 animate-bounce-subtle">
              <Play className="w-5 h-5" />
              Play Now
            </button>
            <button className="border-2 border-orange-500 text-orange-500 hover:bg-orange-500 hover:text-white px-8 py-4 rounded-lg font-bold text-lg transition-all duration-300 hover:scale-105 flex items-center gap-2">
              <Download className="w-5 h-5" />
              Download Free
            </button>
          </div>
        </div>

        <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
          <ChevronRight className="w-6 h-6 text-orange-500 rotate-90" />
        </div>
      </section>

      {/* Game Modes Section */}
      <section id="modes" className="py-20 bg-gradient-to-b from-gray-900 to-black">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16 animate-fade-in-up">
            <h2 className="text-4xl md:text-5xl font-black mb-6">
              GAME <span className="text-orange-500">MODES</span>
            </h2>
            <p className="text-xl text-gray-400 max-w-2xl mx-auto">
              Choose your battlefield and dominate in multiple game modes designed for intense combat
            </p>
          </div>

          <div className="grid md:grid-cols-3 gap-8">
            {gameModes.map((mode, index) => (
              <div
                key={index}
                className={`relative bg-gradient-to-br from-gray-800 to-gray-900 p-8 rounded-lg border-2 transition-all duration-500 hover:scale-105 cursor-pointer animate-slide-in-up ${
                  activeMode === index ? 'border-orange-500 shadow-lg shadow-orange-500/25 animate-glow-border' : 'border-gray-700 hover:border-orange-500/50'
                }`}
                style={{ animationDelay: `${index * 200}ms` }}
                onClick={() => setActiveMode(index)}
              >
                <div className="flex items-center justify-between mb-6">
                  <div className="text-orange-500 animate-spin-slow">
                    {mode.icon}
                  </div>
                  <span className="text-sm font-medium text-gray-400 bg-gray-700 px-3 py-1 rounded-full animate-pulse">
                    {mode.players}
                  </span>
                </div>
                
                <h3 className="text-2xl font-bold mb-4">{mode.title}</h3>
                <p className="text-gray-400 leading-relaxed">{mode.description}</p>
                
                <div className="mt-6">
                  <button className="flex items-center text-orange-500 hover:text-orange-400 transition-colors font-medium group">
                    Learn More
                    <ChevronRight className="w-4 h-4 ml-1 group-hover:translate-x-1 transition-transform" />
                  </button>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Arsenal Section */}
      <section id="arsenal" className="py-20 bg-black">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16 animate-fade-in-up">
            <h2 className="text-4xl md:text-5xl font-black mb-6">
              YOUR <span className="text-orange-500">ARSENAL</span>
            </h2>
            <p className="text-xl text-gray-400 max-w-2xl mx-auto">
              Customize and master an extensive collection of cutting-edge weapons and vehicles
            </p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
            {weapons.map((weapon, index) => (
              <div
                key={index}
                className="group relative bg-gradient-to-br from-gray-800 to-gray-900 rounded-lg overflow-hidden border border-gray-700 hover:border-orange-500/50 transition-all duration-300 hover:scale-105 animate-slide-in-up"
                style={{ animationDelay: `${index * 150}ms` }}
              >
                <div className="aspect-w-16 aspect-h-12 bg-gray-700">
                  <img
                    src={weapon.image}
                    alt={weapon.name}
                    className="w-full h-48 object-cover group-hover:scale-110 transition-transform duration-500"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent" />
                </div>
                
                <div className="absolute bottom-0 left-0 right-0 p-4">
                  <div className="flex items-center justify-between mb-2">
                    <span className="text-xs font-medium text-orange-500 bg-orange-500/20 px-2 py-1 rounded animate-pulse">
                      {weapon.category}
                    </span>
                    <Star className="w-4 h-4 text-gray-400 group-hover:text-orange-500 transition-colors animate-spin-slow" />
                  </div>
                  <h4 className="text-lg font-bold">{weapon.name}</h4>
                </div>
              </div>
            ))}
          </div>

          <div className="text-center mt-12 animate-fade-in-up delay-800">
            <button className="bg-gradient-to-r from-orange-500 to-orange-600 hover:from-orange-600 hover:to-orange-700 text-white px-8 py-4 rounded-lg font-bold text-lg transition-all duration-300 hover:scale-105 shadow-lg shadow-orange-500/25">
              View Full Arsenal
            </button>
          </div>
        </div>
      </section>

      {/* Server Browser Section */}
      <section id="servers" className="py-20 bg-gradient-to-b from-black to-gray-900">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16 animate-fade-in-up">
            <h2 className="text-4xl md:text-5xl font-black mb-6">
              ACTIVE <span className="text-orange-500">SERVERS</span>
            </h2>
            <p className="text-xl text-gray-400 max-w-2xl mx-auto">
              Join the battle on servers worldwide with optimal performance and low latency
            </p>
          </div>

          <div className="grid gap-4">
            {servers.map((server, index) => (
              <div
                key={index}
                className={`bg-gradient-to-r from-gray-800 to-gray-900 p-6 rounded-lg border transition-all duration-300 hover:scale-102 cursor-pointer animate-slide-in-right ${
                  activeServer === index ? 'border-orange-500 shadow-lg shadow-orange-500/25' : 'border-gray-700 hover:border-orange-500/50'
                }`}
                style={{ animationDelay: `${index * 100}ms` }}
              >
                <div className="flex items-center justify-between">
                  <div className="flex items-center space-x-6">
                    <div className="flex items-center space-x-2">
                      <Server className="w-5 h-5 text-orange-500 animate-pulse" />
                      <span className="font-bold text-lg">{server.name}</span>
                    </div>
                    
                    <div className="flex items-center space-x-4 text-sm text-gray-400">
                      <div className="flex items-center space-x-1">
                        <MapPin className="w-4 h-4" />
                        <span>{server.map}</span>
                      </div>
                      <div className="flex items-center space-x-1">
                        <Gamepad2 className="w-4 h-4" />
                        <span>{server.mode}</span>
                      </div>
                      <div className="flex items-center space-x-1">
                        <Globe className="w-4 h-4" />
                        <span>{server.region}</span>
                      </div>
                    </div>
                  </div>
                  
                  <div className="flex items-center space-x-6">
                    <div className="flex items-center space-x-4 text-sm">
                      <div className="flex items-center space-x-1">
                        <Users className="w-4 h-4 text-green-500" />
                        <span className="font-medium">{server.players}</span>
                      </div>
                      <div className="flex items-center space-x-1">
                        <Wifi className="w-4 h-4 text-blue-500" />
                        <span className="font-medium">{server.ping}</span>
                      </div>
                    </div>
                    
                    <button className="bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded font-medium transition-colors">
                      Join
                    </button>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Team Section */}
      <section id="team" className="py-20 bg-gradient-to-b from-gray-900 to-black">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16 animate-fade-in-up">
            <h2 className="text-4xl md:text-5xl font-black mb-6">
              YOUR <span className="text-orange-500">SQUAD</span>
            </h2>
            <p className="text-xl text-gray-400 max-w-2xl mx-auto">
              Connect with your team members and track performance in real-time
            </p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
            {teamMembers.map((member, index) => (
              <div
                key={index}
                className="bg-gradient-to-br from-gray-800 to-gray-900 p-6 rounded-lg border border-gray-700 hover:border-orange-500/50 transition-all duration-300 hover:scale-105 animate-slide-in-up"
                style={{ animationDelay: `${index * 150}ms` }}
              >
                <div className="text-center">
                  <div className="relative mb-4">
                    <img
                      src={member.avatar}
                      alt={member.name}
                      className="w-16 h-16 rounded-full mx-auto border-2 border-gray-600"
                    />
                    <div className={`absolute -bottom-1 -right-1 w-4 h-4 rounded-full border-2 border-gray-800 ${
                      member.status === 'online' ? 'bg-green-500 animate-pulse' : 
                      member.status === 'away' ? 'bg-yellow-500' : 'bg-gray-500'
                    }`} />
                  </div>
                  
                  <h3 className="font-bold text-lg mb-1">{member.name}</h3>
                  <p className="text-orange-500 text-sm mb-2">{member.role}</p>
                  <p className="text-gray-400 text-sm mb-4">{member.rank}</p>
                  
                  <div className="space-y-2 text-sm">
                    <div className="flex justify-between">
                      <span className="text-gray-400">K/D Ratio:</span>
                      <span className="font-medium text-green-500">{member.kd}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-gray-400">Score:</span>
                      <span className="font-medium">{member.score}</span>
                    </div>
                  </div>
                  
                  <button className="w-full mt-4 bg-gray-700 hover:bg-orange-500 text-white py-2 rounded font-medium transition-colors">
                    View Profile
                  </button>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </>
  );

  const renderNewsPage = () => (
    <div className="pt-20">
      {/* News Hero */}
      <section className="py-20 bg-gradient-to-b from-gray-900 to-black">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16 animate-fade-in-up">
            <h1 className="text-5xl md:text-6xl font-black mb-6">
              BATTLEFIELD <span className="text-orange-500">NEWS</span>
            </h1>
            <p className="text-xl text-gray-400 max-w-2xl mx-auto">
              Stay updated with the latest intel, updates, and battlefield reports
            </p>
          </div>
        </div>
      </section>

      {/* Featured News */}
      <section className="py-20 bg-black">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="mb-12">
            <h2 className="text-3xl font-bold mb-8 flex items-center animate-fade-in-up">
              <Star className="w-8 h-8 text-orange-500 mr-3 animate-spin-slow" />
              Featured Story
            </h2>
            
            <div className="bg-gradient-to-r from-gray-800 to-gray-900 rounded-lg overflow-hidden border border-orange-500/30 hover:border-orange-500 transition-all duration-300 animate-slide-in-up">
              <div className="md:flex">
                <div className="md:w-1/2">
                  <img
                    src={news[0].image}
                    alt={news[0].title}
                    className="w-full h-64 md:h-full object-cover hover:scale-105 transition-transform duration-500"
                  />
                </div>
                <div className="md:w-1/2 p-8">
                  <div className="flex items-center gap-4 mb-4">
                    <span className="text-xs font-medium text-orange-500 bg-orange-500/20 px-3 py-1 rounded-full border border-orange-500/30 animate-pulse">
                      {news[0].category}
                    </span>
                    <div className="flex items-center text-gray-400 text-sm">
                      <Calendar className="w-4 h-4 mr-1" />
                      {news[0].date}
                    </div>
                  </div>
                  
                  <h3 className="text-3xl font-bold mb-4 text-orange-500">{news[0].title}</h3>
                  <p className="text-gray-300 mb-4 leading-relaxed">{news[0].excerpt}</p>
                  <p className="text-gray-400 mb-6 leading-relaxed">{news[0].content}</p>
                  
                  <button className="bg-orange-500 hover:bg-orange-600 text-white px-6 py-3 rounded-lg font-medium transition-all duration-300 hover:scale-105 flex items-center gap-2">
                    Read Full Article
                    <ExternalLink className="w-4 h-4" />
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* All News */}
      <section className="py-20 bg-gradient-to-b from-black to-gray-900">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-3xl font-bold mb-12 flex items-center animate-fade-in-up">
            <Activity className="w-8 h-8 text-orange-500 mr-3 animate-pulse" />
            Latest Updates
          </h2>
          
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {news.slice(1).map((article, index) => (
              <article
                key={index}
                className="group bg-gradient-to-br from-gray-800 to-gray-900 rounded-lg overflow-hidden border border-gray-700 hover:border-orange-500/50 transition-all duration-300 hover:scale-105 animate-slide-in-up"
                style={{ animationDelay: `${index * 150}ms` }}
              >
                <div className="aspect-w-16 aspect-h-10 relative overflow-hidden">
                  <img
                    src={article.image}
                    alt={article.title}
                    className="w-full h-48 object-cover group-hover:scale-110 transition-transform duration-500"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent" />
                  <div className="absolute top-4 left-4">
                    <span className="text-xs font-medium text-orange-500 bg-orange-500/20 px-3 py-1 rounded-full border border-orange-500/30 animate-pulse">
                      {article.category}
                    </span>
                  </div>
                </div>
                
                <div className="p-6">
                  <div className="flex items-center text-gray-400 text-sm mb-3">
                    <Calendar className="w-4 h-4 mr-1" />
                    {article.date}
                  </div>
                  
                  <h3 className="text-xl font-bold mb-3 group-hover:text-orange-500 transition-colors">
                    {article.title}
                  </h3>
                  
                  <p className="text-gray-400 mb-4 leading-relaxed">{article.excerpt}</p>
                  
                  <button className="flex items-center text-orange-500 hover:text-orange-400 transition-colors font-medium group">
                    Read More
                    <ExternalLink className="w-4 h-4 ml-1 group-hover:translate-x-1 transition-transform" />
                  </button>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>
    </div>
  );

  return (
    <div className="min-h-screen bg-gray-900 text-white">
      {/* Navigation */}
      <nav className="fixed top-0 w-full z-50 bg-black/90 backdrop-blur-md border-b border-orange-500/20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between h-16">
            <div className="flex items-center space-x-2 cursor-pointer" onClick={() => setCurrentPage('home')}>
              <Crosshair className="w-8 h-8 text-orange-500 animate-spin-slow" />
              <span className="text-2xl font-bold">BATTLEFIELD <span className="text-orange-500">6</span></span>
            </div>
            
            <div className="hidden md:block">
              <div className="ml-10 flex items-baseline space-x-8">
                <button 
                  onClick={() => setCurrentPage('home')}
                  className={`transition-colors font-medium ${currentPage === 'home' ? 'text-orange-500' : 'text-gray-300 hover:text-orange-500'}`}
                >
                  Home
                </button>
                <button 
                  onClick={() => setCurrentPage('news')}
                  className={`transition-colors font-medium ${currentPage === 'news' ? 'text-orange-500' : 'text-gray-300 hover:text-orange-500'}`}
                >
                  News
                </button>
                <a href="#modes" className="text-gray-300 hover:text-orange-500 transition-colors font-medium">Game Modes</a>
                <a href="#servers" className="text-gray-300 hover:text-orange-500 transition-colors font-medium">Servers</a>
                <a href="#team" className="text-gray-300 hover:text-orange-500 transition-colors font-medium">Team</a>
              </div>
            </div>

            <div className="md:hidden">
              <button
                onClick={() => setIsMenuOpen(!isMenuOpen)}
                className="text-gray-300 hover:text-orange-500 transition-colors"
              >
                {isMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
              </button>
            </div>
          </div>
        </div>

        {/* Mobile menu */}
        {isMenuOpen && (
          <div className="md:hidden bg-black/95 backdrop-blur-md animate-slide-down">
            <div className="px-2 pt-2 pb-3 space-y-1">
              <button 
                onClick={() => { setCurrentPage('home'); setIsMenuOpen(false); }}
                className={`block px-3 py-2 font-medium w-full text-left ${currentPage === 'home' ? 'text-orange-500' : 'text-gray-300'}`}
              >
                Home
              </button>
              <button 
                onClick={() => { setCurrentPage('news'); setIsMenuOpen(false); }}
                className={`block px-3 py-2 font-medium w-full text-left ${currentPage === 'news' ? 'text-orange-500' : 'text-gray-300'}`}
              >
                News
              </button>
              <a href="#modes" className="block px-3 py-2 text-gray-300 hover:text-orange-500 transition-colors">Game Modes</a>
              <a href="#servers" className="block px-3 py-2 text-gray-300 hover:text-orange-500 transition-colors">Servers</a>
              <a href="#team" className="block px-3 py-2 text-gray-300 hover:text-orange-500 transition-colors">Team</a>
            </div>
          </div>
        )}
      </nav>

      {/* Page Content */}
      {currentPage === 'home' ? renderHomePage() : renderNewsPage()}

      {/* Footer */}
      <footer className="bg-black border-t border-gray-800 py-12">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid md:grid-cols-4 gap-8">
            <div className="animate-fade-in-up">
              <div className="flex items-center space-x-2 mb-4">
                <Crosshair className="w-6 h-6 text-orange-500 animate-spin-slow" />
                <span className="text-xl font-bold">BATTLEFIELD <span className="text-orange-500">6</span></span>
              </div>
              <p className="text-gray-400 text-sm">
                Experience the ultimate battlefield with cutting-edge technology and intense multiplayer combat.
              </p>
            </div>
            
            <div className="animate-fade-in-up delay-200">
              <h4 className="font-bold mb-4">Game</h4>
              <ul className="space-y-2 text-gray-400 text-sm">
                <li><a href="#" className="hover:text-orange-500 transition-colors">Download</a></li>
                <li><a href="#" className="hover:text-orange-500 transition-colors">System Requirements</a></li>
                <li><a href="#" className="hover:text-orange-500 transition-colors">Beta Access</a></li>
              </ul>
            </div>
            
            <div className="animate-fade-in-up delay-400">
              <h4 className="font-bold mb-4">Community</h4>
              <ul className="space-y-2 text-gray-400 text-sm">
                <li><a href="#" className="hover:text-orange-500 transition-colors">Discord</a></li>
                <li><a href="#" className="hover:text-orange-500 transition-colors">Reddit</a></li>
                <li><a href="#" className="hover:text-orange-500 transition-colors">Twitter</a></li>
              </ul>
            </div>
            
            <div className="animate-fade-in-up delay-600">
              <h4 className="font-bold mb-4">Support</h4>
              <ul className="space-y-2 text-gray-400 text-sm">
                <li><a href="#" className="hover:text-orange-500 transition-colors">Help Center</a></li>
                <li><a href="#" className="hover:text-orange-500 transition-colors">Bug Reports</a></li>
                <li><a href="#" className="hover:text-orange-500 transition-colors">Contact Us</a></li>
              </ul>
            </div>
          </div>
          
          <div className="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400 text-sm animate-fade-in-up delay-800">
            <p>&copy; 2024 Battlefield 6. All rights reserved. Built with React & Tailwind CSS.</p>
          </div>
        </div>
      </footer>

      <style jsx>{`
        @keyframes fade-in-up {
          from {
            opacity: 0;
            transform: translateY(30px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }

        @keyframes slide-in-up {
          from {
            opacity: 0;
            transform: translateY(50px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }

        @keyframes slide-in-right {
          from {
            opacity: 0;
            transform: translateX(50px);
          }
          to {
            opacity: 1;
            transform: translateX(0);
          }
        }

        @keyframes slide-down {
          from {
            opacity: 0;
            transform: translateY(-20px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }

        @keyframes glow {
          0%, 100% {
            text-shadow: 0 0 20px rgba(255, 107, 0, 0.5);
          }
          50% {
            text-shadow: 0 0 30px rgba(255, 107, 0, 0.8);
          }
        }

        @keyframes glow-border {
          0%, 100% {
            box-shadow: 0 0 20px rgba(255, 107, 0, 0.3);
          }
          50% {
            box-shadow: 0 0 30px rgba(255, 107, 0, 0.5);
          }
        }

        @keyframes bounce-subtle {
          0%, 100% {
            transform: translateY(0);
          }
          50% {
            transform: translateY(-5px);
          }
        }

        @keyframes spin-slow {
          from {
            transform: rotate(0deg);
          }
          to {
            transform: rotate(360deg);
          }
        }

        .animate-fade-in-up {
          animation: fade-in-up 0.8s ease-out forwards;
        }

        .animate-slide-in-up {
          animation: slide-in-up 0.8s ease-out forwards;
        }

        .animate-slide-in-right {
          animation: slide-in-right 0.8s ease-out forwards;
        }

        .animate-slide-down {
          animation: slide-down 0.3s ease-out forwards;
        }

        .animate-glow {
          animation: glow 2s ease-in-out infinite;
        }

        .animate-glow-border {
          animation: glow-border 2s ease-in-out infinite;
        }

        .animate-bounce-subtle {
          animation: bounce-subtle 2s ease-in-out infinite;
        }

        .animate-spin-slow {
          animation: spin-slow 8s linear infinite;
        }

        .delay-200 {
          animation-delay: 200ms;
        }

        .delay-400 {
          animation-delay: 400ms;
        }

        .delay-600 {
          animation-delay: 600ms;
        }

        .delay-800 {
          animation-delay: 800ms;
        }

        .hover\\:scale-102:hover {
          transform: scale(1.02);
        }
      `}</style>
    </div>
  );
}

export default App;




@import url(https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap);

:root{
  --primary:#2563eb;
  --bg:#f4f6f8;
  --card:#ffffff;
  --muted:#6b7280;
  --radius:12px;
}

html,body{height:100%;}
body {
  font-family: 'Inter', Arial, sans-serif;
  background: var(--bg);
  color: #111827;
  margin:0;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Header */
.header {
  background: var(--primary);
  color: #fff;
  padding: 14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.header .logo a{color:#fff;text-decoration:none;font-weight:700;font-size:1.125rem;}
.header nav a{color:rgba(255,255,255,0.95);text-decoration:none;margin:0 10px;font-weight:500;}

/* Container */
.container{max-width:1100px;margin:22px auto;padding:0 16px;}

/* Forum Card */
.forum-card{
  background:var(--card);
  border-radius:var(--radius);
  padding:14px;
  margin-bottom:14px;
  box-shadow:0 6px 18px rgba(15,23,42,0.06);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.forum-card .left{display:flex;gap:12px;align-items:center;}
.forum-card h3{margin:0;font-size:1.05rem;}
.forum-card p{margin:2px 0 0;color:var(--muted);font-size:0.95rem;}

/* Thread list */
.thread-row{
  background:var(--card);
  border-radius:10px;
  padding:12px;
  margin-bottom:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.thread-row .title{font-weight:600;}
.thread-row:hover{background:#f7fbff;}

/* Post */
.post{
  background:var(--card);
  border-radius:10px;
  padding:14px;
  box-shadow:0 4px 10px rgba(2,6,23,0.04);
  margin-bottom:12px;
}
.post .post-meta{color:var(--muted);font-size:0.875rem;margin-bottom:8px;}

/* Buttons */
.btn{display:inline-block;padding:8px 12px;border-radius:8px;text-decoration:none;font-weight:600;}
.btn-primary{background:var(--primary);color:#fff;}

/* Responsive */
@media (max-width: 768px){
  .forum-card, .thread-row{flex-direction:column;align-items:flex-start;}
  .header nav{display:none;}
}