import { motion } from 'motion/react';
import { useLocation } from 'react-router-dom';
import { useTranslation } from '../i18n';
import {
  SiReact,
  SiTypescript,
  SiNodedotjs,
  SiPython,
  SiFirebase,
  SiPostgresql,
  SiDocker,
  SiGit,
} from 'react-icons/si';
import styles from './About.module.css';

const techStack = [
  { name: 'React', icon: SiReact },
  { name: 'TypeScript', icon: SiTypescript },
  { name: 'Node.js', icon: SiNodedotjs },
  { name: 'Python', icon: SiPython },
  { name: 'Firebase', icon: SiFirebase },
  { name: 'PostgreSQL', icon: SiPostgresql },
  { name: 'Docker', icon: SiDocker },
  { name: 'Git', icon: SiGit },
];

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

const itemVariants = {
  hidden: { opacity: 0, y: 20 },
  visible: {
    opacity: 1,
    y: 0,
    transition: { duration: 0.4 },
  },
};

export function About() {
  const { t } = useTranslation();
  const location = useLocation();

  return (
    <main className={styles.about} key={location.key}>
      {/* Hero Section */}
      <section className={styles.hero}>
        <div className="container">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
          >
            <h1 className={styles.title}>{t.about.title}</h1>
            <p className={styles.subtitle}>{t.about.subtitle}</p>
          </motion.div>
        </div>
      </section>

      {/* Intro Section */}
      <section className={styles.intro}>
        <div className="container">
          <motion.div
            className={styles.introContent}
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.2 }}
          >
            <p className={styles.introText}>{t.about.intro}</p>
            <p className={styles.introText}>{t.about.experience}</p>
          </motion.div>
        </div>
      </section>

      {/* Skills Section */}
      <section className={styles.skills}>
        <div className="container">
          <motion.div
            className={styles.sectionHeader}
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.4 }}
          >
            <h2>{t.about.skills.title}</h2>
            <p>{t.about.skills.subtitle}</p>
          </motion.div>

          <motion.div
            className={styles.techGrid}
            variants={containerVariants}
            initial="hidden"
            animate="visible"
          >
            {techStack.map((tech) => (
              <motion.div
                key={tech.name}
                className={styles.techCard}
                variants={itemVariants}
                whileHover={{ scale: 1.05, y: -4 }}
              >
                <span className={styles.techIcon}><tech.icon /></span>
                <span className={styles.techName}>{tech.name}</span>
              </motion.div>
            ))}
          </motion.div>
        </div>
      </section>

      {/* Values Section */}
      <section className={styles.values}>
        <div className="container">
          <motion.div
            className={styles.sectionHeader}
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5 }}
          >
            <h2>{t.about.values.title}</h2>
          </motion.div>

          <motion.div
            className={styles.valuesGrid}
            variants={containerVariants}
            initial="hidden"
            whileInView="visible"
            viewport={{ once: true }}
          >
            {t.about.values.items.map((value, index) => (
              <motion.div
                key={index}
                className={styles.valueCard}
                variants={itemVariants}
              >
                <div className={styles.valueNumber}>0{index + 1}</div>
                <h3 className={styles.valueTitle}>{value.title}</h3>
                <p className={styles.valueDescription}>{value.description}</p>
              </motion.div>
            ))}
          </motion.div>
        </div>
      </section>
    </main>
  );
}