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

const services = [
  {
    icon: Box,
    title: "Кастомные моды",
    description: "Индивидуальные модификации для Fabric и Forge. Новые предметы, блоки, механики и измерения."
  },
  {
    icon: Code,
    title: "Плагины Spigot/Paper",
    description: "Высокопроизводительные серверные плагины. От мини-игр до сложных экономических систем."
  },
  {
    icon: Server,
    title: "Настройка серверов",
    description: "Полная архитектура сервера, оптимизация и конфигурация безопасности для крупных сетей."
  },
  {
    icon: Globe,
    title: "Веб-интеграция",
    description: "Свяжите ваш Minecraft-сервер с вебом. Таблицы лидеров, магазины и списки банов."
  },
  {
    icon: Cpu,
    title: "Оптимизация производительности",
    description: "Глубокий анализ и оптимизация работы сервера для устранения задержек."
  },
  {
    icon: Wrench,
    title: "Поддержка",
    description: "Постоянная поддержка и обновление вашего существующего кода."
  }
];

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">
            Наши <span className="text-primary">Услуги</span>
          </h2>
          <p className="text-muted-foreground">
            Мы предоставляем комплексные решения для разработки в экосистеме Minecraft.
          </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>
  );
}
