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

const Portfolio = () => {
  const projects = [
    {
      title: 'Система управления складом',
      description: 'Автоматизация складских процессов с интеграцией в 1C',
      category: 'Автоматизация',
      icon: 'fas fa-warehouse',
      technologies: ['1C', 'SQL', 'API', 'DevOps']
    },
    {
      title: 'CRM для логистики',
      description: 'Комплексная система управления клиентами и маршрутами',
      category: 'CRM',
      icon: 'fas fa-truck',
      technologies: ['React', 'Node.js', 'PostgreSQL', 'Docker']
    },
    {
      title: 'Платформа аналитики',
      description: 'Система сбора и анализа данных в реальном времени',
      category: 'Аналитика',
      icon: 'fas fa-chart-line',
      technologies: ['Python', 'Grafana', 'Kafka', 'Kubernetes']
    },
    {
      title: 'Мобильное приложение',
      description: 'Кроссплатформенное приложение для управления проектами',
      category: 'Мобильная разработка',
      icon: 'fas fa-mobile-alt',
      technologies: ['React Native', 'Firebase', 'Redux', 'TypeScript']
    },
    {
      title: 'API Gateway',
      description: 'Централизованная система управления API и микросервисами',
      category: 'Архитектура',
      icon: 'fas fa-network-wired',
      technologies: ['Kong', 'Docker', 'Kubernetes', 'Prometheus']
    },
    {
      title: 'Система мониторинга',
      description: 'Комплексный мониторинг инфраструктуры и приложений',
      category: 'DevOps',
      icon: 'fas fa-server',
      technologies: ['Grafana', 'Prometheus', 'ELK Stack', 'Ansible']
    }
  ];

  return (
    <section id="portfolio" className="portfolio">
      <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="portfolio-grid">
          {projects.map((project, index) => (
            <motion.div 
              key={index}
              className="portfolio-item"
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: index * 0.1 }}
              viewport={{ once: true }}
              whileHover={{ y: -5 }}
            >
              <div className="portfolio-image">
                <div className="portfolio-icon">
                  <i className={project.icon}></i>
                </div>
                <div className="portfolio-overlay">
                  <div className="portfolio-content">
                    <h3>{project.title}</h3>
                    <p>{project.description}</p>
                    <div className="portfolio-category">{project.category}</div>
                    <div className="portfolio-technologies">
                      {project.technologies.map((tech, techIndex) => (
                        <span key={techIndex} className="tech-tag">{tech}</span>
                      ))}
                    </div>
                  </div>
                </div>
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default Portfolio; 