import { Cloud, Shield, Cpu, Database, Server, Settings } from 'lucide-react';
import { ImageWithFallback } from './figma/ImageWithFallback';

const services = [
  {
    icon: Cloud,
    title: 'Облачные решения',
    description: 'Миграция и управление инфраструктурой на базе Яндекс.Облако и VK Cloud',
    gradient: 'from-blue-50 to-cyan-50',
    iconBg: 'bg-white',
    iconColor: 'text-blue-600'
  },
  {
    icon: Shield,
    title: 'Кибербезопасность',
    description: 'Комплексная защита периметра и данных с решениями Kaspersky',
    gradient: 'from-violet-50 to-purple-50',
    iconBg: 'bg-white',
    iconColor: 'text-violet-600'
  },
  {
    icon: Cpu,
    title: 'Цифровая трансформация',
    description: 'Автоматизация процессов на платформах 1С и Галактика',
    gradient: 'from-emerald-50 to-teal-50',
    iconBg: 'bg-white',
    iconColor: 'text-emerald-600'
  },
  {
    icon: Database,
    title: 'Управление данными',
    description: 'Развертывание и поддержка СУБД Postgres Pro',
    gradient: 'from-orange-50 to-amber-50',
    iconBg: 'bg-white',
    iconColor: 'text-orange-600'
  },
  {
    icon: Server,
    title: 'Серверная инфраструктура',
    description: 'Поставка и настройка оборудования Kraftway',
    gradient: 'from-pink-50 to-rose-50',
    iconBg: 'bg-white',
    iconColor: 'text-pink-600'
  },
  {
    icon: Settings,
    title: 'Системная интеграция',
    description: 'Построение корпоративной ИТ-архитектуры на Astra Linux',
    gradient: 'from-indigo-50 to-blue-50',
    iconBg: 'bg-white',
    iconColor: 'text-indigo-600'
  }
];

export function Services() {
  return (
    <section id="services" className="py-24 bg-white">
      <div className="max-w-[1600px] mx-auto px-6 xl:px-12 2xl:px-16">
        <div className="max-w-3xl mb-16">
          <p className="text-sm uppercase tracking-wider text-gray-500 mb-4">
            Услуги
          </p>
          <h2 className="text-4xl lg:text-5xl text-gray-900 mb-6">
            Комплексные IT-решения для вашего бизнеса
          </h2>
          <p className="text-xl text-gray-600">
            Полный цикл: от стратегии до технической поддержки
          </p>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          {services.map((service, index) => {
            const Icon = service.icon;
            const floatClasses = [
              'animate-float',
              'animate-float-delay-1',
              'animate-float-delay-2',
              'animate-float-delay-3',
              'animate-float-delay-4',
              'animate-float-delay-5'
            ];
            const floatClass = floatClasses[index % 6];
            
            return (
              <div
                key={index}
                className="group bg-white rounded-2xl border border-gray-100 hover:border-blue-200 hover:shadow-xl transition-all duration-300 overflow-hidden"
              >
                <div className={`relative h-48 overflow-hidden bg-gradient-to-br ${service.gradient} flex items-center justify-center`}>
                  <div className={`w-20 h-20 ${service.iconBg} rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300 shadow-md ${floatClass}`}>
                    <Icon className={`w-10 h-10 ${service.iconColor}`} />
                  </div>
                </div>
                
                <div className="p-6">
                  <h3 className="text-xl text-gray-900 mb-3">
                    {service.title}
                  </h3>
                  
                  <p className="text-gray-600 mb-4 leading-relaxed">
                    {service.description}
                  </p>
                  
                  <button className="text-blue-600 hover:text-blue-700 transition-colors inline-flex items-center gap-2">
                    Подробнее
                    <span className="transition-all">&rarr;</span>
                  </button>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}