import { motion } from "framer-motion";
import { Navbar } from "@/components/navbar";
import { Footer } from "@/components/footer";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Github, ExternalLink, Filter } from "lucide-react";

const allProjects = [
  {
    title: "Aetheria RPG",
    category: "Ядро сервера",
    description: "Полное кастомное ядро для MMORPG сервера, обслуживающее 500+ игроков одновременно. Включает системы навыков, классов и квестов.",
    tags: ["Java", "Paper API", "Redis", "SQL"],
    image: "https://images.unsplash.com/photo-1605901309584-818e25960b8f?q=80&w=2000&auto=format&fit=crop"
  },
  {
    title: "TechReborn Addon",
    category: "Fabric Мод",
    description: "Индустриальный тех-мод, добавляющий сложные механизмы, энергосистемы и инструменты автоматизации.",
    tags: ["Fabric", "Mixin", "Java"],
    image: "https://images.unsplash.com/photo-1550745165-9bc0b252726f?q=80&w=2000&auto=format&fit=crop"
  },
  {
    title: "SkyBlock Eco",
    category: "Плагин экономики",
    description: "Продвинутая экономическая система с динамическим ценообразованием, фондовыми рынками и магазинами игроков.",
    tags: ["Spigot", "Vault", "Economy"],
    image: "https://images.unsplash.com/photo-1614726365723-49cfae92782f?q=80&w=2000&auto=format&fit=crop"
  },
  {
    title: "Custom HUD",
    category: "Клиентский мод",
    description: "Полностью настраиваемый интерфейс для игрока с отображением брони, эффектов и статистики.",
    tags: ["Fabric", "Rendering", "Java"],
    image: "https://images.unsplash.com/photo-1542751371-adc38448a05e?q=80&w=2000&auto=format&fit=crop"
  },
  {
    title: "Proxy Manager",
    category: "Инструментарий",
    description: "Система управления сетью серверов через BungeeCord/Velocity с защитой от DDoS.",
    tags: ["Java", "Velocity", "Security"],
    image: "https://images.unsplash.com/photo-1558494949-ef010cbdcc48?q=80&w=2000&auto=format&fit=crop"
  },
  {
    title: "Web Dashboard",
    category: "Веб-интерфейс",
    description: "Панель управления сервером из браузера: консоль, управление файлами и донат-шоп.",
    tags: ["React", "TypeScript", "Node.js"],
    image: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?q=80&w=2000&auto=format&fit=crop"
  }
];

export default function Portfolio() {
  return (
    <div className="min-h-screen bg-background text-foreground font-sans">
      <Navbar />
      
      <main className="pt-32 pb-24">
        <div className="container mx-auto px-4">
          <header className="max-w-3xl mb-16">
            <motion.h1 
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              className="text-4xl md:text-6xl font-bold font-heading text-white mb-6"
            >
              Наше <span className="text-primary">Портфолио</span>
            </motion.h1>
            <motion.p 
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.1 }}
              className="text-xl text-muted-foreground"
            >
              Исследуйте наши последние работы: от серверных плагинов до масштабных модификаций и веб-систем.
            </motion.p>
          </header>

          <div className="flex flex-wrap gap-4 mb-12">
            {["Все", "Моды", "Плагины", "Веб", "Ядро"].map((filter) => (
              <Button key={filter} variant="outline" className="border-white/10 hover:border-primary/50 text-muted-foreground hover:text-primary">
                {filter}
              </Button>
            ))}
            <div className="ml-auto flex items-center gap-2 text-muted-foreground">
              <Filter className="w-4 h-4" />
              <span className="text-sm">Фильтры</span>
            </div>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {allProjects.map((project, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: index * 0.1 }}
                className="group rounded-xl overflow-hidden border border-white/10 bg-secondary/30 hover:border-primary/50 transition-all"
              >
                <div className="relative h-64 overflow-hidden">
                  <div className="absolute inset-0 bg-primary/20 mix-blend-overlay z-10 opacity-0 group-hover:opacity-100 transition-opacity" />
                  <img 
                    src={project.image} 
                    alt={project.title}
                    className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
                  />
                  <div className="absolute top-4 left-4 z-20">
                    <Badge className="bg-background/80 backdrop-blur text-white border-white/10">
                      {project.category}
                    </Badge>
                  </div>
                </div>
                
                <div className="p-8">
                  <h3 className="text-2xl font-bold font-heading text-white mb-3 group-hover:text-primary transition-colors">
                    {project.title}
                  </h3>
                  <p className="text-muted-foreground text-sm leading-relaxed mb-6">
                    {project.description}
                  </p>
                  
                  <div className="flex flex-wrap gap-2 mb-8">
                    {project.tags.map((tag) => (
                      <span key={tag} className="text-xs font-mono px-3 py-1 rounded bg-white/5 text-white/70 border border-white/5">
                        {tag}
                      </span>
                    ))}
                  </div>

                  <div className="grid grid-cols-2 gap-4">
                    <Button variant="ghost" className="border border-white/10 hover:bg-white/5 hover:text-primary h-12">
                      <Github className="w-4 h-4 mr-2" />
                      Код
                    </Button>
                    <Button className="bg-primary/10 text-primary hover:bg-primary hover:text-background font-bold border border-primary/20 h-12">
                      <ExternalLink className="w-4 h-4 mr-2" />
                      Демо
                    </Button>
                  </div>
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </main>
      
      <Footer />
    </div>
  );
}
