import { motion } from 'framer-motion';
import { User, Heart, Target, Coffee } from 'lucide-react';
import { useLanguage } from '../contexts/LanguageContext';

const About = () => {
  const { t } = useLanguage();
  
  const stats = [
    { icon: <User size={24} />, value: t('about.stats.year'), label: t('about.stats.yearLabel') },
    { icon: <Heart size={24} />, value: t('about.stats.passion'), label: t('about.stats.passionLabel') },
    { icon: <Target size={24} />, value: t('about.stats.goals'), label: t('about.stats.goalsLabel') },
    { icon: <Coffee size={24} />, value: t('about.stats.fuel'), label: t('about.stats.fuelLabel') }
  ];

  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.2,
        delayChildren: 0.3
      }
    }
  };

  const itemVariants = {
    hidden: { opacity: 0, y: 50 },
    visible: {
      opacity: 1,
      y: 0,
      transition: {
        duration: 0.6,
        ease: [0.25, 0.1, 0.25, 1] as const
      }
    }
  };

  return (
    <section id="about" className="about">
      <div className="container">
        <motion.div
          key="about-header"
          className="section-header"
          initial={{ opacity: 0, y: 50 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
        >
          <h2 className="section-title">{t('about.title')}</h2>
          <p className="section-subtitle">
            {t('about.subtitle')}
          </p>
        </motion.div>

        <div className="about-content">
          <motion.div
            key="about-text"
            className="about-text"
            variants={containerVariants}
            initial="hidden"
            whileInView="visible"
            viewport={{ once: true }}
          >
            <motion.div className="about-card" variants={itemVariants}>
              <h3>{t('about.journey.title')}</h3>
              <p>
                {t('about.journey.content')}
              </p>
            </motion.div>

            <motion.div className="about-card" variants={itemVariants}>
              <h3>{t('about.passion.title')}</h3>
              <p>
                {t('about.passion.content')}
              </p>
            </motion.div>

            <motion.div className="about-card" variants={itemVariants}>
              <h3>{t('about.goals.title')}</h3>
              <p>
                {t('about.goals.content')}
              </p>
            </motion.div>
          </motion.div>

          <motion.div
            key="about-stats"
            className="about-stats"
            variants={containerVariants}
            initial="hidden"
            whileInView="visible"
            viewport={{ once: true }}
          >
            {stats.map((stat, index) => (
              <motion.div
                key={`stat-${index}`}
                className="stat-card"
                variants={itemVariants}
                whileHover={{
                  scale: 1.05,
                  y: -5,
                  transition: { duration: 0.3 }
                }}
              >
                <div className="stat-icon">
                  {stat.icon}
                </div>
                <div className="stat-value">{stat.value}</div>
                <div className="stat-label">{stat.label}</div>
              </motion.div>
            ))}
          </motion.div>
        </div>

        <motion.div
          key="about-highlight"
          className="about-highlight"
          initial={{ opacity: 0, scale: 0.9 }}
          whileInView={{ opacity: 1, scale: 1 }}
          transition={{ duration: 0.8, delay: 0.5 }}
          viewport={{ once: true }}
        >
          <div className="highlight-content">
            <h3>{t('about.quote.title')}</h3>
            <p>
              "{t('about.quote.content')}"
            </p>
            <cite>- {t('about.quote.author')}</cite>
          </div>
        </motion.div>
      </div>
    </section>
  );
};

export default About;