'use client';

import { useEffect, useState } from "react";
import Container from "../../components/atoms/Container";
import Swal from "sweetalert2";
import Image from 'next/image';
import { 
  Search, 
  Briefcase, 
  MapPin, 
  Clock, 
  Users, 
  FileText, 
  Award, 
  CheckCircle, 
  ArrowRight, 
  Target,
  Shield,
  Sparkles,
  MessageSquare,
  Phone,
  Mail,
  Zap,
  Star,
  Building2,
  GraduationCap,
  Globe,
  ChevronRight
} from 'lucide-react';
import { useRouter } from 'next/navigation';

// Import Shared Components
import ModernCard from "../../components/shared/ModernCard";
import StatCard from "../../components/shared/StatCard";
import FeatureCard from "../../components/shared/FeatureCard";
import Link from "next/link";

// Job Card Component
const JobOpportunitiesfirst = ({ id, image, title, workType, location, experience, skills, slug }) => {
  const skillsArray = Array.isArray(skills) ? skills : (skills ? skills.split(',') : []);
  const router = useRouter();
  
  const handleClick = () => {
    if (id) router.push(`/jobs/job-detail/${id}`);
  };

  const getWorkTypeColor = (type) => {
    const typeLower = type.toLowerCase();
    if (typeLower.includes('remote')) return '#0d9488'; // teal-600
    if (typeLower.includes('onsite') || typeLower.includes('on-site')) return '#f59e0b'; // amber-500
    if (typeLower.includes('full')) return '#3b82f6'; // blue-500
    if (typeLower.includes('part')) return '#8b5cf6'; // violet-500
    return '#6b7280'; // gray-500
  };

  return (
    <ModernCard 
      className="group hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2 overflow-hidden cursor-pointer"
      onClick={handleClick}
    >
      {/* Image with Gradient Overlay */}
      <div className="relative h-48 overflow-hidden">
        <Image
          src={
            image !== null && image.startsWith('https')
              ? "https://images.pexels.com/photos/3184465/pexels-photo-3184465.jpeg?auto=compress&cs=tinysrgb&w=800"
              : image !== null
              ? `https://unipage-storage.s3.eu-north-1.amazonaws.com/${image}`
              : "/assets/default-job.webp"
          } 
          alt={title || "Image"}
          fill
          className="object-cover group-hover:scale-105 transition-transform duration-300"
        />
        
        {/* Gradient Overlay */}
        <div className="absolute inset-0 bg-linear-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        
        {/* Work Type Badges */}
        <div className="absolute top-4 left-4 flex flex-wrap gap-2">
          {workType && workType.map((type, index) => (
            <span 
              key={index}
              className="text-xs font-semibold text-white px-3 py-1 rounded-full backdrop-blur-sm border border-white/20"
              style={{ 
                backgroundColor: `${getWorkTypeColor(type)}80`,
                borderColor: getWorkTypeColor(type)
              }}
            >
              {type}
            </span>
          ))}
        </div>

        {/* Experience Badge */}
        {experience && (
          <div className="absolute top-4 right-4 bg-white/20 backdrop-blur-sm text-white text-xs font-semibold px-3 py-1 rounded-full border border-white/30">
            {experience}
          </div>
        )}
      </div>

      {/* Content Card */}
      <div className="p-6">
        {/* Title */}
        <h4 className="text-xl font-bold text-gray-900 mb-4 line-clamp-2 group-hover:text-teal-700 transition-colors duration-300">
          {title}
        </h4>

        {/* Details Grid */}
        <div className="grid grid-cols-1 gap-3 mb-4">
          {/* Location */}
          <div className="flex items-center gap-3 text-gray-600">
            <div className="w-8 h-8 rounded-full bg-linear-to-r from-teal-50 to-blue-50 flex items-center justify-center shrink-0">
              <MapPin className="w-4 h-4 text-teal-600" />
            </div>
            <span className="text-sm font-medium">{location || 'Location not specified'}</span>
          </div>

          {/* Experience */}
          {experience && (
            <div className="flex items-center gap-3 text-gray-600">
              <div className="w-8 h-8 rounded-full bg-linear-to-r from-teal-50 to-blue-50 flex items-center justify-center shrink-0">
                <Briefcase className="w-4 h-4 text-teal-600" />
              </div>
              <span className="text-sm font-medium">{experience}</span>
            </div>
          )}

          {/* Skills Preview */}
          {skillsArray.length > 0 && (
            <div className="flex items-start gap-3 text-gray-600">
              <div className="w-8 h-8 rounded-full bg-linear-to-r from-teal-50 to-blue-50 flex items-center justify-center shrink-0 mt-1">
                <Target className="w-4 h-4 text-teal-600" />
              </div>
              <div className="flex-1">
                <span className="text-sm font-medium mb-1 block">Key Skills:</span>
                <div className="flex flex-wrap gap-1">
                  {skillsArray.slice(0, 3).map((skill, index) => (
                    <span 
                      key={index}
                      className="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded-full"
                    >
                      {skill.trim()}
                    </span>
                  ))}
                  {skillsArray.length > 3 && (
                    <span className="text-xs text-gray-500 px-2 py-1">
                      +{skillsArray.length - 3} more
                    </span>
                  )}
                </div>
              </div>
            </div>
          )}
        </div>

        {/* Divider */}
        <div className="w-full h-px bg-linear-to-r from-transparent via-gray-200 to-transparent mb-4"></div>

        {/* CTA Button */}
        <div className="flex justify-center">
          <Link href={`/job/${slug}`}><button className="group relative cursor-pointer w-full bg-transparent border-2 border-teal-600 text-teal-600 font-semibold py-3 px-6 rounded-xl transition-all duration-300 hover:bg-teal-600 hover:text-white">
            <span className="flex items-center justify-center gap-2">
              View Job Details
              <ArrowRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" />
            </span>
          </button></Link>
        </div>
      </div>
    </ModernCard>
  );
};

// Main Component
function JobOpportunities() {
  const [jobs, setJobs] = useState([]);
  const [filteredJobs, setFilteredJobs] = useState([]);
  const [loading, setLoading] = useState(true);
  const [searchQuery, setSearchQuery] = useState('');
  const [activeFilter, setActiveFilter] = useState('all');
  const [locationFilter, setLocationFilter] = useState('');

  // Hiring process data
  const hiringProcess = [
    {
      name: "Apply",
      image: "/assets/ap.png",
      description: "Apply for our posted job opportunity by submitting your resume. We look forward to reviewing your application.",
      icon: FileText,
      duration: "24h response"
    },
    {
      name: "Review",
      image: "/assets/re.png",
      description: "Our HR team reviews thoroughly to see if your expertise matches our required position.",
      icon: Users,
      duration: "2-3 days"
    },
    {
      name: "Interviews",
      image: "/assets/inter.png",
      description: "Competency based interviews conducted by subject matter experts to assess your skills.",
      icon: Award,
      duration: "1 week"
    },
    {
      name: "Onboarding",
      image: "/assets/onboarding.png",
      description: "Comprehensive onboarding process to ensure a smooth transition into our team.",
      icon: CheckCircle,
      duration: "1-2 weeks"
    }
  ];

  const stats = [
    { number: "5+", label: "Open Positions", icon: Briefcase, color: "teal" },
    { number: "24h", label: "Average Response", icon: Clock, color: "blue" },
    { number: "95%", label: "Success Rate", icon: Award, color: "emerald" },
    { number: "100+", label: "Team Members", icon: Users, color: "amber" }
  ];

  const benefits = [
    "Competitive salary packages",
    "Flexible working hours",
    "Professional development",
    "Remote work options",
    "Career growth opportunities",
    "Team building events"
  ];

  const jobTypes = [
    { id: 'all', label: 'All Jobs', icon: Briefcase },
    { id: 'remote', label: 'Remote', icon: MapPin },
    { id: 'onsite', label: 'On-Site', icon: Building2 },
    { id: 'Full Time', label: 'Full Time', icon: Clock },
    { id: 'Part Time', label: 'Part Time', icon: Clock }
  ];

  const features = [
    {
      Icon: Shield,
      title: "Career Growth",
      description: "Opportunities for professional development and advancement",
      color: "teal"
    },
    {
      Icon: Zap,
      title: "Flexible Environment",
      description: "Remote options and flexible working hours",
      color: "blue"
    },
    {
      Icon: Users,
      title: "Collaborative Team",
      description: "Work with passionate professionals in education",
      color: "emerald"
    },
    {
      Icon: Globe,
      title: "Global Impact",
      description: "Contribute to transforming education worldwide",
      color: "amber"
    }
  ];

  useEffect(() => {
    const fetchJobs = async () => {
      try {
        const response = await fetch("/api/frontend/jobs", {
          method: "GET",
          headers: {
            "Content-Type": "application/json",
          },
        });
        if (!response.ok) {
          throw new Error("Failed to fetch jobs");
        }

        const data = await response.json();
        const jobsData = data.jobs || data.data || [];
        
        // Transform job data to include active status and skills array
        const transformedJobs = jobsData.map(job => ({
          ...job,
          skills: job.skills ? job.skills.split(',').map(s => s.trim()).filter(Boolean) : [],
          active: job.post_status === 1,
        }));

        setJobs(transformedJobs);
        setFilteredJobs(transformedJobs);
        setLoading(false);

      } catch (error) {
        console.error("Error fetching jobs:", error);
        Swal.fire({
          title: 'Error',
          text: error.message,
          icon: 'error',
          confirmButtonText: 'OK',
          customClass: {
            popup: 'rounded-lg',
            confirmButton: 'bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded'
          }
        });
        setLoading(false);
      }
    };

    fetchJobs();
  }, []);

  // Fixed filter function
  useEffect(() => {
    let filtered = jobs;

    // Search filter - search in title, skills, and description
    if (searchQuery.trim()) {
      const query = searchQuery.toLowerCase();
      filtered = filtered.filter(job => {
        // Search in title
        if (job.title?.toLowerCase().includes(query)) return true;
        
        // Search in skills
        if (job.skills && Array.isArray(job.skills)) {
          if (job.skills.some(skill => skill.toLowerCase().includes(query))) {
            return true;
          }
        } else if (typeof job.skills === 'string') {
          if (job.skills.toLowerCase().includes(query)) return true;
        }
        
        // Search in description
        if (job.description?.toLowerCase().includes(query)) return true;
        
        // Search in job type
        if (job.job_type?.toLowerCase().includes(query)) return true;
        
        // Search in location fields
        const location = [job.city, job.province, job.country]
          .filter(Boolean)
          .join(" ")
          .toLowerCase();
        if (location.includes(query)) return true;
        
        return false;
      });
    }

    // Job type filter
    if (activeFilter !== 'all') {
      filtered = filtered.filter(job => {
        const jobType = job.job_type?.toLowerCase() || '';
        const siteBased = job.site_based?.toLowerCase() || '';

        switch (activeFilter) {
          case 'remote':
            return siteBased === 'remote';
          case 'onsite':
            return siteBased === 'onsite';
          case 'Full Time':
            return jobType.includes('full') || jobType.includes('full-time');
          case 'Part Time':
            return jobType.includes('part') || jobType.includes('part-time');
          default:
            return true;
        }
      });
    }

    // Location filter - search in city, province, country
    if (locationFilter.trim()) {
      const locationQuery = locationFilter.toLowerCase();
      filtered = filtered.filter(job => {
        const city = job.city?.toLowerCase() || '';
        const province = job.province?.toLowerCase() || '';
        const country = job.country?.toLowerCase() || '';
        
        return city.includes(locationQuery) || 
               province.includes(locationQuery) || 
               country.includes(locationQuery);
      });
    }

    // Filter only active jobs
    filtered = filtered.filter(job => job.active === true);

    setFilteredJobs(filtered);
  }, [searchQuery, activeFilter, locationFilter, jobs]);

  return (
    <div className="min-h-screen bg-linear-to-b from-gray-50 to-white">
      {/* Hero Section */}
      <div className="relative">
        <div className="absolute inset-0 bg-linear-to-r from-teal-50/50 to-blue-50/50"></div>
        
        <div className="absolute top-0 left-0 w-full h-full overflow-hidden">
          {[...Array(20)].map((_, i) => (
            <div
              key={i}
              className="absolute rounded-full bg-linear-to-r from-teal-200/20 to-blue-200/20 animate-float"
              style={{
                width: Math.random() * 100 + 50,
                height: Math.random() * 100 + 50,
                top: `${Math.random() * 100}%`,
                left: `${Math.random() * 100}%`,
                animationDelay: `${Math.random() * 5}s`,
                animationDuration: `${Math.random() * 10 + 10}s`
              }}
            />
          ))}
        </div>

        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-28">
          <div className="text-center">
            <div className="inline-flex items-center gap-2 bg-linear-to-r from-teal-100 to-blue-100 text-teal-700 px-6 py-3 rounded-full text-sm font-semibold mb-8 animate-pulse">
              <Shield className="w-5 h-5" />
              Career Opportunities
            </div>

            <h1 className="text-5xl md:text-7xl font-bold text-gray-900 mb-8 leading-tight">
              Join{' '}
              <span className="bg-linear-to-r from-teal-600 to-blue-500 bg-clip-text text-transparent">
                Our Team
              </span>
            </h1>

            <p className="text-xl md:text-2xl text-gray-600 mb-12 max-w-3xl mx-auto leading-relaxed">
              Discover exciting career opportunities and be part of our mission to transform education worldwide.
              Help students achieve their study abroad dreams while building your own career.
            </p>
          </div>
        </div>
      </div>

      {/* Stats Section */}
      <div className="py-16">
        <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 font-bold text-gray-900 mb-4">
              Why Work With Us?
            </h2>
            <p className="text-gray-600 max-w-2xl mx-auto">
              Join a team that's making a real difference in students' lives globally
            </p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            {stats.map((stat, index) => (
              <StatCard 
                key={index}
                Icon={stat.icon}
                number={stat.number}
                label={stat.label}
                color={stat.color}
              />
            ))}
          </div>
        </div>
      </div>

      {/* Search & Filter Section */}
      <div className="pb-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <ModernCard className="p-8 mb-12">
            <div className="flex items-center gap-4 mb-8">
              <div className="p-3 rounded-xl bg-linear-to-r from-teal-50 to-blue-50 border border-teal-100">
                <Search className="w-8 h-8 text-teal-600" />
              </div>
              <div>
                <h2 className="text-3xl font-bold text-gray-900">Find Your Perfect Role</h2>
                <p className="text-gray-600 mt-2">
                  Search through our current openings and apply today
                </p>
              </div>
            </div>

            {/* Search Bar */}
            <div className="relative mb-6">
              <div className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400">
                <Search className="w-5 h-5" />
              </div>
              <input
                type="text"
                placeholder="Search jobs by title, skills, or keywords..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="w-full pl-12 pr-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-teal-500 focus:border-teal-500 outline-none transition-all"
              />
            </div>

            {/* Location Filter */}
            <div className="relative mb-6">
              <div className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400">
                <MapPin className="w-5 h-5" />
              </div>
              <input
                type="text"
                placeholder="Filter by location (city, province, country)..."
                value={locationFilter}
                onChange={(e) => setLocationFilter(e.target.value)}
                className="w-full pl-12 pr-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-teal-500 focus:border-teal-500 outline-none transition-all"
              />
            </div>

            {/* Job Type Filters */}
            <div className="flex flex-wrap gap-3 mb-6">
              {jobTypes.map((type) => (
                <button
                  key={type.id}
                  onClick={() => setActiveFilter(type.id)}
                  className={`px-4 py-2 rounded-xl font-medium transition-all duration-300 ${
                    activeFilter === type.id
                      ? 'bg-linear-to-r from-teal-600 to-blue-500 text-white shadow-lg'
                      : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
                  }`}
                >
                  <span className="flex items-center gap-2">
                    <type.icon className="w-4 h-4" />
                    {type.label}
                  </span>
                </button>
              ))}
            </div>

            {/* Results Info */}
            <div className="text-center">
              <p className="text-gray-600">
                Showing {filteredJobs.length} of {jobs.filter(job => job.active === true).length} active jobs
                {searchQuery && ` for "${searchQuery}"`}
                {locationFilter && ` in ${locationFilter}`}
                {activeFilter !== 'all' && ` • ${jobTypes.find(t => t.id === activeFilter)?.label}`}
              </p>
            </div>
          </ModernCard>

          {/* Jobs Grid */}
          {loading ? (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
              {Array.from({ length: 6 }).map((_, index) => (
                <div key={index} className="bg-white rounded-2xl shadow-lg animate-pulse p-6">
                  <div className="w-full h-48 bg-linear-to-br from-gray-200 to-gray-300 rounded-xl mb-4"></div>
                  <div className="h-6 bg-gray-300 rounded w-3/4 mb-4"></div>
                  <div className="h-4 bg-gray-300 rounded w-full mb-2"></div>
                  <div className="h-4 bg-gray-300 rounded w-5/6"></div>
                </div>
              ))}
            </div>
          ) : filteredJobs.length === 0 ? (
            <ModernCard className="text-center py-16">
              <div className="w-16 h-16 bg-linear-to-r from-teal-50 to-blue-50 rounded-full flex items-center justify-center mx-auto mb-4">
                <Search className="w-8 h-8 text-teal-600" />
              </div>
              <h3 className="text-2xl font-bold text-gray-900 mb-2">
                No jobs found
              </h3>
              <p className="text-gray-500 max-w-md mx-auto mb-6">
                {searchQuery || locationFilter || activeFilter !== 'all' 
                  ? 'Try adjusting your search criteria or filters.' 
                  : 'No active job openings are currently available. Check back later!'}
              </p>
              {(searchQuery || locationFilter || activeFilter !== 'all') && (
                <button
                  onClick={() => {
                    setSearchQuery('');
                    setLocationFilter('');
                    setActiveFilter('all');
                  }}
                  className="px-6 py-2 bg-linear-to-r from-teal-600 to-blue-500 text-white rounded-xl hover:shadow-xl transition-all duration-300"
                >
                  Clear All Filters
                </button>
              )}
            </ModernCard>
          ) : (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
              {filteredJobs.map((job, index) => (
                <JobOpportunitiesfirst
                  key={job.id || index}
                  id={job.id}
                  image={
                    job.image ||
                    "https://images.pexels.com/photos/3184465/pexels-photo-3184465.jpeg?auto=compress&cs=tinysrgb&w=800"
                  }
                  title={job.title}
                  workType={[
                    job.job_type || "Full Time",
                    job.site_based === 'remote' ? 'Remote' : 'Onsite',
                  ]}
                  location={
                    [job.city, job.province, job.country]
                      .filter(Boolean)
                      .join(", ")
                  }
                  experience={job.experience}
                  skills={job.skills || []}
                  slug={job.slug}
                />
              ))}
            </div>
          )}

          {/* CTA Section */}
          {!loading && filteredJobs.length > 0 && (
            <div className="text-center mt-16">
              <ModernCard className="bg-linear-to-r from-teal-600 to-blue-500 text-white p-12">
                <h3 className="text-3xl font-bold mb-4">Can't Find Your Perfect Role?</h3>
                <p className="text-white/80 mb-6 text-lg">
                  Send us your resume and we'll notify you when matching positions open up.
                </p>
                <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
                  <a 
                    href="mailto:jobs@universitiespage.com" 
                    className="inline-flex items-center justify-center gap-2 bg-white text-teal-600 font-semibold px-8 py-4 rounded-xl hover:shadow-xl transition-all duration-300 transform hover:scale-105"
                  >
                    <Mail className="w-5 h-5" />
                    jobs@universitiespage.com
                  </a>
                  <a 
                    href="/contact-us" 
                    className="inline-flex items-center justify-center gap-2 border-2 border-white text-white font-semibold px-8 py-4 rounded-xl hover:bg-white/10 transition-all duration-300 backdrop-blur-sm"
                  >
                    Contact Our Team
                    <ChevronRight className="w-5 h-5" />
                  </a>
                </div>
              </ModernCard>
            </div>
          )}
        </div>
      </div>

      {/* Features Section */}
      <div className="py-20 bg-linear-to-br from-gray-50 to-blue-50">
        <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 font-bold text-gray-900 mb-4">
              Why Join Our Team?
            </h2>
            <p className="text-gray-600 max-w-2xl mx-auto">
              Experience the benefits of working with a leading education consultancy
            </p>
          </div>
          
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
            {features.map((feature, index) => (
              <FeatureCard
                key={index}
                Icon={feature.Icon}
                title={feature.title}
                description={feature.description}
                color={feature.color}
              />
            ))}
          </div>
        </div>
      </div>

      {/* Hiring Process Section */}
      <div className="py-20">
        <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 font-bold text-gray-900 mb-4">
              Our Hiring Process
            </h2>
            <p className="text-lg text-gray-600 max-w-2xl mx-auto">
              A transparent and efficient process to ensure we find the perfect fit for our team
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            {hiringProcess.map((step, index) => (
              <ModernCard key={step.name} className="p-8 text-center hover:shadow-xl transition-shadow duration-300">
                <div className="w-16 h-16 bg-linear-to-r from-teal-600 to-blue-500 rounded-full flex items-center justify-center mx-auto mb-6">
                  <span className="text-white text-xl font-bold">{index + 1}</span>
                </div>
                
                <div className="w-12 h-12 bg-linear-to-r from-teal-50 to-blue-50 rounded-xl flex items-center justify-center mx-auto mb-4">
                  <step.icon className="w-6 h-6 text-teal-600" />
                </div>
                
                <h3 className="text-xl font-bold text-gray-900 mb-3">{step.name}</h3>
                <p className="text-gray-600 text-sm leading-relaxed mb-4">
                  {step.description}
                </p>
                <div className="text-xs font-semibold text-teal-600 bg-teal-50 px-3 py-1 rounded-full inline-block">
                  {step.duration}
                </div>
              </ModernCard>
            ))}
          </div>
        </div>
      </div>

      {/* Benefits Section */}
      <div className="py-20 bg-linear-to-br from-gray-50 to-blue-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 font-bold text-gray-900 mb-4">
              Employee Benefits
            </h2>
            <p className="text-lg text-gray-600 max-w-2xl mx-auto">
              We believe in taking care of our team members with comprehensive benefits and perks
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-4xl mx-auto">
            {benefits.map((benefit, index) => (
              <div key={index} className="flex items-center p-4 bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300">
                <CheckCircle className="w-5 h-5 text-teal-600 mr-3 shrink-0" />
                <span className="text-gray-700 font-medium">{benefit}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Final CTA Section */}
      <div className="py-20 bg-linear-to-r from-teal-600 to-blue-500 text-white relative overflow-hidden">
        <div className="absolute inset-0 overflow-hidden">
          {[...Array(10)].map((_, i) => (
            <div
              key={i}
              className="absolute rounded-full bg-white/10 animate-float"
              style={{
                width: Math.random() * 80 + 20,
                height: Math.random() * 80 + 20,
                top: `${Math.random() * 100}%`,
                left: `${Math.random() * 100}%`,
                animationDelay: `${Math.random() * 5}s`,
                animationDuration: `${Math.random() * 15 + 15}s`
              }}
            />
          ))}
        </div>
        
        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <div className="inline-flex items-center gap-2 bg-white/20 backdrop-blur-sm text-white px-6 py-3 rounded-full text-sm font-semibold mb-6">
            <Sparkles className="w-5 h-5" />
            Start Your Journey
          </div>

          <h3 className="text-4xl font-bold mb-6">
            Ready to Join Our Mission?
          </h3>

          <p className="text-xl text-white/80 mb-10 max-w-2xl mx-auto">
            Join our team of passionate professionals and help shape the future of education
          </p>

          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Link 
              href="/about-us" 
              className="bg-white text-teal-600 font-semibold px-8 py-4 rounded-xl hover:shadow-xl transition-all duration-300 transform hover:scale-105"
            >
              Learn More About Us
            </Link>
            <Link 
              href="/contact-us" 
              className="border-2 border-white text-white font-semibold px-8 py-4 rounded-xl hover:bg-white/10 transition-all duration-300 backdrop-blur-sm"
            >
              Schedule a Call
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
}

export default JobOpportunities;