components/Experience.jsx

import { Briefcase, Calendar, MapPin } from 'lucide-react';

export default function Experience() {
  const experiences = [
    {
      title: 'Senior Full Stack Developer',
      company: 'Tech Innovators Inc.',
      location: 'San Francisco, CA',
      period: '2022 - Present',
      type: 'Full-time',
      description: 'Leading a team of 5 developers in building scalable web applications. Architected microservices infrastructure reducing deployment time by 60%.',
      achievements: [
        'Reduced API response time by 40% through optimization',
        'Mentored 3 junior developers to senior level',
        'Implemented CI/CD pipeline saving 20+ hours weekly'
      ]
    },
    {
      title: 'Full Stack Developer',
      company: 'Digital Solutions LLC',
      location: 'New York, NY',
      period: '2020 - 2022',
      type: 'Full-time',
      description: 'Developed and maintained multiple client projects using React and Node.js. Collaborated with design team to implement pixel-perfect UI components.',
      achievements: [
        'Built 15+ production applications from scratch',
        'Increased test coverage from 30% to 85%',
        'Received "Developer of the Year" award in 2021'
      ]
    },
    {
      title: 'Frontend Developer',
      company: 'Creative Agency',
      location: 'Austin, TX',
      period: '2018 - 2020',
      type: 'Full-time',
      description: 'Specialized in creating responsive, accessible web interfaces. Worked with various clients from startups to Fortune 500 companies.',
      achievements: [
        'Delivered 30+ websites with 100% client satisfaction',
        'Introduced component library reducing dev time by 30%',
        'Led accessibility initiative achieving WCAG 2.1 AA compliance'
      ]
    },
    {
      title: 'Junior Web Developer',
      company: 'StartUp Hub',
      location: 'Remote',
      period: '2017 - 2018',
      type: 'Contract',
      description: 'Started my professional journey building landing pages and email templates. Learned modern JavaScript frameworks and best practices.',
      achievements: [
        'Mastered React and Vue.js in 6 months',
        'Contributed to open-source projects',
        'Built personal portfolio with 10k+ visitors'
      ]
    }
  ];

  return (
    <section id="experience" className="bg-gray-50">
      <div className="section-container">
        <div className="text-center mb-12">
          <h2 className="text-3xl sm:text-4xl font-bold text-gray-900 mb-4">Work Experience</h2>
          <p className="text-lg text-gray-600 max-w-2xl mx-auto">
            My professional journey and career highlights
          </p>
          <div className="w-20 h-1 bg-primary-500 mx-auto rounded-full mt-4"></div>
        </div>

        <div className="max-w-4xl mx-auto">
          {experiences.map((exp, index) => (
            <div key={index} className="relative pl-8 sm:pl-0">
              {/* Timeline line */}
              {index !== experiences.length - 1 && (
                <div className="absolute left-4 sm:left-1/2 top-12 bottom-0 w-0.5 bg-gray-200 sm:-translate-x-1/2"></div>
              )}
              
              <div className={`flex flex-col sm:flex-row gap-6 sm:gap-12 ${index % 2 === 0 ? 'sm:flex-row' : 'sm:flex-row-reverse'}`}>
                {/* Timeline dot */}
                <div className="absolute left-2 sm:left-1/2 w-4 h-4 bg-primary-500 rounded-full border-4 border-white shadow sm:-translate-x-1/2 mt-3"></div>
                
                {/* Content */}
                <div className={`sm:w-1/2 ${index % 2 === 0 ? 'sm:text-right sm:pr-12' : 'sm:pl-12'}`}>
                  <div className="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow">
                    <div className={`flex items-center gap-2 mb-2 ${index % 2 === 0 ? 'sm:justify-end' : ''}`}>
                      <Briefcase className="w-4 h-4 text-primary-500" />
                      <span className="text-sm font-medium text-primary-600">{exp.type}</span>
                    </div>
                    
                    <h3 className="text-lg font-bold text-gray-900 mb-1">{exp.title}</h3>
                    <p className="text-primary-600 font-medium mb-3">{exp.company}</p>
                    
                    <div className={`flex flex-wrap gap-4 text-sm text-gray-500 mb-4 ${index % 2 === 0 ? 'sm:justify-end' : ''}`}>
                      <span className="flex items-center gap-1">
                        <Calendar className="w-4 h-4" />
                        {exp.period}
                      </span>
                      <span className="flex items-center gap-1">
                        <MapPin className="w-4 h-4" />
                        {exp.location}
                      </span>
                    </div>
                    
                    <p className="text-gray-600 mb-4 text-sm leading-relaxed">
                      {exp.description}
                    </p>
                    
                    <ul className={`space-y-2 ${index % 2 === 0 ? 'sm:text-right' : ''}`}>
                      {exp.achievements.map((achievement, i) => (
                        <li key={i} className="text-sm text-gray-600 flex items-start gap-2">
                          <span className="w-1.5 h-1.5 bg-primary-400 rounded-full mt-2 flex-shrink-0"></span>
                          <span>{achievement}</span>
                        </li>
                      ))}
                    </ul>
                  </div>
                </div>
                
                {/* Empty space for alternating layout */}
                <div className="hidden sm:block sm:w-1/2"></div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}