import React, { useState } from 'react';
import { motion, useReducedMotion } from 'framer-motion';
import { Search, MapPin, Globe, Star } from 'lucide-react';

const fadeUpPreset = (delay = 0, duration = 1.2) => ({
  initial: { opacity: 0, y: 20 },
  whileInView: { opacity: 1, y: 0 },
  viewport: { once: true, amount: 0.2 },
  transition: { delay, duration, ease: "easeOut" }
});

const JobsSection = () => {
  const shouldReduceMotion = useReducedMotion();
  const [searchTerm, setSearchTerm] = useState('');

  const jobs = [
    {
      id: 1,
      title: 'Senior Product Engineer',
      company: 'Pandektes',
      location: 'Remote',
      country: '🇩🇰 Denmark',
      salary: '$120k - $150k',
      timeAgo: '4 hours ago',
      logo: 'https://nestjs-jobs-bucket-localhost.s3.amazonaws.com/65dc7731-a4bb-4bbe-bc20-7401691a9ec5.png',
      featured: false
    },
    {
      id: 2,
      title: 'Senior Software Engineer',
      company: 'Trilon',
      location: 'Remote',
      country: '🌏 Worldwide',
      salary: null,
      timeAgo: '25 days ago',
      logo: 'https://nestjs-jobs-bucket-localhost.s3.amazonaws.com/612b8b42-9610-43b1-92bd-15373110159f.png',
      featured: true
    }
  ];

  const expiredJobs = [
    {
      id: 3,
      title: 'Full-Stack Developer Angular/NestJS/PHP/MySQL',
      company: 'Nylon Technology',
      location: 'Remote',
      country: '🇺🇸 United States, Continental...',
      salary: '$100k - $130k',
      timeAgo: 'a month ago',
      logo: 'https://nestjs-jobs-bucket-localhost.s3.amazonaws.com/c54da9a9-c7aa-4d9a-838d-1021b684d957.jpeg'
    },
    {
      id: 4,
      title: 'Full Stack Typescript Developer (NextJs, NestJs)',
      company: 'ClickTech',
      location: 'Remote',
      country: '🌏 Worldwide',
      salary: '$40k - $50k',
      timeAgo: '2 months ago',
      logo: 'https://nestjs-jobs-bucket-localhost.s3.amazonaws.com/3e62a3bc-0bae-4f8b-8e5a-4b14db5ef4ab.jpeg'
    },
    {
      id: 5,
      title: 'NestJS Testing Specialist (Freelancer/Consultant)',
      company: 'Kapital',
      location: '🌏 Worldwide',
      country: '',
      salary: null,
      timeAgo: '2 months ago',
      logo: 'https://nestjs-jobs-bucket-localhost.s3.amazonaws.com/6e1385c3-7fd6-4444-8fc4-908d4aef24be.png'
    },
    {
      id: 6,
      title: 'Full-Stack Engineer (Mid-Senior) [NestJS, NextJS]',
      company: 'OASYS NOW',
      location: '🇳🇱 Netherlands, Delft',
      country: '',
      salary: '$60k - $80k',
      timeAgo: '2 months ago',
      logo: 'https://nestjs-jobs-bucket-localhost.s3.amazonaws.com/696a0fcf-7bdb-44e2-bb03-dbdb0fb2e18b.jpeg'
    },
    {
      id: 7,
      title: 'Senior Backend Engineer',
      company: 'Pandektes',
      location: 'Remote',
      country: '🇩🇰 Denmark, Copenhagen',
      salary: '$110k - $140k',
      timeAgo: '2 months ago',
      logo: 'https://nestjs-jobs-bucket-localhost.s3.amazonaws.com/65dc7731-a4bb-4bbe-bc20-7401691a9ec5.png'
    },
    {
      id: 8,
      title: 'Backend NestJS Developer',
      company: 'ClickTech',
      location: 'Remote',
      country: '🌏 Worldwide',
      salary: '$40k - $60k',
      timeAgo: '6 months ago',
      logo: 'https://nestjs-jobs-bucket-localhost.s3.amazonaws.com/3e62a3bc-0bae-4f8b-8e5a-4b14db5ef4ab.jpeg'
    },
    {
      id: 9,
      title: 'Senior Software Engineer',
      company: 'Pippen AI',
      location: 'Remote',
      country: '🇨🇦 Canada, Toronto',
      salary: '$70k - $100k',
      timeAgo: '6 months ago',
      logo: 'https://nestjs-jobs-bucket-localhost.s3.amazonaws.com/69388f1e-2dff-444b-9fc4-9f035bbf654f.jpeg'
    }
  ];

  const JobCard = ({ job, index }) => {
    const cardContent = (
      <div className={`job-card ${job.featured ? 'job-card-featured' : ''} relative`}>
        {job.featured && (
          <div className="absolute top-4 right-4">
            <span className="bg-gradient-to-r from-purple-500 to-pink-500 text-white text-xs font-bold px-3 py-1 rounded-full flex items-center">
              <Star className="w-3 h-3 mr-1" />
              FEATURED
            </span>
          </div>
        )}
        <div className="flex items-start space-x-4">
          <div className="flex-shrink-0">
            <img 
              src={job.logo} 
              alt={`${job.company} logo`} 
              className="w-12 h-12 rounded-lg object-cover"
            />
          </div>
          <div className="flex-1 min-w-0">
            <h3 className="text-lg font-semibold text-gray-900 mb-1">{job.title}</h3>
            <p className="text-gray-600 mb-2">at {job.company}</p>
            <div className="flex flex-wrap items-center gap-4 text-sm text-gray-500">
              <div className="flex items-center">
                <MapPin className="w-4 h-4 mr-1" />
                {job.location}
              </div>
              {job.country && (
                <div className="flex items-center">
                  <Globe className="w-4 h-4 mr-1" />
                  {job.country}
                </div>
              )}
              {job.salary && (
                <div className="font-medium text-green-600">
                  💰 {job.salary}
                </div>
              )}
            </div>
            <div className="mt-3 text-sm text-gray-400">
              {job.timeAgo}
            </div>
          </div>
        </div>
      </div>
    );

    if (shouldReduceMotion) {
      return cardContent;
    }

    return (
      <motion.div {...fadeUpPreset(index * 0.1, 0.6)}>
        {cardContent}
      </motion.div>
    );
  };

  const sectionContent = (
    <section className="py-20 bg-gray-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-16">
          <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
            Find your next opportunity
          </h2>
          <p className="text-xl text-gray-600 max-w-3xl mx-auto mb-8">
            Browse through our list of NestJS jobs, find your perfect match and apply. Use filters for more accurate results!
          </p>
          
          {/* Newsletter Signup */}
          <div className="bg-brand-pink rounded-lg p-6 max-w-2xl mx-auto mb-12">
            <h3 className="text-white font-semibold mb-4">
              Get NestJS jobs right to your inbox
            </h3>
            <p className="text-pink-100 mb-4">Subscribe to our newsletter to get notified.</p>
            <div className="flex flex-col sm:flex-row gap-3">
              <input 
                type="email" 
                placeholder="Enter your email"
                className="flex-1 px-4 py-3 rounded-lg border-0 focus:ring-2 focus:ring-white focus:outline-none"
              />
              <button className="bg-white text-brand-pink font-semibold px-6 py-3 rounded-lg hover:bg-gray-100 transition-colors">
                Subscribe
              </button>
            </div>
          </div>

          {/* Search and Filters */}
          <div className="flex flex-col md:flex-row gap-4 items-center justify-center mb-8">
            <div className="relative">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
              <input 
                type="text" 
                placeholder="Search jobs..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-pink focus:border-transparent outline-none w-80"
              />
            </div>
            <div className="flex gap-2">
              <select className="px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-pink focus:border-transparent outline-none">
                <option>🌎 Location</option>
                <option>Remote</option>
                <option>On-site</option>
              </select>
              <select className="px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-pink focus:border-transparent outline-none">
                <option>🥁 Seniority</option>
                <option>Junior</option>
                <option>Mid</option>
                <option>Senior</option>
              </select>
              <select className="px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-pink focus:border-transparent outline-none">
                <option>📈 Salary</option>
                <option>$0 - $50k</option>
                <option>$50k - $100k</option>
                <option>$100k+</option>
              </select>
            </div>
          </div>
        </div>

        {/* Active Jobs */}
        <div className="space-y-6 mb-16">
          {jobs.map((job, index) => (
            <JobCard key={job.id} job={job} index={index} />
          ))}
        </div>

        {/* Expired Jobs */}
        <div>
          <h3 className="text-2xl font-bold text-gray-900 mb-8">Expired listings</h3>
          <div className="space-y-4">
            {expiredJobs.map((job, index) => (
              <JobCard key={job.id} job={job} index={index} />
            ))}
          </div>
        </div>
      </div>
    </section>
  );

  if (shouldReduceMotion) {
    return sectionContent;
  }

  return (
    <motion.div {...fadeUpPreset(0.2, 1.0)}>
      {sectionContent}
    </motion.div>
  );
};

export default JobsSection;