import { useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { motion } from "framer-motion";

export default function GamingWebsite() {
  const [games] = useState([
    { name: "Roleplay Server", genre: "FPS", players: "Online" },
    { name: "Police Simulator", genre: "RPG", players: "Singleplayer" },
    { name: "Drift Arena", genre: "Racing", players: "Multiplayer" },
  ]);

  return (
    <div className="min-h-screen bg-gradient-to-br from-black via-gray-900 to-gray-800 text-white p-6">
      {/* Header */}
      <header className="flex justify-between items-center mb-10">
        <h1 className="text-3xl font-bold">🎮 NovaPlay</h1>
        <nav className="space-x-6">
          <a href="#" className="hover:text-gray-300">Home</a>
          <a href="#" className="hover:text-gray-300">Games</a>
          <a href="#" className="hover:text-gray-300">Community</a>
        </nav>
      </header>

      {/* Hero Section */}
      <section className="text-center mb-16">
        <motion.h2
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          className="text-5xl font-bold mb-4"
        >
          Welcome to NovaPlay
        </motion.h2>
        <p className="text-gray-400 mb-6">
          Join our custom gaming community – no external platforms, just our own games and servers.
        </p>
        <Button className="rounded-2xl px-6 py-2">Get Started</Button>
      </section>

      {/* Games Section */}
      <section>
        <h3 className="text-2xl font-semibold mb-6">Our Servers & Games</h3>
        <div className="grid md:grid-cols-3 gap-6">
          {games.map((game, i) => (
            <motion.div
              key={i}
              whileHover={{ scale: 1.05 }}
              className="cursor-pointer"
            >
              <Card className="bg-gray-900 border-gray-700 rounded-2xl shadow-lg">
                <CardContent className="p-6">
                  <h4 className="text-xl font-bold mb-2">{game.name}</h4>
                  <p className="text-gray-400">Genre: {game.genre}</p>
                  <p className="text-gray-400">Mode: {game.players}</p>
                </CardContent>
              </Card>
            </motion.div>
          ))}
        </div>
      </section>

      {/* Footer */}
      <footer className="mt-16 text-center text-gray-500">
        © 2026 NovaPlay. All rights reserved.
      </footer>
    </div>
  );
}