import React from 'react';
import { motion } from 'framer-motion';
import './Services.css';

const Services = () => {
  const services = [
    {
      icon: 'fas fa-chart-line',
      title: 'MRM (Marketing Resource Management)',
      description: 'Управление маркетинговыми ресурсами, планирование кампаний, аналитика и оптимизация маркетинговых процессов.',
      features: [
        'Планирование маркетинговых кампаний',
        'Управление ресурсами и бюджетами',
        'Аналитика и отчетность',
        'Автоматизация маркетинговых процессов'
      ]
    },
    {
      icon: 'fas fa-robot',
      title: 'Автоматизация бизнес-процессов',
      description: 'Внедрение современных решений для автоматизации рутинных задач и повышения эффективности работы.',
      features: [
        'RPA (Robotic Process Automation)',
        'NoCode платформы и решения',
        'Автоматизация скриптами',
        'Workflow автоматизация',
        'API интеграции'
      ]
    },
    {
      icon: 'fas fa-code',
      title: 'Разработка программного обеспечения',
      description: 'Создание качественных программных решений под ваши бизнес-потребности.',
      features: [
        'Веб-приложения и серверные решения',
        'Мобильные приложения',
        'Корпоративные системы',
        'Облачные решения',
        'Поддержка и сопровождение'
      ]
    },
    {
      icon: 'fas fa-server',
      title: 'Серверные приложения и интеграции',
      description: 'Разработка и поддержка серверных решений с интеграцией в существующую инфраструктуру.',
      features: [
        'Разработка серверных приложений',
        'Интеграция с 1C, ERP, CRM',
        'Подключение внешних сервисов',
        'API разработка и интеграция',
        'Техническая поддержка'
      ]
    },
    {
      icon: 'fas fa-cloud',
      title: 'DevOps и CI/CD',
      description: 'Внедрение современных практик разработки и развертывания для ускорения delivery.',
      features: [
        'Внедрение CI/CD пайплайнов',
        'DevOps практики и инструменты',
        'Автоматизация развертывания',
        'Контейнеризация (Docker, Kubernetes)',
        'Мониторинг и логирование'
      ]
    },
    {
      icon: 'fas fa-sitemap',
      title: 'Архитектура и масштабирование',
      description: 'Проектирование надежной и масштабируемой архитектуры для ваших систем.',
      features: [
        'Проектирование микросервисной архитектуры',
        'Масштабирование систем',
        'Оптимизация производительности',
        'Архитектурные решения',
        'Техническое консультирование'
      ]
    },
    {
      icon: 'fas fa-chart-bar',
      title: 'Мониторинг и оптимизация',
      description: 'Комплексный мониторинг и оптимизация производительности ваших систем.',
      features: [
        'Настройка Grafana и мониторинга',
        'Оптимизация индексации БД',
        'Анализ нагрузки и производительности',
        'Проактивный мониторинг',
        'Отчеты и аналитика'
      ]
    },
    {
      icon: 'fas fa-users',
      title: 'Менторинг и управление командой',
      description: 'Развитие команды разработчиков и внедрение лучших практик.',
      features: [
        'Менторинг разработчиков',
        'Управление командой проектов',
        'Код-ревью и лучшие практики',
        'Обучение и развитие команды',
        'Внедрение процессов разработки'
      ]
    },
    {
      icon: 'fas fa-share-alt',
      title: 'SMM продвижение',
      description: 'Комплексное продвижение в социальных сетях для увеличения узнаваемости бренда.',
      features: [
        'Стратегия SMM',
        'Контент-маркетинг',
        'Таргетированная реклама',
        'Аналитика и отчеты',
        'Управление сообществами'
      ]
    }
  ];

  return (
    <section id="services" className="services">
      <div className="container">
        <motion.div 
          className="section-header"
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
        >
          <h2 className="section-title">Наши услуги</h2>
          <p className="section-subtitle">Комплексные решения для вашего бизнеса</p>
        </motion.div>
        
        <div className="services-grid">
          {services.map((service, index) => (
            <motion.div 
              key={index}
              className="service-card"
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: index * 0.1 }}
              viewport={{ once: true }}
              whileHover={{ y: -4 }}
            >
              <div className="service-icon">
                <i className={service.icon}></i>
              </div>
              <h3>{service.title}</h3>
              <p>{service.description}</p>
              <ul className="service-features">
                {service.features.map((feature, featureIndex) => (
                  <li key={featureIndex}>{feature}</li>
                ))}
              </ul>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default Services; 