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

const About = () => {
  const stats = [
    { number: 50, label: 'Проектов', suffix: '+' },
    { number: 5, label: 'Лет опыта', suffix: '+' },
    { number: 100, label: 'Довольных клиентов', suffix: '%' },
    { number: 24, label: 'Часа поддержки', suffix: '/7' }
  ];

  const teamMembers = [
    { name: 'Алексей', role: 'Tech Lead', experience: '8 лет' },
    { name: 'Мария', role: 'DevOps Engineer', experience: '6 лет' },
    { name: 'Дмитрий', role: 'Full Stack Developer', experience: '7 лет' },
    { name: 'Елена', role: 'SMM Manager', experience: '5 лет' }
  ];

  return (
    <section id="about" className="about">
      <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="about-content">
          <motion.div 
            className="about-text"
            initial={{ opacity: 0, x: -50 }}
            whileInView={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.8, delay: 0.2 }}
            viewport={{ once: true }}
          >
            <h3>Ваш надежный партнер в цифровом мире</h3>
            <p>
              CoreSync специализируется на разработке серверных приложений, интеграции с 1C/ERP/CRM системами, 
              автоматизации бизнес-процессов и комплексном SMM-продвижении. Мы помогаем компаниям 
              трансформировать их бизнес-процессы с помощью современных технологических решений.
            </p>
            <p>
              Наша команда экспертов имеет многолетний опыт в области DevOps, CI/CD, архитектуры систем 
              и управления проектами. Мы не просто разрабатываем решения - мы создаем экосистемы, 
              которые масштабируются вместе с вашим бизнесом.
            </p>
            
            <div className="about-features">
              <div className="feature">
                <i className="fas fa-rocket"></i>
                <span>Быстрая разработка</span>
              </div>
              <div className="feature">
                <i className="fas fa-shield-alt"></i>
                <span>Надежность и безопасность</span>
              </div>
              <div className="feature">
                <i className="fas fa-users"></i>
                <span>Поддержка 24/7</span>
              </div>
              <div className="feature">
                <i className="fas fa-chart-line"></i>
                <span>Измеримые результаты</span>
              </div>
            </div>
          </motion.div>

          <motion.div 
            className="about-stats"
            initial={{ opacity: 0, x: 50 }}
            whileInView={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.8, delay: 0.4 }}
            viewport={{ once: true }}
          >
            <div className="stats-grid">
              {stats.map((stat, index) => (
                <motion.div 
                  key={index}
                  className="stat-item"
                  initial={{ opacity: 0, scale: 0.8 }}
                  whileInView={{ opacity: 1, scale: 1 }}
                  transition={{ duration: 0.6, delay: 0.6 + index * 0.1 }}
                  viewport={{ once: true }}
                  whileHover={{ scale: 1.05 }}
                >
                  <div className="stat-number">
                    <motion.span
                      initial={{ number: 0 }}
                      whileInView={{ number: stat.number }}
                      transition={{ duration: 2, delay: 0.8 + index * 0.1 }}
                      viewport={{ once: true }}
                    >
                      {Math.round(stat.number)}
                    </motion.span>
                    {stat.suffix}
                  </div>
                  <div className="stat-label">{stat.label}</div>
                </motion.div>
              ))}
            </div>
          </motion.div>
        </div>

        <motion.div 
          className="team-section"
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.6 }}
          viewport={{ once: true }}
        >
          <h3>Наша команда</h3>
          <div className="team-grid">
            {teamMembers.map((member, index) => (
              <motion.div 
                key={index}
                className="team-member"
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.6, delay: 0.8 + index * 0.1 }}
                viewport={{ once: true }}
                whileHover={{ y: -5 }}
              >
                <div className="member-avatar">
                  <i className="fas fa-user"></i>
                </div>
                <div className="member-info">
                  <h4>{member.name}</h4>
                  <p className="member-role">{member.role}</p>
                  <p className="member-experience">{member.experience}</p>
                </div>
              </motion.div>
            ))}
          </div>
        </motion.div>
      </div>
    </section>
  );
};

export default About; 