'use client'

import { motion } from 'framer-motion'
import { useInView } from 'framer-motion'
import { useRef } from 'react'
import { Calendar, MapPin, ArrowRight, Building2 } from 'lucide-react'

const Experience = () => {
  const ref = useRef(null)
  const isInView = useInView(ref, { once: true, margin: '-50px' })

  const experiences = [
    {
      id: 1,
      company: 'Universities Page',
      position: 'Full Stack Developer — Next.js, Node.js, MySQL',
      period: 'Sep 2025 - Present',
      location: 'Lahore, Pakistan',
      description: 'Architecting and owning a complete AI-powered educational platform — from database design to production server deployment.',
      achievements: [
        'Built complete platform solo: Next.js frontend, Node.js API routes, MySQL database — full ownership of every layer',
        'Engineered AI tools using DeepSeek API for eligibility checking, university comparison, and intelligent course recommendations',
        'Implemented server-side dynamic SEO achieving 200%+ organic traffic growth via auto metadata, XML sitemaps, and JSON-LD schema',
        'Optimized Core Web Vitals to 90+ PageSpeed score through code splitting, DB query optimization, and server-level caching',
        'Deployed full production infrastructure: NGINX reverse proxy, SSL, Gzip/Brotli compression, 99.9% uptime'
      ],
      technologies: ['Next.js', 'React.js', 'Node.js', 'MySQL', 'TypeScript', 'Tailwind CSS', 'DeepSeek API', 'NGINX'],
      type: 'fulltime',
      current: true
    },
    {
      id: 2,
      company: 'Publication Media LTD',
      position: 'Full Stack Developer — Next.js, Node.js',
      period: 'Sep 2023 - Sep 2025',
      location: 'Lahore, Pakistan',
      description: 'Developed and maintained scalable web platforms and a guest posting services system for a digital media company.',
      achievements: [
        'Built and maintained scalable web applications and guest posting platform using Next.js with Node.js API layer',
        'Delivered full-stack features for client projects — clean architecture, performance-optimized, and SEO-ready from the backend',
        'Integrated third-party tools and automated workflows, reducing manual operations for the content publishing team',
        'Applied best practices in coding, testing, and deployment for smooth and reliable product releases'
      ],
      technologies: ['Next.js', 'React.js', 'Node.js', 'TypeScript', 'Tailwind CSS', 'PostgreSQL'],
      type: 'fulltime',
      current: false
    },
    {
      id: 3,
      company: 'Outreach Expert LTD',
      position: 'Full Stack Developer & SEO Specialist — Next.js, PostgreSQL',
      period: 'Aug 2020 - Dec 2024',
      location: 'Lahore, Pakistan',
      description: 'Built and managed full-stack web applications and SEO-focused platforms for a digital outreach and guest posting company.',
      achievements: [
        'Built Next.js + PostgreSQL applications with server-side SEO, role-based dashboards, and secure JWT authentication',
        'Deployed NGINX server infrastructure with SSL, Brotli compression, and performance tuning for multiple production sites',
        'Managed and scaled a guest post reselling business, establishing partnerships with website owners internationally',
        'Created SEO-optimized platforms generating consistent organic traffic through technical backend SEO implementation'
      ],
      technologies: ['Next.js', 'React.js', 'Node.js', 'PostgreSQL', 'TypeScript', 'Tailwind CSS', 'NGINX'],
      type: 'fulltime',
      current: false
    },
    {
      id: 4,
      company: 'Freelance & Agency Projects',
      position: 'Full Stack Developer — Next.js, Laravel, MERN, WordPress',
      period: 'Jul 2019 - Present',
      location: 'Lahore, Pakistan (Remote)',
      description: 'Delivering end-to-end web solutions for local and international clients across diverse industries.',
      achievements: [
        'Delivered 50+ end-to-end projects for local and international clients — from requirements to live deployment',
        'Built custom apps with Next.js, Node.js, Laravel/PHP, React, MongoDB, and PostgreSQL',
        'Managed complete server setup, hosting, domain, SSL, and ongoing maintenance for all client projects',
        'Built and customized WordPress/Shopify sites with theme development, plugin integration, and speed optimization'
      ],
      technologies: ['Next.js', 'React.js', 'Node.js', 'Laravel', 'PHP', 'MongoDB', 'PostgreSQL', 'WordPress', 'Shopify'],
      type: 'freelance',
      current: true
    },
    {
      id: 5,
      company: 'Pak SEO Services · Supreme Security Services',
      position: 'PHP / Laravel Developer',
      period: 'Apr 2018 - Oct 2020',
      location: 'Lahore, Pakistan',
      description: 'Developed custom Laravel/PHP applications and maintained enterprise backend systems for multiple companies.',
      achievements: [
        'Developed and maintained custom Laravel/PHP applications with scalable backend architecture and RESTful APIs',
        'Designed secure authentication/authorization systems and integrated third-party APIs for client projects',
        'Built and optimized a security management system with new modules and improved API performance',
        'Built responsive frontends with HTML, CSS, JavaScript, and Blade templates for seamless UX'
      ],
      technologies: ['PHP', 'Laravel', 'MySQL', 'JavaScript', 'HTML5', 'CSS3', 'REST APIs'],
      type: 'fulltime',
      current: false
    },
    {
      id: 6,
      company: 'acco.com.pk',
      position: 'Core PHP Developer',
      period: 'Jul 2017 - Mar 2018',
      location: 'Lahore, Pakistan',
      description: 'Built a complete Learning Management System from scratch using Core PHP in a collaborative team environment.',
      achievements: [
        'Designed and developed a full LMS from scratch using Core PHP, HTML, CSS, and JavaScript',
        'Built and optimized frontend and backend modules including course management, student registration, and content delivery',
        'Implemented user authentication, role-based access control, and data management',
        'Created a responsive, cross-browser UI aligned with business goals and delivered on time'
      ],
      technologies: ['PHP', 'MySQL', 'JavaScript', 'HTML5', 'CSS3'],
      type: 'fulltime',
      current: false
    }
  ]

  return (
    <section id="experience" ref={ref} className="py-28 lg:py-36 bg-background relative overflow-hidden">
      {/* Background Elements */}
      <div className="absolute inset-0">
        <div className="absolute top-20 left-10 w-72 h-72 bg-primary/5 rounded-full blur-3xl"></div>
        <div className="absolute bottom-20 right-10 w-72 h-72 bg-secondary/5 rounded-full blur-3xl"></div>
      </div>

      <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        
        {/* Section Header */}
        <motion.div
          initial={{ opacity: 0, y: 40 }}
          animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 40 }}
          transition={{ duration: 0.8 }}
          className="text-center mb-20"
        >
          <motion.div
            initial={{ opacity: 0, scale: 0.8 }}
            animate={isInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.8 }}
            transition={{ duration: 0.6, delay: 0.2 }}
            className="inline-flex items-center gap-4 text-primary/70 mb-6"
          >
            <div className="w-12 h-px bg-linear-to-r from-transparent to-primary/40"></div>
            <span className="text-sm font-semibold tracking-widest uppercase text-primary">Career Journey</span>
            <div className="w-12 h-px bg-linear-to-l from-transparent to-primary/40"></div>
          </motion.div>
          
          <motion.h2
            initial={{ opacity: 0, y: 30 }}
            animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
            transition={{ duration: 0.8, delay: 0.3 }}
            className="text-5xl lg:text-6xl font-light text-text mb-6"
          >
            Professional <span className="font-semibold bg-linear-to-r from-primary to-secondary bg-clip-text text-transparent">Experience</span>
          </motion.h2>
          
          <motion.p
            initial={{ opacity: 0, y: 20 }}
            animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
            transition={{ duration: 0.8, delay: 0.4 }}
            className="text-xl text-text/60 max-w-3xl mx-auto leading-relaxed font-light"
          >
            My career journey through innovative companies and projects, showcasing growth, 
            achievements, and the expertise gained along the way.
          </motion.p>
        </motion.div>

        {/* Experience Cards Grid */}
        <div className="grid grid-cols-1 gap-8">
          {experiences.map((experience, index) => (
            <motion.div
              key={experience.id}
              initial={{ opacity: 0, y: 40 }}
              animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 40 }}
              transition={{ duration: 0.6, delay: 0.5 + index * 0.15 }}
              className="group"
            >
              <div className="bg-surface/50 backdrop-blur-sm rounded-3xl p-8 border border-gray-700/20 hover:border-primary/30 transition-all duration-500 hover:transform hover:-translate-y-2">
                
                {/* Header Section */}
                <div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-6 mb-6">
                  <div className="flex-1">
                    {/* Company and Position */}
                    <div className="flex items-start gap-4 mb-4">
                      <div className="w-12 h-12 bg-linear-to-br from-primary/20 to-primary/10 rounded-xl flex items-center justify-center group-hover:from-primary/30 group-hover:to-primary/20 transition-all duration-300">
                        <Building2 className="w-6 h-6 text-primary" />
                      </div>
                      <div>
                        <h3 className="text-2xl font-semibold text-text group-hover:text-primary transition-colors duration-300 mb-1">
                          {experience.position}
                        </h3>
                        <div className="flex items-center gap-3 flex-wrap">
                          <span className="text-lg font-medium text-text/80">{experience.company}</span>
                          {experience.type === 'freelance' && (
                            <span className="px-3 py-1 bg-secondary/20 text-secondary text-sm font-semibold rounded-full">
                              Freelance
                            </span>
                          )}
                          {experience.current && (
                            <span className="px-3 py-1 bg-primary/20 text-primary text-sm font-semibold rounded-full flex items-center gap-2">
                              <div className="w-2 h-2 bg-primary rounded-full animate-pulse"></div>
                              Current
                            </span>
                          )}
                        </div>
                      </div>
                    </div>

                    {/* Location and Period */}
                    <div className="flex items-center gap-6 text-text/60">
                      <div className="flex items-center gap-2">
                        <Calendar className="w-4 h-4" />
                        <span className="text-sm">{experience.period}</span>
                      </div>
                      <div className="flex items-center gap-2">
                        <MapPin className="w-4 h-4" />
                        <span className="text-sm">{experience.location}</span>
                      </div>
                    </div>
                  </div>

                  <div className="hidden lg:flex items-center gap-2 text-primary/60">
                    <div className="w-8 h-0.5 bg-primary/30"></div>
                    <span className="text-sm font-medium">
                      {experience.period.split(' - ')[0]}
                    </span>
                    <ArrowRight className="w-4 h-4" />
                    <span className="text-sm font-medium">
                      {experience.period.split(' - ')[1] || 'Present'}
                    </span>
                  </div>
                </div>

                {/* Description */}
                <p className="text-text/70 leading-relaxed mb-6 text-lg">
                  {experience.description}
                </p>

                {/* Achievements and Technologies Grid */}
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
                  {/* Key Achievements */}
                  <div>
                    <h4 className="text-lg font-semibold text-text mb-4 flex items-center gap-2">
                      <div className="w-2 h-2 bg-primary rounded-full"></div>
                      Key Achievements
                    </h4>
                    <ul className="space-y-3">
                      {experience.achievements.map((achievement, achievementIndex) => (
                        <motion.li
                          key={achievementIndex}
                          initial={{ opacity: 0, x: -20 }}
                          animate={isInView ? { opacity: 1, x: 0 } : { opacity: 0, x: -20 }}
                          transition={{ duration: 0.4, delay: 0.7 + index * 0.15 + achievementIndex * 0.1 }}
                          className="flex items-start gap-3 text-text/70"
                        >
                          <div className="w-1.5 h-1.5 bg-primary rounded-full mt-2 shrink-0"></div>
                          <span className="leading-relaxed">{achievement}</span>
                        </motion.li>
                      ))}
                    </ul>
                  </div>

                  {/* Technologies */}
                  <div>
                    <h4 className="text-lg font-semibold text-text mb-4 flex items-center gap-2">
                      <div className="w-2 h-2 bg-secondary rounded-full"></div>
                      Technologies
                    </h4>
                    <div className="flex flex-wrap gap-3">
                      {experience.technologies.map((tech, techIndex) => (
                        <motion.span
                          key={tech}
                          initial={{ opacity: 0, scale: 0.8 }}
                          animate={isInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.8 }}
                          transition={{ duration: 0.4, delay: 0.8 + index * 0.15 + techIndex * 0.05 }}
                          className="px-4 py-2 bg-background/50 text-text/70 text-sm font-medium rounded-xl border border-gray-600/20 hover:border-primary/30 hover:text-primary transition-all duration-300 cursor-default group-hover:transform group-hover:-translate-y-1"
                        >
                          {tech}
                        </motion.span>
                      ))}
                    </div>
                  </div>
                </div>

                {/* Progress Bar for Timeline */}
                <div className="mt-6 pt-6 border-t border-gray-700/20">
                  <div className="flex items-center justify-between text-sm text-text/50 mb-2">
                    <span>{experience.period.split(' ')[0]}</span>
                    <span>{experience.period.split(' ')[2] || 'Present'}</span>
                  </div>
                  <div className="w-full bg-background/50 rounded-full h-1.5 overflow-hidden">
                    <motion.div
                      initial={{ width: 0 }}
                      animate={isInView ? { width: experience.current ? '85%' : '100%' } : { width: 0 }}
                      transition={{ duration: 1.5, delay: 0.9 + index * 0.15, ease: "easeOut" }}
                      className="h-full rounded-full bg-linear-to-r from-primary to-secondary"
                    />
                  </div>
                </div>
              </div>
            </motion.div>
          ))}
        </div>

        {/* CTA Section */}
        <motion.div
          initial={{ opacity: 0, y: 40 }}
          animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 40 }}
          transition={{ duration: 0.8, delay: 1.2 }}
          className="text-center mt-16"
        >
          <div className="bg-linear-to-br from-surface/40 to-surface/20 backdrop-blur-sm rounded-3xl p-12 border border-gray-700/10">
            <h3 className="text-3xl font-light text-text mb-4">
              Lets Build Something <span className="font-semibold text-primary">Amazing</span> Together
            </h3>
            <p className="text-xl text-text/60 mb-8 max-w-2xl mx-auto leading-relaxed">
              Ready to bring your next project to life with professional expertise and innovative solutions.
            </p>
            <motion.button
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
              onClick={() => document.getElementById('contact')?.scrollIntoView({ behavior: 'smooth' })}
              className="px-8 py-4 bg-linear-to-r from-primary to-secondary text-white rounded-2xl font-semibold text-lg shadow-2xl shadow-primary/25 hover:shadow-primary/40 transition-all duration-300 flex items-center gap-3 mx-auto"
            >
              Start a Conversation
              <ArrowRight className="w-5 h-5" />
            </motion.button>
          </div>
        </motion.div>
      </div>
    </section>
  )
}

export default Experience