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

const projects = [
  {
    title: "Aetheria RPG",
    category: "Full Server Core",
    description: "A complete custom core for an MMORPG server handling 500+ concurrent players. Features custom skills, classes, and quest systems.",
    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 Mod",
    description: "An industrial tech mod adding complex machinery, power systems, and automation tools to the game.",
    tags: ["Fabric", "Mixin", "Java"],
    image: "https://images.unsplash.com/photo-1550745165-9bc0b252726f?q=80&w=2000&auto=format&fit=crop"
  },
  {
    title: "SkyBlock Eco",
    category: "Economy Plugin",
    description: "Advanced economy system with dynamic pricing, stock markets, and player shops.",
    tags: ["Spigot", "Vault", "Economy"],
    image: "https://images.unsplash.com/photo-1614726365723-49cfae92782f?q=80&w=2000&auto=format&fit=crop"
  }
];

export function Portfolio() {
  return (
    <section id="portfolio" className="py-24 bg-background relative">
      <div className="container mx-auto px-4">
        <div className="flex flex-col md:flex-row justify-between items-end mb-12 gap-6">
          <div className="max-w-xl">
            <h2 className="text-3xl md:text-5xl font-bold font-heading text-white mb-4">
              Featured <span className="text-primary">Projects</span>
            </h2>
            <p className="text-muted-foreground">
              A selection of our finest work in the Minecraft development space.
            </p>
          </div>
          <Button variant="outline" className="border-primary/20 hover:bg-primary/10 text-primary hidden md:flex">
            View All Projects
          </Button>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          {projects.map((project, index) => (
            <motion.div
              key={index}
              initial={{ opacity: 0, scale: 0.95 }}
              whileInView={{ opacity: 1, scale: 1 }}
              viewport={{ once: true }}
              className="group rounded-xl overflow-hidden border border-white/10 bg-secondary/30 hover:border-primary/50 transition-all"
            >
              <div className="relative h-48 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-6">
                <h3 className="text-2xl font-bold font-heading text-white mb-2 group-hover:text-primary transition-colors">
                  {project.title}
                </h3>
                <p className="text-muted-foreground text-sm mb-4 line-clamp-3">
                  {project.description}
                </p>
                
                <div className="flex flex-wrap gap-2 mb-6">
                  {project.tags.map((tag) => (
                    <span key={tag} className="text-xs font-mono px-2 py-1 rounded bg-white/5 text-white/70 border border-white/5">
                      {tag}
                    </span>
                  ))}
                </div>

                <div className="flex gap-4">
                  <Button size="sm" variant="ghost" className="w-full border border-white/10 hover:bg-white/5 hover:text-primary">
                    <Github className="w-4 h-4 mr-2" />
                    Code
                  </Button>
                  <Button size="sm" className="w-full bg-primary/10 text-primary hover:bg-primary hover:text-background font-bold border border-primary/20">
                    <ExternalLink className="w-4 h-4 mr-2" />
                    Demo
                  </Button>
                </div>
              </div>
            </motion.div>
          ))}
        </div>
        
        <div className="mt-8 text-center md:hidden">
          <Button variant="outline" className="border-primary/20 hover:bg-primary/10 text-primary w-full">
            View All Projects
          </Button>
        </div>
      </div>
    </section>
  );
}
