import React from "react";
import { motion } from "framer-motion";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Server, Users, Shield, Sword } from "lucide-react";

export default function OrientalNetwork() {
  return (
    <div className="min-h-screen bg-gradient-to-b from-blue-900 via-blue-800 to-blue-950 text-white">
      {/* Navbar */}
      <div className="flex justify-between items-center p-6 max-w-7xl mx-auto">
        <h1 className="text-2xl font-bold">OrientálNetwork</h1>
        <div className="space-x-6 text-sm">
          <a href="#" className="hover:text-blue-300">Főoldal</a>
          <a href="#" className="hover:text-blue-300">Játékmód</a>
          <a href="#" className="hover:text-blue-300">Bolt</a>
          <a href="#" className="hover:text-blue-300">Kapcsolat</a>
        </div>
      </div>

      {/* Hero */}
      <div className="text-center mt-20 px-4">
        <motion.h2
          initial={{ opacity: 0, y: 40 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          className="text-5xl font-extrabold mb-6"
        >
          KitPvP Élmény Új Szinten
        </motion.h2>
        <p className="text-blue-200 mb-8">
          Csatlakozz az OrientálNetwork szerverhez és harcolj a legjobbak ellen!
        </p>
        <Button className="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-2xl">
          Csatlakozás: play.orientalnetwork.hu
        </Button>
      </div>

      {/* Features */}
      <div className="grid md:grid-cols-4 gap-6 max-w-6xl mx-auto mt-24 px-6">
        <Card className="bg-blue-800/60 backdrop-blur-xl border-none rounded-2xl">
          <CardContent className="p-6 text-center">
            <Sword className="mx-auto mb-4" />
            <h3 className="font-bold text-lg">KitPvP Harc</h3>
            <p className="text-sm text-blue-200">Gyors, pörgős PvP rendszer</p>
          </CardContent>
        </Card>

        <Card className="bg-blue-800/60 backdrop-blur-xl border-none rounded-2xl">
          <CardContent className="p-6 text-center">
            <Users className="mx-auto mb-4" />
            <h3 className="font-bold text-lg">Aktív Közösség</h3>
            <p className="text-sm text-blue-200">Barátságos játékosok</p>
          </CardContent>
        </Card>

        <Card className="bg-blue-800/60 backdrop-blur-xl border-none rounded-2xl">
          <CardContent className="p-6 text-center">
            <Shield className="mx-auto mb-4" />
            <h3 className="font-bold text-lg">Anti-Cheat</h3>
            <p className="text-sm text-blue-200">Tiszta játék élmény</p>
          </CardContent>
        </Card>

        <Card className="bg-blue-800/60 backdrop-blur-xl border-none rounded-2xl">
          <CardContent className="p-6 text-center">
            <Server className="mx-auto mb-4" />
            <h3 className="font-bold text-lg">Stabil Szerver</h3>
            <p className="text-sm text-blue-200">0 lag, gyors kapcsolat</p>
          </CardContent>
        </Card>
      </div>

      {/* Footer */}
      <div className="text-center mt-24 p-6 text-blue-300 text-sm">
        © 2026 OrientálNetwork - Minden jog fenntartva
      </div>
    </div>
    
    </body>
    </html>
  );
}