@extends('layouts.public')

@section('title', ($demand->job_title ?: 'Job Opportunity') . ' - M-Ajira')

@section('content')

<!-- Breadcrumb & Back -->
<section class="py-6 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <a href="{{ route('jobs') }}" class="inline-flex items-center space-x-2 text-purple-600 font-bold hover:text-purple-800 group">
            <span class="group-hover:-translate-x-1 transition-transform">←</span>
            <span>Back to Jobs</span>
        </a>
    </div>
</section>

<!-- Job Header -->
<section class="py-8 md:py-12 relative overflow-hidden">
    <div class="absolute inset-0 bg-gradient-to-br from-purple-50 via-pink-50 to-blue-50"></div>
    
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div class="glass-card p-6 md:p-12 rounded-2xl md:rounded-[3rem]">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 md:gap-8">
                <!-- Left: Job Info -->
                <div class="lg:col-span-2">
                    <div class="flex items-start space-x-4 md:space-x-6 mb-4 md:mb-6">
                        <div class="w-16 h-16 md:w-24 md:h-24 bg-gradient-to-br from-purple-500 to-pink-500 rounded-2xl md:rounded-3xl flex items-center justify-center text-3xl md:text-5xl flex-shrink-0">
                            🎯
                        </div>
                        <div class="flex-1 min-w-0">
                            <div class="flex flex-wrap items-center gap-2 mb-2">
                                <span class="px-3 py-1 md:px-4 md:py-2 rounded-full text-xs md:text-sm font-bold {{ $demand->status === 'open' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800' }}">
                                    {{ ucfirst($demand->status) }}
                                </span>
                                <span class="px-3 py-1 md:px-4 md:py-2 bg-blue-100 text-blue-800 rounded-full text-xs md:text-sm font-bold">
                                    🌍 International
                                </span>
                                @if($demand->payment_type)
                                <span class="px-3 py-1 md:px-4 md:py-2 rounded-full text-xs md:text-sm font-bold
                                    {{ $demand->payment_type === 'fixed' ? 'bg-green-100 text-green-800' : '' }}
                                    {{ $demand->payment_type === 'range' ? 'bg-blue-100 text-blue-800' : '' }}
                                    {{ $demand->payment_type === 'per_trip' ? 'bg-yellow-100 text-yellow-800' : '' }}
                                    {{ $demand->payment_type === 'hourly' ? 'bg-purple-100 text-purple-800' : '' }}
                                    {{ $demand->payment_type === 'commission' ? 'bg-pink-100 text-pink-800' : '' }}
                                    {{ $demand->payment_type === 'negotiable' ? 'bg-gray-100 text-gray-800' : '' }}">
                                    @switch($demand->payment_type)
                                        @case('fixed') 💰 Fixed @break
                                        @case('range') 📊 Range @break
                                        @case('per_trip') 🚗 Per Trip @break
                                        @case('hourly') ⏰ Hourly @break
                                        @case('commission') 💵 Commission @break
                                        @case('negotiable') 🤝 Negotiable @break
                                        @default {{ ucfirst($demand->payment_type) }}
                                    @endswitch
                                </span>
                                @endif
                            </div>
                            <h1 class="text-2xl md:text-4xl lg:text-5xl font-black text-gray-800 mb-2 md:mb-3 break-words">{{ $demand->job_title ?: 'Job Opportunity' }}</h1>
                            <div class="flex flex-wrap items-center gap-2 md:gap-4 text-gray-600">
                                <span class="flex items-center space-x-2">
                                    <span class="text-xl md:text-2xl">🌍</span>
                                    <span class="font-bold text-base md:text-lg">{{ $demand->country }}</span>
                                </span>
                                <span class="text-gray-400 hidden md:inline">•</span>
                                <span class="text-xs md:text-sm">Ref: {{ $demand->demand_sn }}</span>
                            </div>
                        </div>
                    </div>

                    <!-- Salary Highlight - Dynamic Based on Payment Type -->
                    @switch($demand->payment_type)
                        @case('fixed')
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-3 md:gap-4 mb-6 md:mb-8">
                                <div class="p-4 md:p-6 bg-gradient-to-br from-green-50 to-emerald-50 rounded-xl md:rounded-2xl border-2 border-green-200">
                                    <div class="text-xs md:text-sm text-green-600 font-bold mb-1">Foreign Currency</div>
                                    <div class="text-2xl md:text-4xl font-black bg-gradient-to-r from-green-600 to-emerald-600 bg-clip-text text-transparent">
                                        {{ $demand->salary_currency }} {{ number_format($demand->salary_foreign_amount) }}
                                    </div>
                                    <div class="text-xs md:text-sm text-gray-600 mt-1">per month</div>
                                </div>
                                <div class="p-4 md:p-6 bg-gradient-to-br from-blue-50 to-cyan-50 rounded-xl md:rounded-2xl border-2 border-blue-200">
                                    <div class="text-xs md:text-sm text-blue-600 font-bold mb-1">Kenyan Shillings</div>
                                    <div class="text-2xl md:text-4xl font-black bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent">
                                        KES {{ number_format($demand->salary_foreign_amount * $demand->exchange_rate) }}
                                    </div>
                                    <div class="text-xs md:text-sm text-gray-600 mt-1">@ rate: {{ $demand->exchange_rate }}</div>
                                </div>
                            </div>
                        @break

                        @case('range')
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-3 md:gap-4 mb-6 md:mb-8">
                                <div class="p-4 md:p-6 bg-gradient-to-br from-green-50 to-emerald-50 rounded-xl md:rounded-2xl border-2 border-green-200">
                                    <div class="text-xs md:text-sm text-green-600 font-bold mb-1">Salary Range</div>
                                    <div class="text-xl md:text-3xl font-black bg-gradient-to-r from-green-600 to-emerald-600 bg-clip-text text-transparent">
                                        {{ $demand->salary_currency }} {{ number_format($demand->salary_min) }} - {{ number_format($demand->salary_max) }}
                                    </div>
                                    <div class="text-xs md:text-sm text-gray-600 mt-1">per month</div>
                                </div>
                                <div class="p-4 md:p-6 bg-gradient-to-br from-blue-50 to-cyan-50 rounded-xl md:rounded-2xl border-2 border-blue-200">
                                    <div class="text-xs md:text-sm text-blue-600 font-bold mb-1">In Kenyan Shillings</div>
                                    <div class="text-xl md:text-3xl font-black bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent">
                                        KES {{ number_format($demand->salary_min * $demand->exchange_rate) }} - {{ number_format($demand->salary_max * $demand->exchange_rate) }}
                                    </div>
                                    <div class="text-xs md:text-sm text-gray-600 mt-1">per month</div>
                                </div>
                            </div>
                        @break

                        @case('per_trip')
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-3 md:gap-4 mb-6 md:mb-8">
                                <div class="p-4 md:p-6 bg-gradient-to-br from-yellow-50 to-orange-50 rounded-xl md:rounded-2xl border-2 border-yellow-200">
                                    <div class="text-xs md:text-sm text-yellow-600 font-bold mb-1">Per Trip Rate</div>
                                    <div class="text-2xl md:text-4xl font-black bg-gradient-to-r from-yellow-600 to-orange-600 bg-clip-text text-transparent">
                                        {{ $demand->salary_currency }} {{ number_format($demand->per_trip_rate, 2) }}
                                    </div>
                                    <div class="text-xs md:text-sm text-gray-600 mt-1">per trip/task</div>
                                </div>
                                <div class="p-4 md:p-6 bg-gradient-to-br from-blue-50 to-cyan-50 rounded-xl md:rounded-2xl border-2 border-blue-200">
                                    <div class="text-xs md:text-sm text-blue-600 font-bold mb-1">Estimated Monthly</div>
                                    <div class="text-xl md:text-3xl font-black bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent">
                                        {{ $demand->salary_currency }} {{ number_format($demand->per_trip_rate * ($demand->estimated_trips_per_month ?? 100)) }}
                                    </div>
                                    <div class="text-xs md:text-sm text-gray-600 mt-1">~{{ $demand->estimated_trips_per_month ?? 100 }} trips/month</div>
                                </div>
                            </div>
                        @break

                        @case('hourly')
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-3 md:gap-4 mb-6 md:mb-8">
                                <div class="p-4 md:p-6 bg-gradient-to-br from-purple-50 to-pink-50 rounded-xl md:rounded-2xl border-2 border-purple-200">
                                    <div class="text-xs md:text-sm text-purple-600 font-bold mb-1">Hourly Rate</div>
                                    <div class="text-2xl md:text-4xl font-black bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
                                        {{ $demand->salary_currency }} {{ number_format($demand->hourly_rate, 2) }}
                                    </div>
                                    <div class="text-xs md:text-sm text-gray-600 mt-1">per hour</div>
                                </div>
                                <div class="p-4 md:p-6 bg-gradient-to-br from-blue-50 to-cyan-50 rounded-xl md:rounded-2xl border-2 border-blue-200">
                                    <div class="text-xs md:text-sm text-blue-600 font-bold mb-1">Estimated Monthly</div>
                                    <div class="text-xl md:text-3xl font-black bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent">
                                        {{ $demand->salary_currency }} {{ number_format($demand->hourly_rate * ($demand->estimated_hours_per_month ?? 160)) }}
                                    </div>
                                    <div class="text-xs md:text-sm text-gray-600 mt-1">~{{ $demand->estimated_hours_per_month ?? 160 }} hours/month</div>
                                </div>
                            </div>
                        @break

                        @case('commission')
                            <div class="p-6 md:p-8 bg-gradient-to-br from-pink-50 to-red-50 rounded-xl md:rounded-2xl border-2 border-pink-200 mb-6 md:mb-8">
                                <div class="text-center">
                                    <div class="text-xs md:text-sm text-pink-600 font-bold mb-2">Commission-Based</div>
                                    <div class="text-3xl md:text-5xl font-black bg-gradient-to-r from-pink-600 to-red-600 bg-clip-text text-transparent mb-2">
                                        {{ $demand->commission_percentage }}% Commission
                                    </div>
                                    @if($demand->base_salary)
                                    <div class="text-xl md:text-2xl font-bold text-gray-700 mb-1">
                                        + {{ $demand->salary_currency }} {{ number_format($demand->base_salary) }} Base Salary
                                    </div>
                                    @endif
                                    @if($demand->commission_details)
                                    <p class="text-sm md:text-base text-gray-600 mt-3">{{ $demand->commission_details }}</p>
                                    @endif
                                </div>
                            </div>
                        @break

                        @case('negotiable')
                            <div class="p-6 md:p-8 bg-gradient-to-br from-gray-50 to-slate-50 rounded-xl md:rounded-2xl border-2 border-gray-200 mb-6 md:mb-8">
                                <div class="text-center">
                                    <div class="text-3xl md:text-5xl font-black text-gray-700 mb-3">🤝 Salary Negotiable</div>
                                    <p class="text-sm md:text-lg text-gray-600">Compensation will be discussed during the interview process</p>
                                    @if($demand->negotiable_details)
                                    <p class="text-sm md:text-base text-gray-600 mt-3 italic">{{ $demand->negotiable_details }}</p>
                                    @endif
                                </div>
                            </div>
                        @break

                        @default
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-3 md:gap-4 mb-6 md:mb-8">
                                <div class="p-4 md:p-6 bg-gradient-to-br from-green-50 to-emerald-50 rounded-xl md:rounded-2xl border-2 border-green-200">
                                    <div class="text-xs md:text-sm text-green-600 font-bold mb-1">Salary</div>
                                    <div class="text-2xl md:text-4xl font-black bg-gradient-to-r from-green-600 to-emerald-600 bg-clip-text text-transparent">
                                        Contact for details
                                    </div>
                                </div>
                            </div>
                    @endswitch

                    <!-- Additional Benefits (if any) -->
                    @if($demand->additional_benefits)
                    <div class="p-4 md:p-6 bg-gradient-to-br from-indigo-50 to-purple-50 rounded-xl md:rounded-2xl border-2 border-indigo-200 mb-6 md:mb-8">
                        <div class="flex items-center space-x-3 mb-3">
                            <span class="text-2xl md:text-3xl">✨</span>
                            <h3 class="text-xl md:text-2xl font-black text-gray-800">Additional Benefits</h3>
                        </div>
                        <p class="text-sm md:text-lg text-gray-700 leading-relaxed">{{ $demand->additional_benefits }}</p>
                    </div>
                    @endif
                </div>

                <!-- Right: Quick Stats -->
                <div class="space-y-3 md:space-y-4">
                    <div class="p-4 md:p-6 bg-purple-50 rounded-xl md:rounded-2xl text-center">
                        <div class="text-3xl md:text-5xl font-black text-purple-600 mb-2">{{ $demand->positions_available }}</div>
                        <p class="text-sm md:text-base text-gray-700 font-bold">Positions Available</p>
                    </div>
                    
                    <div class="p-4 md:p-6 bg-blue-50 rounded-xl md:rounded-2xl text-center">
                        <div class="text-3xl md:text-5xl font-black text-blue-600 mb-2">{{ $demand->positions_filled }}</div>
                        <p class="text-sm md:text-base text-gray-700 font-bold">Already Filled</p>
                    </div>
                    
                    @if($demand->remaining_positions > 0)
                    <div class="p-4 md:p-6 bg-green-50 rounded-xl md:rounded-2xl text-center">
                        <div class="text-3xl md:text-5xl font-black text-green-600 mb-2">{{ $demand->remaining_positions }}</div>
                        <p class="text-sm md:text-base text-gray-700 font-bold">Still Available</p>
                    </div>
                    @endif
                    
                    @if($demand->experience_years)
                    <div class="p-4 md:p-6 bg-orange-50 rounded-xl md:rounded-2xl text-center">
                        <div class="text-3xl md:text-5xl font-black text-orange-600 mb-2">{{ $demand->experience_years }}</div>
                        <p class="text-sm md:text-base text-gray-700 font-bold">Years Experience</p>
                    </div>
                    @endif
                    
                    @if($demand->deadline)
                    <div class="p-4 md:p-6 bg-red-50 rounded-xl md:rounded-2xl text-center">
                        <div class="text-lg md:text-2xl font-black text-red-600 mb-2">{{ \Carbon\Carbon::parse($demand->deadline)->format('d M Y') }}</div>
                        <p class="text-sm md:text-base text-gray-700 font-bold">Application Deadline</p>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Job Details -->
<section class="py-8 md:py-12">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 md:gap-8">
            
            <!-- Main Content -->
            <div class="lg:col-span-2 space-y-6 md:space-y-8">
                
                <!-- Job Description -->
                @if($demand->job_description)
                <div class="glass-card p-6 md:p-10 rounded-2xl md:rounded-3xl">
                    <div class="flex items-center space-x-3 mb-4 md:mb-6">
                        <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-xl md:text-2xl">
                            📄
                        </div>
                        <h2 class="text-2xl md:text-3xl font-black text-gray-800">Job Description</h2>
                    </div>
                    <div class="prose prose-sm md:prose-lg max-w-none">
                        <p class="text-sm md:text-lg text-gray-700 leading-relaxed whitespace-pre-line">{{ $demand->job_description }}</p>
                    </div>
                </div>
                @endif

                <!-- Requirements -->
                <div class="glass-card p-6 md:p-10 rounded-2xl md:rounded-3xl">
                    <div class="flex items-center space-x-3 mb-6 md:mb-8">
                        <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-xl md:text-2xl">
                            ✓
                        </div>
                        <h2 class="text-2xl md:text-3xl font-black text-gray-800">Requirements</h2>
                    </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6">
                        @if($demand->preferred_gender && $demand->preferred_gender !== 'Any')
                        <div class="p-3 md:p-4 bg-purple-50 rounded-xl md:rounded-2xl">
                            <div class="flex items-center space-x-3 mb-2">
                                <span class="text-xl md:text-2xl">👤</span>
                                <h4 class="text-sm md:text-base font-bold text-gray-800">Gender</h4>
                            </div>
                            <p class="text-base md:text-lg text-gray-700 font-semibold">{{ ucfirst($demand->preferred_gender) }}</p>
                        </div>
                        @endif

                        @if($demand->preferred_age)
                        <div class="p-3 md:p-4 bg-blue-50 rounded-xl md:rounded-2xl">
                            <div class="flex items-center space-x-3 mb-2">
                                <span class="text-xl md:text-2xl">🎂</span>
                                <h4 class="text-sm md:text-base font-bold text-gray-800">Age Range</h4>
                            </div>
                            <p class="text-base md:text-lg text-gray-700 font-semibold">{{ $demand->preferred_age }}</p>
                        </div>
                        @endif

                        @if($demand->preferred_religion)
                        <div class="p-3 md:p-4 bg-green-50 rounded-xl md:rounded-2xl">
                            <div class="flex items-center space-x-3 mb-2">
                                <span class="text-xl md:text-2xl">🕌</span>
                                <h4 class="text-sm md:text-base font-bold text-gray-800">Religion</h4>
                            </div>
                            <p class="text-base md:text-lg text-gray-700 font-semibold">{{ ucfirst($demand->preferred_religion) }}</p>
                        </div>
                        @endif

                        @if($demand->preferred_marital_status)
                        <div class="p-3 md:p-4 bg-orange-50 rounded-xl md:rounded-2xl">
                            <div class="flex items-center space-x-3 mb-2">
                                <span class="text-xl md:text-2xl">💍</span>
                                <h4 class="text-sm md:text-base font-bold text-gray-800">Marital Status</h4>
                            </div>
                            <p class="text-base md:text-lg text-gray-700 font-semibold">{{ ucfirst($demand->preferred_marital_status) }}</p>
                        </div>
                        @endif

                        @if($demand->preferred_number_of_children !== null)
                        <div class="p-3 md:p-4 bg-pink-50 rounded-xl md:rounded-2xl">
                            <div class="flex items-center space-x-3 mb-2">
                                <span class="text-xl md:text-2xl">👶</span>
                                <h4 class="text-sm md:text-base font-bold text-gray-800">Children</h4>
                            </div>
                            <p class="text-base md:text-lg text-gray-700 font-semibold">Max {{ $demand->preferred_number_of_children }}</p>
                        </div>
                        @endif

                        @if($demand->education_level)
                        <div class="p-3 md:p-4 bg-indigo-50 rounded-xl md:rounded-2xl">
                            <div class="flex items-center space-x-3 mb-2">
                                <span class="text-xl md:text-2xl">🎓</span>
                                <h4 class="text-sm md:text-base font-bold text-gray-800">Education Level</h4>
                            </div>
                            <p class="text-base md:text-lg text-gray-700 font-semibold">{{ $demand->education_level }}</p>
                        </div>
                        @endif

                        @if($demand->trade_certificate)
                        <div class="p-3 md:p-4 bg-teal-50 rounded-xl md:rounded-2xl">
                            <div class="flex items-center space-x-3 mb-2">
                                <span class="text-xl md:text-2xl">📜</span>
                                <h4 class="text-sm md:text-base font-bold text-gray-800">Certificate Required</h4>
                            </div>
                            <p class="text-base md:text-lg text-gray-700 font-semibold">{{ $demand->trade_certificate }}</p>
                        </div>
                        @endif

                        @if($demand->preferred_issuing_institution)
                        <div class="p-3 md:p-4 bg-cyan-50 rounded-xl md:rounded-2xl">
                            <div class="flex items-center space-x-3 mb-2">
                                <span class="text-xl md:text-2xl">🏫</span>
                                <h4 class="text-sm md:text-base font-bold text-gray-800">Institution</h4>
                            </div>
                            <p class="text-base md:text-lg text-gray-700 font-semibold">{{ $demand->preferred_issuing_institution }}</p>
                        </div>
                        @endif
                    </div>

                    @if($demand->preferred_counties && is_array($demand->preferred_counties))
                    <div class="mt-4 md:mt-6 p-3 md:p-4 bg-yellow-50 rounded-xl md:rounded-2xl">
                        <div class="flex items-center space-x-3 mb-3">
                            <span class="text-xl md:text-2xl">📍</span>
                            <h4 class="text-sm md:text-base font-bold text-gray-800">Preferred Counties</h4>
                        </div>
                        <div class="flex flex-wrap gap-2">
                            @foreach($demand->preferred_counties as $county)
                            <span class="px-3 py-1 md:px-4 md:py-2 bg-white rounded-full text-xs md:text-sm font-bold text-gray-700 border-2 border-yellow-200">
                                {{ $county }}
                            </span>
                            @endforeach
                        </div>
                    </div>
                    @endif
                </div>

                <!-- What We Offer -->
                <div class="glass-card p-6 md:p-10 rounded-2xl md:rounded-3xl bg-gradient-to-br from-green-50 to-emerald-50">
                    <div class="flex items-center space-x-3 mb-4 md:mb-6">
                        <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-xl md:text-2xl">
                            ✨
                        </div>
                        <h2 class="text-2xl md:text-3xl font-black text-gray-800">What We Offer</h2>
                    </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-3 md:gap-4">
                        <div class="flex items-start space-x-3">
                            <span class="text-xl md:text-2xl">✓</span>
                            <div>
                                <h4 class="text-sm md:text-base font-bold text-gray-800">Competitive Compensation</h4>
                                <p class="text-xs md:text-sm text-gray-600">As described above</p>
                            </div>
                        </div>
                        <div class="flex items-start space-x-3">
                            <span class="text-xl md:text-2xl">✓</span>
                            <div>
                                <h4 class="text-sm md:text-base font-bold text-gray-800">Accommodation</h4>
                                <p class="text-xs md:text-sm text-gray-600">Provided by employer</p>
                            </div>
                        </div>
                        <div class="flex items-start space-x-3">
                            <span class="text-xl md:text-2xl">✓</span>
                            <div>
                                <h4 class="text-sm md:text-base font-bold text-gray-800">Food & Utilities</h4>
                                <p class="text-xs md:text-sm text-gray-600">All inclusive</p>
                            </div>
                        </div>
                        <div class="flex items-start space-x-3">
                            <span class="text-xl md:text-2xl">✓</span>
                            <div>
                                <h4 class="text-sm md:text-base font-bold text-gray-800">Medical Insurance</h4>
                                <p class="text-xs md:text-sm text-gray-600">Full coverage</p>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

            <!-- Sidebar -->
            <div class="space-y-4 md:space-y-6">
                
                <!-- Apply CTA -->
                <div class="glass-card p-6 md:p-8 rounded-2xl md:rounded-3xl text-center bg-gradient-to-br from-purple-50 to-pink-50 lg:sticky lg:top-6">
                    <div class="text-4xl md:text-6xl mb-3 md:mb-4">🎯</div>
                    <h3 class="text-xl md:text-2xl font-black text-gray-800 mb-3 md:mb-4">Interested?</h3>
                    <p class="text-sm md:text-base text-gray-600 mb-4 md:mb-6">Register to apply for this position</p>
                    <a href="{{ route('candidate.register') }}" class="block btn-primary text-white font-bold px-6 md:px-8 py-4 md:py-5 rounded-xl md:rounded-2xl hover:shadow-2xl text-base md:text-lg mb-3 md:mb-4">
                        Register Now →
                    </a>
                    <p class="text-xs md:text-sm text-gray-600">
                        Already registered?<br>
                        <a href="{{ route('candidate.login') }}" class="text-purple-600 font-bold hover:underline">Login here</a>
                    </p>
                </div>

                <!-- Share -->
                <div class="glass-card p-4 md:p-6 rounded-2xl md:rounded-3xl">
                    <h4 class="text-sm md:text-base font-bold text-gray-800 mb-3 md:mb-4">Share this job</h4>
                    <div class="flex space-x-2 md:space-x-3">
                        <button class="flex-1 p-2 md:p-3 bg-blue-100 rounded-xl hover:bg-blue-200 transition">
                            <span class="text-xl md:text-2xl">📘</span>
                        </button>
                        <button class="flex-1 p-2 md:p-3 bg-sky-100 rounded-xl hover:bg-sky-200 transition">
                            <span class="text-xl md:text-2xl">🐦</span>
                        </button>
                        <button class="flex-1 p-2 md:p-3 bg-green-100 rounded-xl hover:bg-green-200 transition">
                            <span class="text-xl md:text-2xl">💬</span>
                        </button>
                    </div>
                </div>

                <!-- Contact Support -->
                <div class="glass-card p-4 md:p-6 rounded-2xl md:rounded-3xl">
                    <div class="text-3xl md:text-4xl mb-2 md:mb-3 text-center">💬</div>
                    <h4 class="text-sm md:text-base font-bold text-gray-800 text-center mb-2">Have Questions?</h4>
                    <p class="text-xs md:text-sm text-gray-600 text-center mb-3 md:mb-4">Our team is here to help</p>
                    <a href="{{ route('contact') }}" class="block text-center text-purple-600 font-bold hover:underline text-sm md:text-base">
                        Contact Us →
                    </a>
                </div>

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

<!-- Browse More Jobs CTA -->
<section class="py-12 md:py-16 lg:py-20 relative overflow-hidden">
    <div class="absolute inset-0 bg-gradient-to-br from-purple-50 via-pink-50 to-blue-50"></div>
    
    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div class="glass-card p-8 md:p-12 lg:p-16 rounded-2xl md:rounded-[3rem] text-center">
            <div class="text-4xl md:text-6xl mb-4 md:mb-6">🔍</div>
            <h2 class="text-2xl md:text-4xl lg:text-5xl font-black text-gray-800 mb-3 md:mb-6">Looking for More Opportunities?</h2>
            <p class="text-sm md:text-lg lg:text-xl text-gray-600 mb-6 md:mb-8">
                Browse all available positions and find your perfect match
            </p>
            <a href="{{ route('jobs') }}" class="inline-block btn-primary text-white font-bold px-8 md:px-12 py-4 md:py-5 rounded-xl md:rounded-2xl text-base md:text-xl hover:shadow-2xl">
                Browse All Jobs →
            </a>
        </div>
    </div>
</section>

@endsection