import React, { useState } from 'react';
import { motion, useReducedMotion } from 'framer-motion';
import { Search, Globe, MapPin, Clock } 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 [emailSubscription, setEmailSubscription] = useState('');

  const jobs = [
    {
      id: 1,
      title: 'Senior Product Engineer',
      company: 'Pandektes',
      location: 'Remote',
      country: '🇩🇰 Denmark',
      salary: '$120k - $150k',
      timeAgo: '2 hours ago',
      logo: "/images/65dc7731-a4bb-4bbe-bc20-7401691a9ec5-1768471895970.png",
      featured: false
    },
    {
      id: 2,
      title: 'Senior Software Engineer',
      company: 'Trilon',
      location: 'Remote',
      country: '🌏 Worldwide',
      timeAgo: '25 days ago',
      logo: "/images/612b8b42-9610-43b1-92bd-15373110159f-1768471895436.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: "/images/c54da9a9-c7aa-4d9a-838d-1021b684d957-1768471895594.jpeg"
    },
    {
      id: 4,
      title: 'Full Stack Typescript Developer (NextJs, NestJs)',
      company: 'ClickTech',
      location: 'Remote',
      country: '🌏 Worldwide',
      salary: '$40k - $50k',
      timeAgo: '2 months ago',
      logo: "/images/3e62a3bc-0bae-4f8b-8e5a-4b14db5ef4ab-1768471895612.jpeg"
    },
    {
      id: 5,
      title: 'NestJS Testing Specialist (Freelancer/Consultant)',
      company: 'Kapital',
      location: '🌏 Worldwide',
      timeAgo: '2 months ago',
      logo: "/images/6e1385c3-7fd6-4444-8fc4-908d4aef24be-1768471895728.png"
    },
    {
      id: 6,
      title: 'Full-Stack Engineer (Mid-Senior) [NestJS, NextJS]',
      company: 'OASYS NOW',
      location: '🇳🇱 Netherlands, Delft',
      salary: '$60k - $80k',
      timeAgo: '2 months ago',
      logo: "/images/696a0fcf-7bdb-44e2-bb03-dbdb0fb2e18b-1768471895569.jpeg"
    },
    {
      id: 7,
      title: 'Senior Backend Engineer',
      company: 'Pandektes',
      location: 'Remote',
      country: '🇩🇰 Denmark, Copenhagen',
      salary: '$110k - $140k',
      timeAgo: '2 months ago',
      logo: "/images/65dc7731-a4bb-4bbe-bc20-7401691a9ec5-1768471895970.png"
    },
    {
      id: 8,
      title: 'Backend NestJS Developer',
      company: 'ClickTech',
      location: 'Remote',
      country: '🌏 Worldwide',
      salary: '$40k - $60k',
      timeAgo: '6 months ago',
      logo: "/images/3e62a3bc-0bae-4f8b-8e5a-4b14db5ef4ab-1768471895612.jpeg"
    },
    {
      id: 9,
      title: 'Senior Software Engineer',
      company: 'Pippen AI',
      location: 'Remote',
      country: '🇨🇦 Canada, Toronto',
      salary: '$70k - $100k',
      timeAgo: '6 months ago',
      logo: "/images/69388f1e-2dff-444b-9fc4-9f035bbf654f-1768471895570.jpeg"
    }
  ];

  const JobCard = ({ job, index }) => {
    const cardContent = (
      <div className={`job-card ${job.featured ? 'featured-job' : ''}`}>
        <div className="flex items-start justify-between mb-4">
          <div className="flex items-center space-x-4">
            <img 
              src={job.logo} 
              alt={job.company}
              className="company-logo"
            />
            <div>
              <h3 className="font-semibold text-lg text-gray-900">{job.title}</h3>
              <p className="text-gray-600">at {job.company}</p>
              {job.featured && (
                <span className="inline-block bg-nest-pink text-white text-xs px-2 py-1 rounded-full mt-1">
                  ✨ FEATURED
                </span>
              )}
            </div>
          </div>
          <span className="text-sm text-gray-500">{job.timeAgo}</span>
        </div>
        
        <div className="flex flex-wrap items-center gap-4 text-sm text-gray-600">
          <div className="flex items-center space-x-1">
            <MapPin className="w-4 h-4" />
            <span>{job.location}</span>
          </div>
          {job.country && (
            <div className="flex items-center space-x-1">
              <Globe className="w-4 h-4" />
              <span>{job.country}</span>
            </div>
          )}
          {job.salary && (
            <div className="flex items-center space-x-1">
              <span className="text-green-600 font-medium">💰 {job.salary}</span>
            </div>
          )}
        </div>
      </div>
    );

    if (shouldReduceMotion) {
      return cardContent;
    }

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

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

        {/* Search and Filters */}
        <div className="bg-white rounded-lg shadow-sm p-6 mb-8">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div className="relative">
              <Search className="absolute left-3 top-3 w-5 h-5 text-gray-400" />
              <input
                type="text"
                placeholder="Search..."
                className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-nest-pink focus:border-transparent"
              />
            </div>
            <select className="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-nest-pink focus:border-transparent">
              <option>Location</option>
              <option>Remote</option>
              <option>On-site</option>
            </select>
            <select className="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-nest-pink focus:border-transparent">
              <option>Seniority</option>
              <option>Junior</option>
              <option>Mid</option>
              <option>Senior</option>
            </select>
            <select className="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-nest-pink focus:border-transparent">
              <option>Job type</option>
              <option>Full-time</option>
              <option>Part-time</option>
              <option>Contract</option>
            </select>
          </div>
        </div>

        {/* Active Jobs */}
        <div className="space-y-4 mb-12">
          {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-6">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.1, 1.0)}>
      {sectionContent}
    </motion.div>
  );
};

export default JobsSection;