@extends('layouts.public')

@section('title', 'How It Works - M-Ajira')

@section('content')

<!-- Hero Section -->
<section class="animated-bg py-12 md:py-20 lg:py-32 relative overflow-hidden">
    <div class="absolute inset-0 overflow-hidden pointer-events-none">
        <div class="absolute top-20 right-20 w-96 h-96 bg-white/10 rounded-full blur-3xl float-animation"></div>
        <div class="absolute bottom-20 left-20 w-80 h-80 bg-white/10 rounded-full blur-3xl float-animation" style="animation-delay: 1s;"></div>
    </div>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
        <div class="glass inline-block px-4 md:px-6 py-2 md:py-3 rounded-full mb-4 md:mb-6">
            <span class="text-white font-bold text-sm md:text-lg">📋 Simple Process</span>
        </div>
        
        <h1 class="text-3xl md:text-5xl lg:text-7xl font-black text-white mb-6 md:mb-8 leading-tight">
            How M-Ajira Works
        </h1>
        <p class="text-base md:text-xl lg:text-2xl text-white/95 max-w-3xl mx-auto leading-relaxed">
            All applications are reviewed by verified employers
        </p>
    </div>
</section>

<!-- Steps Section -->
<section class="py-12 md:py-16 lg:py-24 relative">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <!-- Step 1: Register -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-16 items-center mb-16 md:mb-24 lg:mb-32">
            <div class="order-2 lg:order-1">
                <div class="glass-card p-3 md:p-4 rounded-2xl md:rounded-3xl inline-block mb-4 md:mb-6">
                    <div class="flex items-center space-x-2 md:space-x-3">
                        <div class="w-10 h-10 md:w-12 md:h-12 bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl flex items-center justify-center text-white font-black text-lg md:text-xl">
                            1
                        </div>
                        <span class="font-bold text-purple-600 text-sm md:text-lg">STEP ONE</span>
                    </div>
                </div>
                
                <h2 class="text-3xl md:text-5xl lg:text-6xl font-black text-gray-800 mb-4 md:mb-6">Register</h2>
                <p class="text-base md:text-xl lg:text-2xl text-gray-600 mb-6 md:mb-8 leading-relaxed">
                    Create your M-Ajira account
                </p>
                
                <div class="space-y-3 md:space-y-4 mb-6 md:mb-8">
                    <div class="flex items-start space-x-3 md:space-x-4">
                        <div class="w-6 h-6 md:w-8 md:h-8 bg-green-100 rounded-lg flex items-center justify-center flex-shrink-0">
                            <span class="text-green-600 font-bold text-sm md:text-base">✓</span>
                        </div>
                        <div>
                            <h4 class="font-bold text-gray-800 text-base md:text-lg">Quick and easy registration</h4>
                            <p class="text-gray-600 text-sm md:text-base">Takes less than 5 minutes to complete</p>
                        </div>
                    </div>
                    
                    <div class="flex items-start space-x-3 md:space-x-4">
                        <div class="w-6 h-6 md:w-8 md:h-8 bg-green-100 rounded-lg flex items-center justify-center flex-shrink-0">
                            <span class="text-green-600 font-bold text-sm md:text-base">✓</span>
                        </div>
                        <div>
                            <h4 class="font-bold text-gray-800 text-base md:text-lg">Secure and confidential</h4>
                            <p class="text-gray-600 text-sm md:text-base">Your data is protected with enterprise security</p>
                        </div>
                    </div>
                </div>

                <a href="{{ route('candidate.register') }}" class="inline-block btn-primary text-white font-bold px-6 md:px-10 py-3 md:py-5 rounded-xl md:rounded-2xl text-base md:text-xl">
                    Register Now →
                </a>
            </div>

            <div class="order-1 lg:order-2 relative">
                <div class="glass-card p-8 md:p-12 rounded-3xl md:rounded-[3rem] card-hover">
                    <div class="text-[100px] md:text-[150px] lg:text-[180px] text-center leading-none">📝</div>
                </div>
                <!-- Floating badges -->
                <div class="hidden md:block absolute -top-6 -right-6 glass-card p-4 rounded-2xl float-animation">
                    <div class="text-2xl mb-2">⚡</div>
                    <p class="text-sm font-bold text-gray-800">Quick Setup</p>
                </div>
                <div class="hidden md:block absolute -bottom-6 -left-6 glass-card p-4 rounded-2xl float-animation" style="animation-delay: 0.5s;">
                    <div class="text-2xl mb-2">🔒</div>
                    <p class="text-sm font-bold text-gray-800">100% Secure</p>
                </div>
            </div>
        </div>

        <!-- Step 2: Complete Profile -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-16 items-center mb-16 md:mb-24 lg:mb-32">
            <div class="relative">
                <div class="glass-card p-8 md:p-12 rounded-3xl md:rounded-[3rem] card-hover">
                    <div class="text-[100px] md:text-[150px] lg:text-[180px] text-center leading-none">📋</div>
                </div>
                <!-- Floating badges -->
                <div class="hidden md:block absolute -top-6 -left-6 glass-card p-4 rounded-2xl float-animation">
                    <div class="text-2xl mb-2">✨</div>
                    <p class="text-sm font-bold text-gray-800">Smart Matching</p>
                </div>
                <div class="hidden md:block absolute -bottom-6 -right-6 glass-card p-4 rounded-2xl float-animation" style="animation-delay: 0.5s;">
                    <div class="text-2xl mb-2">📸</div>
                    <p class="text-sm font-bold text-gray-800">Upload Docs</p>
                </div>
            </div>

            <div>
                <div class="glass-card p-3 md:p-4 rounded-2xl md:rounded-3xl inline-block mb-4 md:mb-6">
                    <div class="flex items-center space-x-2 md:space-x-3">
                        <div class="w-10 h-10 md:w-12 md:h-12 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-xl flex items-center justify-center text-white font-black text-lg md:text-xl">
                            2
                        </div>
                        <span class="font-bold text-blue-600 text-sm md:text-lg">STEP TWO</span>
                    </div>
                </div>
                
                <h2 class="text-3xl md:text-5xl lg:text-6xl font-black text-gray-800 mb-4 md:mb-6">Complete Your Profile</h2>
                <p class="text-base md:text-xl lg:text-2xl text-gray-600 mb-6 md:mb-8 leading-relaxed">
                    Add your experience and credentials
                </p>
                
                <div class="space-y-3 md:space-y-4 mb-6 md:mb-8">
                    <div class="flex items-start space-x-3 md:space-x-4">
                        <div class="w-6 h-6 md:w-8 md:h-8 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0">
                            <span class="text-blue-600 font-bold text-sm md:text-base">✓</span>
                        </div>
                        <div>
                            <h4 class="font-bold text-gray-800 text-base md:text-lg">Add your skills and experience</h4>
                            <p class="text-gray-600 text-sm md:text-base">Showcase your expertise and work history</p>
                        </div>
                    </div>
                    
                    <div class="flex items-start space-x-3 md:space-x-4">
                        <div class="w-6 h-6 md:w-8 md:h-8 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0">
                            <span class="text-blue-600 font-bold text-sm md:text-base">✓</span>
                        </div>
                        <div>
                            <h4 class="font-bold text-gray-800 text-base md:text-lg">Upload passport and certificates</h4>
                            <p class="text-gray-600 text-sm md:text-base">Secure document storage and verification</p>
                        </div>
                    </div>
                    
                    <div class="flex items-start space-x-3 md:space-x-4">
                        <div class="w-6 h-6 md:w-8 md:h-8 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0">
                            <span class="text-blue-600 font-bold text-sm md:text-base">✓</span>
                        </div>
                        <div>
                            <h4 class="font-bold text-gray-800 text-base md:text-lg">Get matched with suitable jobs</h4>
                            <p class="text-gray-600 text-sm md:text-base">Our system finds the best opportunities for you</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Step 3: Browse Jobs -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-16 items-center mb-16 md:mb-24 lg:mb-32">
            <div class="order-2 lg:order-1">
                <div class="glass-card p-3 md:p-4 rounded-2xl md:rounded-3xl inline-block mb-4 md:mb-6">
                    <div class="flex items-center space-x-2 md:space-x-3">
                        <div class="w-10 h-10 md:w-12 md:h-12 bg-gradient-to-br from-green-500 to-emerald-500 rounded-xl flex items-center justify-center text-white font-black text-lg md:text-xl">
                            3
                        </div>
                        <span class="font-bold text-green-600 text-sm md:text-lg">STEP THREE</span>
                    </div>
                </div>
                
                <h2 class="text-3xl md:text-5xl lg:text-6xl font-black text-gray-800 mb-4 md:mb-6">Browse Jobs</h2>
                <p class="text-base md:text-xl lg:text-2xl text-gray-600 mb-6 md:mb-8 leading-relaxed">
                    View verified opportunities
                </p>
                
                <div class="space-y-3 md:space-y-4 mb-6 md:mb-8">
                    <div class="flex items-start space-x-3 md:space-x-4">
                        <div class="w-6 h-6 md:w-8 md:h-8 bg-green-100 rounded-lg flex items-center justify-center flex-shrink-0">
                            <span class="text-green-600 font-bold text-sm md:text-base">✓</span>
                        </div>
                        <div>
                            <h4 class="font-bold text-gray-800 text-base md:text-lg">See your match score for each job</h4>
                            <p class="text-gray-600 text-sm md:text-base">Know exactly how well you fit each role</p>
                        </div>
                    </div>
                    
                    <div class="flex items-start space-x-3 md:space-x-4">
                        <div class="w-6 h-6 md:w-8 md:h-8 bg-green-100 rounded-lg flex items-center justify-center flex-shrink-0">
                            <span class="text-green-600 font-bold text-sm md:text-base">✓</span>
                        </div>
                        <div>
                            <h4 class="font-bold text-gray-800 text-base md:text-lg">Filter by country and job type</h4>
                            <p class="text-gray-600 text-sm md:text-base">Find opportunities that match your preferences</p>
                        </div>
                    </div>
                    
                    <div class="flex items-start space-x-3 md:space-x-4">
                        <div class="w-6 h-6 md:w-8 md:h-8 bg-green-100 rounded-lg flex items-center justify-center flex-shrink-0">
                            <span class="text-green-600 font-bold text-sm md:text-base">✓</span>
                        </div>
                        <div>
                            <h4 class="font-bold text-gray-800 text-base md:text-lg">View detailed job descriptions</h4>
                            <p class="text-gray-600 text-sm md:text-base">See salary, requirements, and benefits</p>
                        </div>
                    </div>
                </div>

                <a href="{{ route('jobs') }}" class="inline-block btn-primary text-white font-bold px-6 md:px-10 py-3 md:py-5 rounded-xl md:rounded-2xl text-base md:text-xl">
                    Browse Jobs →
                </a>
            </div>

            <div class="order-1 lg:order-2 relative">
                <div class="glass-card p-8 md:p-12 rounded-3xl md:rounded-[3rem] card-hover">
                    <div class="text-[100px] md:text-[150px] lg:text-[180px] text-center leading-none">🔍</div>
                </div>
                <!-- Floating badges -->
                <div class="hidden md:block absolute -top-6 -right-6 glass-card p-4 rounded-2xl float-animation">
                    <div class="text-2xl mb-2">🎯</div>
                    <p class="text-sm font-bold text-gray-800">Perfect Match</p>
                </div>
                <div class="hidden md:block absolute -bottom-6 -left-6 glass-card p-4 rounded-2xl float-animation" style="animation-delay: 0.5s;">
                    <div class="text-2xl mb-2">📊</div>
                    <p class="text-sm font-bold text-gray-800">Track Progress</p>
                </div>
            </div>
        </div>

        <!-- Step 4: Apply -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-16 items-center">
            <div class="relative">
                <div class="glass-card p-8 md:p-12 rounded-3xl md:rounded-[3rem] card-hover">
                    <div class="text-[100px] md:text-[150px] lg:text-[180px] text-center leading-none">✈️</div>
                </div>
                <!-- Floating badges -->
                <div class="hidden md:block absolute -top-6 -left-6 glass-card p-4 rounded-2xl float-animation">
                    <div class="text-2xl mb-2">🎉</div>
                    <p class="text-sm font-bold text-gray-800">One Click</p>
                </div>
                <div class="hidden md:block absolute -bottom-6 -right-6 glass-card p-4 rounded-2xl float-animation" style="animation-delay: 0.5s;">
                    <div class="text-2xl mb-2">🌍</div>
                    <p class="text-sm font-bold text-gray-800">Direct to Employer</p>
                </div>
            </div>

            <div>
                <div class="glass-card p-3 md:p-4 rounded-2xl md:rounded-3xl inline-block mb-4 md:mb-6">
                    <div class="flex items-center space-x-2 md:space-x-3">
                        <div class="w-10 h-10 md:w-12 md:h-12 bg-gradient-to-br from-orange-500 to-red-500 rounded-xl flex items-center justify-center text-white font-black text-lg md:text-xl">
                            4
                        </div>
                        <span class="font-bold text-orange-600 text-sm md:text-lg">STEP FOUR</span>
                    </div>
                </div>
                
                <h2 class="text-3xl md:text-5xl lg:text-6xl font-black text-gray-800 mb-4 md:mb-6">Apply</h2>
                <p class="text-base md:text-xl lg:text-2xl text-gray-600 mb-6 md:mb-8 leading-relaxed">
                    Submit applications directly to employers
                </p>
                
                <div class="space-y-3 md:space-y-4 mb-6 md:mb-8">
                    <div class="flex items-start space-x-3 md:space-x-4">
                        <div class="w-6 h-6 md:w-8 md:h-8 bg-orange-100 rounded-lg flex items-center justify-center flex-shrink-0">
                            <span class="text-orange-600 font-bold text-sm md:text-base">✓</span>
                        </div>
                        <div>
                            <h4 class="font-bold text-gray-800 text-base md:text-lg">Apply with one click</h4>
                            <p class="text-gray-600 text-sm md:text-base">Your profile is automatically submitted</p>
                        </div>
                    </div>
                    
                    <div class="flex items-start space-x-3 md:space-x-4">
                        <div class="w-6 h-6 md:w-8 md:h-8 bg-orange-100 rounded-lg flex items-center justify-center flex-shrink-0">
                            <span class="text-orange-600 font-bold text-sm md:text-base">✓</span>
                        </div>
                        <div>
                            <h4 class="font-bold text-gray-800 text-base md:text-lg">Track your applications</h4>
                            <p class="text-gray-600 text-sm md:text-base">Real-time updates on your application status</p>
                        </div>
                    </div>
                    
                    <div class="flex items-start space-x-3 md:space-x-4">
                        <div class="w-6 h-6 md:w-8 md:h-8 bg-orange-100 rounded-lg flex items-center justify-center flex-shrink-0">
                            <span class="text-orange-600 font-bold text-sm md:text-base">✓</span>
                        </div>
                        <div>
                            <h4 class="font-bold text-gray-800 text-base md:text-lg">Employers review directly</h4>
                            <p class="text-gray-600 text-sm md:text-base">Your application goes straight to verified employers</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>

<!-- CTA Section -->
<section class="animated-bg py-12 md:py-20 lg:py-32 relative overflow-hidden">
    <div class="absolute inset-0 overflow-hidden pointer-events-none">
        <div class="absolute top-10 left-10 w-64 h-64 bg-white/10 rounded-full blur-3xl float-animation"></div>
        <div class="absolute bottom-10 right-10 w-80 h-80 bg-white/10 rounded-full blur-3xl float-animation" style="animation-delay: 1s;"></div>
    </div>

    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
        <div class="glass-card p-8 md:p-12 lg:p-16 rounded-3xl md:rounded-[3rem]">
            <div class="text-5xl md:text-8xl mb-6 md:mb-8">🚀</div>
            <h2 class="text-3xl md:text-5xl lg:text-6xl font-black text-gray-800 mb-6 md:mb-8">Ready to Begin?</h2>
            <p class="text-base md:text-xl lg:text-2xl text-gray-600 mb-8 md:mb-12">
                Start your journey to international employment today
            </p>
            <a href="{{ route('candidate.register') }}" class="inline-block btn-primary text-white font-bold px-10 md:px-16 py-4 md:py-6 rounded-xl md:rounded-2xl hover:shadow-2xl text-lg md:text-2xl">
                Register Now →
            </a>
            
            <p class="text-gray-600 mt-6 md:mt-8 text-sm md:text-base">
                Have questions? <a href="{{ route('contact') }}" class="text-purple-600 font-bold hover:underline">Contact us</a>
            </p>
        </div>
    </div>
</section>

@endsection