@extends('layouts.public')
@section('title', 'Recrutement')

@section('content')

<section class="bg-navy py-16">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <p class="text-gold font-bold text-sm uppercase tracking-wide mb-3">Recrutement</p>
        <h1 class="font-display font-extrabold text-3xl sm:text-5xl text-white">Rejoignez nos équipes</h1>
        <p class="text-white/70 mt-5 max-w-xl mx-auto">Nous recrutons régulièrement des agents terrain, superviseurs et profils commerciaux partout en Afrique.</p>
    </div>
</section>

<section class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
    @if($offers->isEmpty())
        <div class="text-center py-10">
            <p class="text-gray-400 mb-6">Aucune offre ouverte pour le moment. Envoie-nous quand même ton profil !</p>
            <a href="{{ route('jobs.spontaneous') }}" class="inline-flex items-center gap-2 btn-gold text-navy-dark font-display font-extrabold px-6 py-3 rounded-full shadow-md hover:brightness-105 transition-all">
                Candidature spontanée <x-icon name="arrow-right" class="w-4 h-4" />
            </a>
        </div>
    @else
        <div class="space-y-4">
            @foreach($offers as $offer)
                <a href="{{ route('jobs.show', $offer) }}" class="group flex items-center justify-between gap-4 bg-white border border-gray-100 rounded-2xl p-6 shadow-sm hover:shadow-lg hover:border-gold/40 transition-all">
                    <div>
                        <h3 class="font-display font-bold text-lg text-navy-dark group-hover:text-gold transition-colors">{{ $offer->title }}</h3>
                        <div class="flex flex-wrap gap-x-4 gap-y-1 text-sm text-gray-500 mt-2">
                            @if($offer->contract_type)<span class="inline-flex items-center gap-1"><x-icon name="briefcase" class="w-4 h-4" />{{ $offer->contract_type }}</span>@endif
                            @if($offer->location)<span class="inline-flex items-center gap-1"><x-icon name="map-pin" class="w-4 h-4" />{{ $offer->location }}</span>@endif
                            @if($offer->deadline)<span>Clôture le {{ $offer->deadline->translatedFormat('d F Y') }}</span>@endif
                        </div>
                    </div>
                    <x-icon name="arrow-right" class="w-5 h-5 text-gray-300 group-hover:text-gold shrink-0 group-hover:translate-x-1 transition-all" />
                </a>
            @endforeach
        </div>

        <div class="text-center mt-12 pt-10 border-t border-gray-100">
            <p class="text-gray-500 mb-4">Aucune offre ne correspond à ton profil ?</p>
            <a href="{{ route('jobs.spontaneous') }}" class="inline-flex items-center gap-2 font-bold text-navy hover:text-gold transition-colors">
                Envoyer une candidature spontanée <x-icon name="arrow-right" class="w-4 h-4" />
            </a>
        </div>
    @endif
</section>

@endsection