@extends('layouts.public')

@section('title', 'M-Ajira - Your Gateway to Global Opportunities')

@section('content')

<!-- Hero Section with Background Image Carousel -->
<section class="relative min-h-[600px] md:min-h-[700px] overflow-hidden">
    <!-- Background Image Carousel -->
    <div class="absolute inset-0 hero-carousel">
        @php
            $heroImages = File::glob(public_path('images/hero/*'));
            $heroImages = array_map(function($path) {
                return asset('images/hero/' . basename($path));
            }, $heroImages);
            
            // Fallback if no images exist
            if (empty($heroImages)) {
                $heroImages = [asset('images/hero/default.jpg')];
            }
        @endphp
        
        @foreach($heroImages as $index => $image)
            <div class="hero-slide {{ $index === 0 ? 'active' : '' }} absolute inset-0 transition-opacity duration-1000" 
                 style="background-image: url('{{ $image }}'); background-size: cover; background-position: center;">
                <!-- Dark Overlay for readability -->
                <div class="absolute inset-0 bg-gradient-to-br from-gray-900/70 via-blue-900/60 to-gray-900/70"></div>
            </div>
        @endforeach
    </div>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 py-20 md:py-32">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <!-- Left Content -->
            <div>
                <div class="inline-block bg-white/10 backdrop-blur-sm px-4 py-2 rounded-full mb-6 border border-white/20">
                    <span class="w-2 h-2 bg-green-400 rounded-full mr-2 animate-pulse inline-block"></span>
                    <span class="text-white font-medium text-sm">Connecting Kenyan Talent to Global Opportunities</span>
                </div>
                
                <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6 leading-tight">
                    Your Trusted Gateway to 
                    <span class="text-transparent bg-clip-text bg-gradient-to-r from-yellow-300 to-orange-300">
                        Verified Global Employment
                    </span>
                </h1>
                
                <p class="text-xl text-white/90 mb-8 leading-relaxed">
                    Connect with verified international employers and apply for overseas opportunities through a secure, transparent platform.
                </p>
                
                <div class="flex flex-col sm:flex-row gap-4 mb-12">
                    <a href="{{ route('candidate.register') }}" class="group relative inline-flex items-center justify-center bg-white text-blue-700 hover:bg-gray-50 font-semibold px-8 py-4 rounded-lg transition shadow-lg">
                        <span>Get Started</span>
                        <svg class="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
                        </svg>
                    </a>
                    <a href="{{ route('jobs') }}" class="inline-flex items-center justify-center bg-transparent border-2 border-white text-white hover:bg-white/10 font-semibold px-8 py-4 rounded-lg transition backdrop-blur-sm">
                        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                        </svg>
                        Browse Jobs
                    </a>
                </div>

                <!-- Quick Stats -->
                <div class="grid grid-cols-3 gap-6 pt-8 border-t border-white/20">
                    <div class="text-center">
                        <div class="flex items-center justify-center mb-2">
                            <svg class="w-8 h-8 text-yellow-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                            </svg>
                        </div>
                        <div class="text-3xl md:text-4xl font-bold text-white mb-1">500+</div>
                        <p class="text-white/80 text-sm font-medium">Active Jobs</p>
                    </div>
                    <div class="text-center">
                        <div class="flex items-center justify-center mb-2">
                            <svg class="w-8 h-8 text-yellow-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                        </div>
                        <div class="text-3xl md:text-4xl font-bold text-white mb-1">5+</div>
                        <p class="text-white/80 text-sm font-medium">Countries</p>
                    </div>
                    <div class="text-center">
                        <div class="flex items-center justify-center mb-2">
                            <svg class="w-8 h-8 text-yellow-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                        </div>
                        <div class="text-3xl md:text-4xl font-bold text-white mb-1">98%</div>
                        <p class="text-white/80 text-sm font-medium">Success Rate</p>
                    </div>
                </div>
            </div>

 <!-- Right Content - Enhanced Floating Cards -->

        </div>
    </div>
</section>

<!-- Trust Indicators Strip -->
<!-- <section class="py-8 bg-gradient-to-r from-blue-100 to-purple-100 border-b border-gray-200">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-2 md:grid-cols-4 gap-8 items-center text-center">
            <div>
                <div class="flex items-center justify-center mb-2">
                    <svg class="w-6 h-6 text-green-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
                    </svg>
                    <span class="text-gray-900 font-semibold">Licensed Agency</span>
                </div>
            </div>
            <div>
                <div class="flex items-center justify-center mb-2">
                    <svg class="w-6 h-6 text-blue-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
                    </svg>
                    <span class="text-gray-900 font-semibold">Secure Platform</span>
                </div>
            </div>
            <div>
                <div class="flex items-center justify-center mb-2">
                    <svg class="w-6 h-6 text-purple-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    <span class="text-gray-900 font-semibold">Verified Jobs</span>
                </div>
            </div>
            <div>
                <div class="flex items-center justify-center mb-2">
                    <svg class="w-6 h-6 text-orange-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"></path>
                    </svg>
                    <span class="text-gray-900 font-semibold">24/7 Support</span>
                </div>
            </div>
        </div>
    </div>
</section> -->

<!-- Why Choose M-Ajira Section -->
<section class="py-20 bg-gradient-to-br from-blue-200 via-blue-100 to-indigo-200">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Section Header -->
        <div class="text-center mb-16">
            <h2 class="inline-block px-5 py-2 bg-blue-600 text-white rounded-full text-2xl md:text-3xl font-semibold mb-4">Why M-Ajira</h2>
            <p class="text-xl text-gray-700 max-w-3xl mx-auto">All employers and job listings on M-Ajira are vetted to ensure authenticity and ethical recruitment</p>
        </div>

        <!-- Benefits Grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            <!-- Benefit 1 -->
            <div class="professional-card rounded-xl p-8 text-center hover:shadow-xl transition-shadow duration-300 bg-white">
                <div class="w-16 h-16 bg-blue-100 rounded-xl flex items-center justify-center mx-auto mb-6">
                    <svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                </div>
                <h3 class="text-xl font-bold text-gray-900 mb-3">Verified Employers</h3>
                <p class="text-gray-700 leading-relaxed">
                    All jobs and employers are carefully vetted to ensure authenticity and compliance with ethical recruitment standards.
                </p>
            </div>

            <!-- Benefit 2 -->
            <div class="professional-card rounded-xl p-8 text-center hover:shadow-xl transition-shadow duration-300 bg-white">
                <div class="w-16 h-16 bg-green-100 rounded-xl flex items-center justify-center mx-auto mb-6">
                    <svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path>
                    </svg>
                </div>
                <h3 class="text-xl font-bold text-gray-900 mb-3">Transparent Process</h3>
                <p class="text-gray-700 leading-relaxed">
                    Track your application status at every stage through our clear and open recruitment process.
                </p>
            </div>

            <!-- Benefit 3 -->
            <div class="professional-card rounded-xl p-8 text-center hover:shadow-xl transition-shadow duration-300 bg-white">
                <div class="w-16 h-16 bg-purple-100 rounded-xl flex items-center justify-center mx-auto mb-6">
                    <svg class="w-8 h-8 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
                    </svg>
                </div>
                <h3 class="text-xl font-bold text-gray-900 mb-3">Secure Platform</h3>
                <p class="text-gray-700 leading-relaxed">
                    Your personal information and documents are protected with industry-standard security measures.
                </p>
            </div>

            <!-- Benefit 4 -->
            <div class="professional-card rounded-xl p-8 text-center hover:shadow-xl transition-shadow duration-300 bg-white">
                <div class="w-16 h-16 bg-orange-100 rounded-xl flex items-center justify-center mx-auto mb-6">
                    <svg class="w-8 h-8 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                    </svg>
                </div>
                <h3 class="text-xl font-bold text-gray-900 mb-3">Simple Applications</h3>
                <p class="text-gray-700 leading-relaxed">
                    Apply through a straightforward online process that guides you every step of the way.
                </p>
            </div>
        </div>
    </div>
</section>

<!-- Featured Jobs Section (NO POSITIONS SHOWN) -->
<section class="py-20 bg-gradient-to-br from-green-50 via-emerald-50 to-teal-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Section Header -->
        <div class="text-center mb-16">
            <!-- <span class="inline-block px-4 py-2 bg-green-600 text-white rounded-full font-semibold text-sm uppercase tracking-wider mb-4">Top Opportunities</span> -->
            <h2 class="inline-block px-5 py-2 bg-blue-600 text-white rounded-full text-2xl md:text-3xl font-semibold mb-4">Featured Opportunities</h2>
            <!-- <p class="text-xl text-gray-700">Verified job openings from approved international employers</p> -->
        </div>

        <!-- Jobs Grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            @forelse($featured_jobs->take(6) as $job)
                <div class="professional-card rounded-xl p-8 hover:shadow-xl transition-shadow duration-300 group bg-white">
                    <!-- Header -->
                    <div class="flex justify-between items-start mb-6">
                        <div class="flex-1">
                            <span class="text-sm font-medium text-primary-600">International</span>
                            <h3 class="text-2xl font-bold text-gray-900 mt-1 group-hover:text-blue-600 transition-colors">{{ ucfirst(strtolower($job->job_title ?? $job->position ?? 'Position Available')) }}</h3>
                            <p class="text-gray-700 font-medium mt-1 flex items-center">
                                <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                </svg>
                                {{ $job->country }}
                            </p>
                            <p class="text-gray-500 text-sm mt-1">Ref: {{ $job->demand_sn }}</p>
                        </div>
                        <div class="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center flex-shrink-0">
                            <svg class="w-6 h-6 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                            </svg>
                        </div>
                    </div>
                    
                    <!-- Tags -->
                    <div class="flex gap-2 mb-6">
                        <span class="px-3 py-1 bg-primary-100 text-primary-700 rounded-full text-sm font-medium">Full-time</span>
                        <span class="px-3 py-1 bg-accent-100 text-accent-700 rounded-full text-sm font-medium flex items-center">
                            <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                            </svg>
                            Verified
                        </span>
                    </div>
                    
                    <!-- CTA Button -->
                    <a href="{{ route('candidate.register') }}" class="block btn-primary text-white font-semibold py-3 px-6 rounded-lg text-center hover:shadow-lg transition-shadow">
                        Apply Now
                    </a>
                </div>
            @empty
                <div class="col-span-3 text-center py-20">
                    <svg class="w-20 h-20 text-gray-300 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                    </svg>
                    <p class="text-gray-500 text-xl font-medium">No featured jobs available at the moment</p>
                    <p class="text-gray-400 mt-2">Check back soon for new opportunities!</p>
                </div>
            @endforelse
        </div>

        <!-- View All Button -->
        <div class="text-center mt-12">
            <a href="{{ route('jobs') }}" class="inline-block btn-primary text-white font-semibold px-10 py-4 rounded-lg shadow-lg hover:shadow-xl transition-shadow">
                View All Jobs
            </a>
        </div>
    </div>
</section>

<!-- How It Works Section -->
<section class="py-20 bg-gradient-to-br from-indigo-50 via-purple-50 to-pink-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Section Header -->
        <div class="text-center mb-16">
            <!-- <span class="inline-block px-4 py-2 bg-orange-600 text-white rounded-full font-semibold text-sm uppercase tracking-wider mb-4">Process</span> -->
            <h2 class="inline-block px-5 py-2 bg-orange-600 text-white rounded-full text-2xl md:text-3xl font-semibold mb-4">How It Works</h2>
            <!-- <p class="text-xl text-gray-900">Simple steps to your dream job abroad</p> -->
        </div>

<!-- Steps Grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-8">
    <!-- Step 1 -->
    <div class="text-center">
        <div class="bg-white rounded-xl p-8 mb-4 hover:shadow-xl transition-shadow duration-300 border-2 border-blue-200">
            <div class="w-16 h-16 bg-blue-600 rounded-full flex items-center justify-center text-white mx-auto mb-6 text-2xl font-bold">
                1
            </div>
            <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mx-auto mb-4">
                <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                </svg>
            </div>
            <h3 class="text-xl font-bold text-gray-900 mb-2">Register</h3>
            <p class="text-gray-700">Create your account and pay the one-time registration fee</p>
        </div>
    </div>

    <!-- Step 2 -->
    <div class="text-center">
        <div class="bg-white rounded-xl p-8 mb-4 hover:shadow-xl transition-shadow duration-300 border-2 border-green-200">
            <div class="w-16 h-16 bg-green-600 rounded-full flex items-center justify-center text-white mx-auto mb-6 text-2xl font-bold">
                2
            </div>
            <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mx-auto mb-4">
                <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                </svg>
            </div>
            <h3 class="text-xl font-bold text-gray-900 mb-2">Complete Profile</h3>
            <p class="text-gray-700">Add your skills, experience, and upload required documents</p>
        </div>
    </div>

    <!-- Step 3 -->
    <div class="text-center">
        <div class="bg-white rounded-xl p-8 mb-4 hover:shadow-xl transition-shadow duration-300 border-2 border-purple-200">
            <div class="w-16 h-16 bg-purple-600 rounded-full flex items-center justify-center text-white mx-auto mb-6 text-2xl font-bold">
                3
            </div>
            <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mx-auto mb-4">
                <svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                </svg>
            </div>
            <h3 class="text-xl font-bold text-gray-900 mb-2">Apply to Jobs</h3>
            <p class="text-gray-700">Browse matched opportunities and apply to suitable positions</p>
        </div>
    </div>

    <!-- Step 4 -->
    <div class="text-center">
        <div class="bg-white rounded-xl p-8 mb-4 hover:shadow-xl transition-shadow duration-300 border-2 border-yellow-200">
            <div class="w-16 h-16 bg-yellow-600 rounded-full flex items-center justify-center text-white mx-auto mb-6 text-2xl font-bold">
                4
            </div>
            <div class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center mx-auto mb-4">
                <svg class="w-6 h-6 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                </svg>
            </div>
            <h3 class="text-xl font-bold text-gray-900 mb-2">Get Hired</h3>
            <p class="text-gray-700">Get matched, interviewed, and start your international career</p>
        </div>
    </div>
</div>
</section>

<!-- Testimonials Section -->
<section class="py-20 bg-gradient-to-br from-purple-50 via-pink-50 to-rose-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Section Header -->
        <div class="text-center mb-16">
            <!-- <span class="inline-block px-4 py-2 bg-purple-600 text-white rounded-full font-semibold text-sm uppercase tracking-wider mb-4">Success Stories</span> -->
            <h2 class="inline-block px-5 py-2 bg-purple-600 text-white rounded-full text-2xl md:text-3xl font-semibold mb-4">What Our Candidates Say</h2>
            <!-- <p class="text-xl text-gray-700">Real experiences from real people</p> -->
        </div>

        <!-- Testimonials Grid -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <!-- Testimonial 1 -->
            <div class="professional-card rounded-xl p-8 hover:shadow-xl transition-shadow duration-300 bg-white">
                <div class="flex items-center mb-6">
                    <div class="w-14 h-14 bg-primary-100 rounded-full flex items-center justify-center text-2xl mr-4">
                        <svg class="w-8 h-8 text-primary-600" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
                        </svg>
                    </div>
                    <div>
                        <h4 class="font-bold text-gray-900">James Mwangi</h4>
                        <p class="text-gray-700 text-sm">Housekeeper</p>
                    </div>
                </div>
                <div class="flex text-yellow-400 text-xl mb-4">
                    <span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
                </div>
                <p class="text-gray-700 leading-relaxed italic">
                    "M-Ajira made my dream come true! I secured a job, the process was smooth and professional. Highly recommended!"
                </p>
            </div>

            <!-- Testimonial 2 -->
            <div class="professional-card rounded-xl p-8 hover:shadow-xl transition-shadow duration-300 bg-white">
                <div class="flex items-center mb-6">
                    <div class="w-14 h-14 bg-accent-100 rounded-full flex items-center justify-center text-2xl mr-4">
                        <svg class="w-8 h-8 text-accent-600" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
                        </svg>
                    </div>
                    <div>
                        <h4 class="font-bold text-gray-900">Grace Wanjiku</h4>
                        <p class="text-gray-700 text-sm">Nanny</p>
                    </div>
                </div>
                <div class="flex text-yellow-400 text-xl mb-4">
                    <span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
                </div>
                <p class="text-gray-700 leading-relaxed italic">
                    "The support team helped me with all documents. I was nervous about working abroad, but M-Ajira guided me every step of the way. Now I'm earning well!"
                </p>
            </div>

            <!-- Testimonial 3 -->
            <div class="professional-card rounded-xl p-8 hover:shadow-xl transition-shadow duration-300 bg-white">
                <div class="flex items-center mb-6">
                    <div class="w-14 h-14 bg-secondary-100 rounded-full flex items-center justify-center text-2xl mr-4">
                        <svg class="w-8 h-8 text-secondary-600" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
                        </svg>
                    </div>
                    <div>
                        <h4 class="font-bold text-gray-900">David Omondi</h4>
                        <p class="text-gray-700 text-sm">Driver</p>
                    </div>
                </div>
                <div class="flex text-yellow-400 text-xl mb-4">
                    <span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
                </div>
                <p class="text-gray-700 leading-relaxed italic">
                    "Best decision ever! M-Ajira connected me with a reputable employer. The salary is great and my family is well taken care of. Thank you M-Ajira!"
                </p>
            </div>
        </div>
    </div>
</section>

<!-- FAQs Section -->
<section class="py-20 bg-gradient-to-br from-slate-100 via-gray-100 to-zinc-100">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Section Header -->
        <div class="text-center mb-16">
            <!-- <span class="inline-block px-4 py-2 bg-gray-800 text-white rounded-full font-semibold text-sm uppercase tracking-wider mb-4">Frequently Asked Questions</span> -->
            <h2 class="inline-block px-5 py-2 bg-gray-800 text-white rounded-full text-2xl md:text-3xl font-semibold mb-4">FAQs</h2>
            <!-- <p class="text-xl text-gray-700">Common questions about M-Ajira</p> -->
        </div>

        <!-- FAQs Grid -->
        <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-sm border border-gray-100">
    
    <details class="group border-b border-gray-200 last:border-0">
        <summary class="flex justify-between items-center cursor-pointer p-6 hover:bg-gray-50 transition-colors duration-200 list-none">
            <h3 class="text-lg md:text-xl font-bold text-gray-900">What is M-Ajira?</h3>
            <span class="text-gray-500 transition-transform duration-300 group-open:rotate-45">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                </svg>
            </span>
        </summary>
        <div class="px-6 pb-6 text-gray-700 leading-relaxed">
            A digital platform connecting job seekers to verified overseas job opportunities.
        </div>
    </details>

    <details class="group border-b border-gray-200 last:border-0">
        <summary class="flex justify-between items-center cursor-pointer p-6 hover:bg-gray-50 transition-colors duration-200 list-none">
            <h3 class="text-lg md:text-xl font-bold text-gray-900">Who can apply?</h3>
            <span class="text-gray-500 transition-transform duration-300 group-open:rotate-45">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                </svg>
            </span>
        </summary>
        <div class="px-6 pb-6 text-gray-700 leading-relaxed">
            Candidates who meet the job requirements.
        </div>
    </details>

    <details class="group border-b border-gray-200 last:border-0">
        <summary class="flex justify-between items-center cursor-pointer p-6 hover:bg-gray-50 transition-colors duration-200 list-none">
            <h3 class="text-lg md:text-xl font-bold text-gray-900">Are the jobs legitimate?</h3>
            <span class="text-gray-500 transition-transform duration-300 group-open:rotate-45">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                </svg>
            </span>
        </summary>
        <div class="px-6 pb-6 text-gray-700 leading-relaxed">
            Yes. All jobs and employers are verified.
        </div>
    </details>

    <details class="group border-b border-gray-200 last:border-0">
        <summary class="flex justify-between items-center cursor-pointer p-6 hover:bg-gray-50 transition-colors duration-200 list-none">
            <h3 class="text-lg md:text-xl font-bold text-gray-900">How do I apply?</h3>
            <span class="text-gray-500 transition-transform duration-300 group-open:rotate-45">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                </svg>
            </span>
        </summary>
        <div class="px-6 pb-6 text-gray-700 leading-relaxed">
            Register, complete your profile, and apply online.
        </div>
    </details>

    <details class="group border-b border-gray-200 last:border-0">
        <summary class="flex justify-between items-center cursor-pointer p-6 hover:bg-gray-50 transition-colors duration-200 list-none">
            <h3 class="text-lg md:text-xl font-bold text-gray-900">What is the registration fee and why is it required?</h3>
            <span class="text-gray-500 transition-transform duration-300 group-open:rotate-45">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                </svg>
            </span>
        </summary>
        <div class="px-6 pb-6 text-gray-700 leading-relaxed">
            <p class="mb-3">The registration fee is a one-time, non-refundable fee that helps us:</p>
            <ul class="list-disc pl-5 mb-3 space-y-1">
                <li>Verify and process your documents.</li>
                <li>Pre-screen and shortlist your profile for active job openings.</li>
                <li>Set up your candidate profile in our system.</li>
                <li>Provide initial consultation and recruitment guidance.</li>
            </ul>
            <!-- <p class="italic text-gray-500 text-sm">This fee ensures serious applicants are considered and helps us manage quality and commitment.</p> -->
        </div>
    </details>

</div>
    </div>
</section>

<!-- CTA Section -->
<section class="py-20 bg-gradient-to-br from-blue-700 via-blue-800 to-blue-900 relative overflow-hidden">
    <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC4wNSI+PHBhdGggZD0iTTM2IDE2YzAtNi42MjcgNS4zNzMtMTIgMTItMTJzMTIgNS4zNzMgMTIgMTItNS4zNzMgMTItMTIgMTItMTItNS4zNzMtMTItMTJ6bTAgMzZjMC02LjYyNyA1LjM3My0xMiAxMi0xMnMxMiA1LjM3MyAxMiAxMi01LjM3MyAxMi0xMiAxMi0xMi01LjM3My0xMi0xMnoiLz48L2c+PC9nPjwvc3ZnPg==')] opacity-10"></div>

    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
        <!-- <div class="inline-block bg-white/10 backdrop-blur-sm px-6 py-3 rounded-full mb-8 border border-white/20">
            <span class="text-white font-semibold">Join thousands of successful candidates</span>
        </div> -->
        
        <h2 class="text-4xl md:text-5xl font-bold text-white mb-6">Ready to Start Your Journey?</h2>
        <!-- <p class="text-xl text-white mb-10 max-w-2xl mx-auto">
            Join thousands of candidates finding opportunities abroad
        </p> -->
        <a href="{{ route('candidate.register') }}" class="inline-block bg-white text-blue-700 font-bold px-10 py-4 rounded-lg hover:bg-gray-50 transition shadow-2xl">
            Register Now
        </a>
        
        <!-- Trust Indicators -->
        <div class="grid grid-cols-3 gap-8 mt-16 max-w-2xl mx-auto">
            <div class="text-center">
                <div class="w-12 h-12 bg-white/10 backdrop-blur-sm rounded-lg flex items-center justify-center mx-auto mb-3">
                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                </div>
                <p class="text-white font-medium">Verified Employers</p>
            </div>
            <div class="text-center">
                <div class="w-12 h-12 bg-white/10 backdrop-blur-sm rounded-lg flex items-center justify-center mx-auto mb-3">
                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
                    </svg>
                </div>
                <p class="text-white font-medium">Secure Platform</p>
            </div>
            <div class="text-center">
                <div class="w-12 h-12 bg-white/10 backdrop-blur-sm rounded-lg flex items-center justify-center mx-auto mb-3">
                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
                    </svg>
                </div>
                <p class="text-white font-medium">Trusted Service</p>
            </div>
        </div>
    </div>
</section>

<!-- Background Image Carousel Script -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const slides = document.querySelectorAll('.hero-slide');
        let currentSlide = 0;
        
        if (slides.length > 1) {
            setInterval(() => {
                slides[currentSlide].classList.remove('active');
                slides[currentSlide].style.opacity = '0';
                
                currentSlide = (currentSlide + 1) % slides.length;
                
                slides[currentSlide].classList.add('active');
                slides[currentSlide].style.opacity = '1';
            }, 5000); // Change image every 5 seconds
        }
    });
</script>

<style>
    .hero-slide {
        opacity: 0;
        transition: opacity 1s ease-in-out;
    }
    .hero-slide.active {
        opacity: 1;
    }
</style>

@endsection