import { motion } from 'framer-motion';
import { GraduationCap, Calendar, MapPin, Award, BookOpen, Target } from 'lucide-react';
import { useLanguage } from '../contexts/LanguageContext';

const Education = () => {
  const { t } = useLanguage();
  const education = [
    {
      id: 1,
      degree: t('education.degree'),
      school: t('education.school'),
      location: t('education.location'),
      period: t('education.period'),
      currentYear: t('education.currentYear'),
      status: t('education.status'),
      description: t('education.description'),
      highlights: [
        t('education.highlights.0'),
        t('education.highlights.1'),
        t('education.highlights.2'),
        t('education.highlights.3'),
        t('education.highlights.4'),
        t('education.highlights.5')
      ],
      color: "#4CAF50",
      icon: <GraduationCap size={24} />
    },
    {
      id: 2,
      degree: t('education.highschool.degree'),
      school: t('education.highschool.school'),
      location: t('education.highschool.location'),
      period: t('education.highschool.period'),
      currentYear: "",
      status: t('education.highschool.status'),
      description: t('education.highschool.description'),
      highlights: [
        t('education.highschool.highlights.0'),
        t('education.highschool.highlights.1'),
        t('education.highschool.highlights.2')
      ],
      color: "#3F51B5",
      icon: <GraduationCap size={24} />
    }
  ];

  const certifications = [
    {
      title: t('education.cert1.title'),
      provider: t('education.cert1.provider'),
      date: t('education.cert1.date'),
      skills: ["Dart", "Flutter", "Firebase", "API REST"],
      color: "#2196F3"
    },
    {
      title: t('education.cert2.title'),
      provider: t('education.cert2.provider'),
      date: t('education.cert2.date'),
      skills: ["React", "TypeScript", "Hooks", "Context API"],
      color: "#FF9800"
    }
  ];

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

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

  return (
    <section id="education" className="education">
      <div className="container">
        <motion.div
          key="education-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('education.title')}</h2>
          <p className="section-subtitle">
            {t('education.subtitle')}
          </p>
        </motion.div>

        <div className="education-content">
          {/* Formation principale */}
          <motion.div
            key="education-main"
            className="education-main"
            variants={containerVariants}
            initial="hidden"
            whileInView="visible"
            viewport={{ once: true }}
          >
            {education.map((edu) => (
              <motion.div
                key={edu.id}
                className="education-card main-education"
                variants={itemVariants}
                whileHover={{
                  scale: 1.02,
                  y: -5,
                  transition: { duration: 0.3 }
                }}
              >
                <div className="education-timeline">
                  <div
                    className="timeline-dot"
                    style={{ backgroundColor: edu.color }}
                  >
                    {edu.icon}
                  </div>
                  <div className="timeline-line"></div>
                </div>

                <div className="education-content-card">
                  <div className="education-header">
                    <div className="education-title">
                      <h3>{edu.degree}</h3>
                      <div className="education-meta">
                        <span className="school-name">
                          <BookOpen size={16} />
                          {edu.school}
                        </span>
                        <span className="location">
                          <MapPin size={16} />
                          {edu.location}
                        </span>
                        <span className="period">
                          <Calendar size={16} />
                          {edu.period}
                        </span>
                      </div>
                    </div>
                    <div className="education-status">
                      <span
                        className="status-badge"
                        style={{ backgroundColor: `${edu.color}20`, color: edu.color }}
                      >
                        {edu.status}
                      </span>
                      <span className="current-year">{edu.currentYear}</span>
                    </div>
                  </div>

                  <p className="education-description">{edu.description}</p>

                  <div className="education-highlights">
                    <h4>
                      <Target size={16} />
                      Matières principales
                    </h4>
                    <div className="highlights-grid">
                      {edu.highlights.map((highlight, index) => (
                        <motion.span
                          key={index}
                          className="highlight-tag"
                          initial={{ opacity: 0, scale: 0.8 }}
                          whileInView={{ opacity: 1, scale: 1 }}
                          transition={{ duration: 0.3, delay: index * 0.1 }}
                          viewport={{ once: true }}
                        >
                          {highlight}
                        </motion.span>
                      ))}
                    </div>
                  </div>
                </div>
              </motion.div>
            ))}
          </motion.div>

          {/* Certifications et formations complémentaires */}
          <motion.div
            className="certifications"
            initial={{ opacity: 0, y: 50 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.3 }}
            viewport={{ once: true }}
          >
            <h3 className="certifications-title">
              <Award size={24} />
              {t('education.certifications.title')}
            </h3>
            <div className="certifications-grid">
              {certifications.map((cert, index) => (
                <motion.div
                  key={index}
                  className="certification-card"
                  initial={{ opacity: 0, y: 30 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.5, delay: index * 0.1 }}
                  whileHover={{
                    scale: 1.03,
                    y: -3,
                    transition: { duration: 0.2 }
                  }}
                  viewport={{ once: true }}
                >
                  <div className="cert-header">
                    <h4>{cert.title}</h4>
                    <span className="cert-provider">{cert.provider}</span>
                    <span className="cert-date">{cert.date}</span>
                  </div>
                  <div className="cert-skills">
                    {cert.skills.map((skill, skillIndex) => (
                      <span
                        key={skillIndex}
                        className="cert-skill-tag"
                        style={{ backgroundColor: `${cert.color}20`, color: cert.color }}
                      >
                        {skill}
                      </span>
                    ))}
                  </div>
                </motion.div>
              ))}
            </div>
          </motion.div>

          {/* Objectifs d'apprentissage */}
          <motion.div
            className="learning-goals"
            initial={{ opacity: 0, y: 50 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.4 }}
            viewport={{ once: true }}
          >
            <h3>{t('education.learningGoals2026')}</h3>
            <div className="goals-grid">
              {[
                { goal: t('education.goal1'), progress: 60 },
                { goal: t('education.goal2'), progress: 25 },
                { goal: t('education.goal3'), progress: 20 },
                { goal: t('education.goal4'), progress: 45 }
              ].map((item, index) => (
                <motion.div
                  key={index}
                  className="goal-item"
                  initial={{ opacity: 0, x: -30 }}
                  whileInView={{ opacity: 1, x: 0 }}
                  transition={{ duration: 0.5, delay: index * 0.1 }}
                  viewport={{ once: true }}
                >
                  <div className="goal-header">
                    <span className="goal-text">{item.goal}</span>
                    <span className="goal-percentage">{item.progress}%</span>
                  </div>
                  <div className="goal-progress">
                    <motion.div
                      className="goal-progress-bar"
                      initial={{ width: 0 }}
                      whileInView={{ width: `${item.progress}%` }}
                      transition={{
                        duration: 1.5,
                        delay: index * 0.1 + 0.5,
                        ease: [0.25, 0.1, 0.25, 1] as const
                      }}
                      viewport={{ once: true }}
                    />
                  </div>
                </motion.div>
              ))}
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  );
};

export default Education;