import { motion } from "framer-motion";
import { Code, Box, Cpu, Server, Wrench, Globe } from "lucide-react";

const services = [
  {
    icon: Box,
    title: "Custom Mods",
    description: "Tailor-made modifications for Fabric and Forge. New items, blocks, mechanics, and dimensions."
  },
  {
    icon: Code,
    title: "Spigot/Paper Plugins",
    description: "High-performance server-side plugins. From mini-games to complex economy systems."
  },
  {
    icon: Server,
    title: "Server Setup",
    description: "Complete server architecture, optimization, and security configuration for large scale networks."
  },
  {
    icon: Globe,
    title: "Web Integration",
    description: "Connect your Minecraft server to the web. Leaderboards, stores, and ban lists."
  },
  {
    icon: Cpu,
    title: "Performance Optimization",
    description: "Deep analysis and optimization of server performance to eliminate lag."
  },
  {
    icon: Wrench,
    title: "Maintenance",
    description: "Ongoing support and updates for your existing codebase."
  }
];

export function Services() {
  return (
    <section id="services" className="py-24 bg-background relative overflow-hidden">
      <div className="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-primary/20 to-transparent" />
      
      <div className="container mx-auto px-4 relative z-10">
        <div className="text-center max-w-2xl mx-auto mb-16">
          <h2 className="text-3xl md:text-5xl font-bold font-heading text-white mb-4">
            Our <span className="text-primary">Services</span>
          </h2>
          <p className="text-muted-foreground">
            We provide end-to-end development solutions for the Minecraft ecosystem.
          </p>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          {services.map((service, index) => (
            <motion.div
              key={index}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ delay: index * 0.1 }}
              viewport={{ once: true }}
              className="group relative p-6 rounded-xl border border-white/5 bg-white/[0.02] hover:bg-white/[0.05] transition-all hover:border-primary/50"
            >
              <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity rounded-xl" />
              
              <div className="relative z-10">
                <div className="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4 group-hover:bg-primary/20 transition-colors">
                  <service.icon className="w-6 h-6 text-primary" />
                </div>
                <h3 className="text-xl font-bold font-heading text-white mb-2">{service.title}</h3>
                <p className="text-muted-foreground text-sm leading-relaxed">
                  {service.description}
                </p>
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}
