import React, { useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import './Achievements.css';

const Achievements = () => {
  const [counters, setCounters] = useState({
    projects: 0,
    clients: 0,
    experience: 0,
    satisfaction: 0
  });

  const achievements = [
    {
      icon: 'fas fa-trophy',
      title: 'Лучший проект года',
      description: 'Награда за инновационное решение в области автоматизации бизнес-процессов'
    },
    {
      icon: 'fas fa-award',
      title: 'Сертификация ISO',
      description: 'Получение международного сертификата качества разработки программного обеспечения'
    },
    {
      icon: 'fas fa-star',
      title: 'Высокий рейтинг',
      description: 'Средняя оценка клиентов 4.9/5.0 на протяжении 3 лет'
    },
    {
      icon: 'fas fa-medal',
      title: 'Эксперт DevOps',
      description: 'Признание как ведущая компания в области DevOps и CI/CD практик'
    },
    {
      icon: 'fas fa-crown',
      title: 'Лидер рынка',
      description: 'Входит в топ-10 компаний по разработке серверных приложений'
    },
    {
      icon: 'fas fa-gem',
      title: 'Премиум партнер',
      description: 'Статус премиум-партнера ведущих технологических компаний'
    }
  ];

  useEffect(() => {
    const targetCounts = {
      projects: 150,
      clients: 80,
      experience: 8,
      satisfaction: 98
    };

    const duration = 2000; // 2 seconds
    const interval = 50; // Update every 50ms
    const steps = duration / interval;
    const increments = {
      projects: targetCounts.projects / steps,
      clients: targetCounts.clients / steps,
      experience: targetCounts.experience / steps,
      satisfaction: targetCounts.satisfaction / steps
    };

    let currentStep = 0;
    const timer = setInterval(() => {
      currentStep++;
      
      setCounters(prev => ({
        projects: Math.min(prev.projects + increments.projects, targetCounts.projects),
        clients: Math.min(prev.clients + increments.clients, targetCounts.clients),
        experience: Math.min(prev.experience + increments.experience, targetCounts.experience),
        satisfaction: Math.min(prev.satisfaction + increments.satisfaction, targetCounts.satisfaction)
      }));

      if (currentStep >= steps) {
        clearInterval(timer);
        setCounters(targetCounts);
      }
    }, interval);

    return () => clearInterval(timer);
  }, []);

  return (
    <section id="achievements" className="achievements">
      <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="achievements-content">
          <motion.div 
            className="stats-section"
            initial={{ opacity: 0, x: -50 }}
            whileInView={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.8, delay: 0.2 }}
            viewport={{ once: true }}
          >
            <div className="stats-grid">
              <motion.div 
                className="stat-card"
                initial={{ opacity: 0, scale: 0.8 }}
                whileInView={{ opacity: 1, scale: 1 }}
                transition={{ duration: 0.6, delay: 0.4 }}
                viewport={{ once: true }}
                whileHover={{ scale: 1.05 }}
              >
                <div className="stat-icon">
                  <i className="fas fa-rocket"></i>
                </div>
                <div className="stat-number">{Math.round(counters.projects)}</div>
                <div className="stat-label">Реализованных проектов</div>
              </motion.div>

              <motion.div 
                className="stat-card"
                initial={{ opacity: 0, scale: 0.8 }}
                whileInView={{ opacity: 1, scale: 1 }}
                transition={{ duration: 0.6, delay: 0.5 }}
                viewport={{ once: true }}
                whileHover={{ scale: 1.05 }}
              >
                <div className="stat-icon">
                  <i className="fas fa-users"></i>
                </div>
                <div className="stat-number">{Math.round(counters.clients)}</div>
                <div className="stat-label">Довольных клиентов</div>
              </motion.div>

              <motion.div 
                className="stat-card"
                initial={{ opacity: 0, scale: 0.8 }}
                whileInView={{ opacity: 1, scale: 1 }}
                transition={{ duration: 0.6, delay: 0.6 }}
                viewport={{ once: true }}
                whileHover={{ scale: 1.05 }}
              >
                <div className="stat-icon">
                  <i className="fas fa-clock"></i>
                </div>
                <div className="stat-number">{Math.round(counters.experience)}</div>
                <div className="stat-label">Лет опыта</div>
              </motion.div>

              <motion.div 
                className="stat-card"
                initial={{ opacity: 0, scale: 0.8 }}
                whileInView={{ opacity: 1, scale: 1 }}
                transition={{ duration: 0.6, delay: 0.7 }}
                viewport={{ once: true }}
                whileHover={{ scale: 1.05 }}
              >
                <div className="stat-icon">
                  <i className="fas fa-heart"></i>
                </div>
                <div className="stat-number">{Math.round(counters.satisfaction)}%</div>
                <div className="stat-label">Удовлетворенность</div>
              </motion.div>
            </div>
          </motion.div>

          <motion.div 
            className="awards-section"
            initial={{ opacity: 0, x: 50 }}
            whileInView={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.8, delay: 0.4 }}
            viewport={{ once: true }}
          >
            <h3>Награды и признания</h3>
            <div className="awards-grid">
              {achievements.map((achievement, index) => (
                <motion.div 
                  key={index}
                  className="award-card"
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.6, delay: 0.6 + index * 0.1 }}
                  viewport={{ once: true }}
                  whileHover={{ y: -5 }}
                >
                  <div className="award-icon">
                    <i className={achievement.icon}></i>
                  </div>
                  <h4>{achievement.title}</h4>
                  <p>{achievement.description}</p>
                </motion.div>
              ))}
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  );
};

export default Achievements; 