riotpiao.com/components/ExperienceTimeline.tsx

'use client'

import { motion } from 'framer-motion'
import { useLanguage } from '@/lib/LanguageContext'

const colors = [
  'from-green-500 to-green-600',
  'from-red-500 to-red-600',
  'from-orange-500 to-orange-600',
  'from-cyan-500 to-cyan-600',
  'from-blue-500 to-blue-600',
]

const skills = [
  ['LangGraph', 'Temporal', 'LLM Ops', 'PyTorch', 'Kafka', 'Observability', 'Go-Flink'],
  ['Golang', 'Terraform', 'IaC', 'OpenShift', 'Docker', 'Distributed Systems', 'Grafana'],
  ['AWS', 'Java', 'gRPC', 'Distributed Systems', 'DynamoDB', 'CloudWatch'],
  ['Machine Learning', 'Golang', 'Anomaly Detection', 'C++', 'CMake', 'Data Security'],
  ['Django', 'React', 'Agile', 'Web Development', 'Sonar', 'ATC Systems'],
]

const links = [
  null,
  '#project-rbc', // RBC - link to RBC project showcase
  null,
  null,
  'https://plan.navcanada.ca/account/login/?next=/',
]

const linkTexts = [
  '',
  'Learn more →',
  '',
  '',
  'View Product →',
]

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

const itemVariants = {
  hidden: { opacity: 0, x: -20 },
  visible: {
    opacity: 1,
    x: 0,
    transition: { duration: 0.6, ease: 'easeOut' },
  },
}

export function ExperienceTimeline() {
  const { t } = useLanguage()
  const timeline = t.experience.items

  return (
    <section className="max-w-4xl mx-auto px-6 py-20">
      <motion.div
        initial={{ opacity: 0 }}
        whileInView={{ opacity: 1 }}
        viewport={{ once: true }}
        transition={{ duration: 0.6 }}
        className="mb-16"
      >
        <h2 className="text-4xl font-bold mb-4">{t.experience.title}</h2>
        <p className="text-lg text-gray-600 dark:text-gray-400">
          {t.experience.subtitle}
        </p>
      </motion.div>

      <motion.div
        variants={containerVariants}
        initial="hidden"
        whileInView="visible"
        viewport={{ once: true }}
        className="relative"
      >
        {/* Timeline line */}
        <div className="absolute left-0 md:left-1/2 top-0 bottom-0 w-1 bg-gradient-to-b from-blue-500 via-purple-500 to-green-500 md:transform md:-translate-x-1/2" />

        {/* Timeline items */}
        <div className="space-y-12">
          {timeline.map((item, index) => (
            <motion.div
              key={item.company}
              variants={itemVariants}
              className="relative pl-8 md:pl-0"
            >
              {/* Timeline dot */}
              <div className={`absolute left-0 md:left-1/2 top-2 w-4 h-4 rounded-full bg-gradient-to-br ${colors[index]} transform md:-translate-x-1/2 -translate-x-1.5 border-4 border-white dark:border-gray-950 shadow-lg`} />

              {/* Content card */}
              <div className={index % 2 === 0 ? 'md:w-1/2 md:pr-8' : 'md:w-1/2 md:ml-auto md:pl-8'}>
                <div className="bg-white dark:bg-gray-900 rounded-lg p-6 border border-gray-200 dark:border-gray-700 hover:shadow-lg transition-shadow">
                  <div className="flex items-start justify-between mb-3">
                    <div>
                      <h3 className="text-xl font-bold text-gray-900 dark:text-white">
                        {item.company}
                      </h3>
                      <p className="text-sm font-semibold text-blue-600 dark:text-blue-400">
                        {item.role}
                      </p>
                    </div>
                    <span className="text-xs font-mono text-gray-500 dark:text-gray-400 whitespace-nowrap ml-4">
                      {item.period}
                    </span>
                  </div>

                  <p className="text-sm text-gray-700 dark:text-gray-300 mb-3">
                    {item.description}
                  </p>

                  <div className="flex flex-wrap gap-2 mb-4">
                    {skills[index]?.map((skill) => (
                      <span key={skill} className="text-xs px-3 py-1 rounded-full bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300">
                        {skill}
                      </span>
                    ))}
                  </div>

                  {links[index] && (
                    <a
                      href={links[index]!}
                      target={links[index]!.startsWith('#') ? '_self' : '_blank'}
                      rel="noopener noreferrer"
                      className="text-xs font-semibold text-blue-600 dark:text-blue-400 hover:underline"
                    >
                      {linkTexts[index] || 'View Product →'}
                    </a>
                  )}
                </div>
              </div>
            </motion.div>
          ))}
        </div>
      </motion.div>
    </section>
  )
}