@extends('layouts.app')

@section('title', __('Home'))

@section('content')
<section class="bg-gradient-to-r from-blue-700 to-indigo-700 text-white rounded-xl p-8 mb-8">
    <h1 class="text-3xl font-bold mb-3">شركة إلحاق عمالة مصرية بالخارج</h1>
    <p class="text-blue-100 mb-5">منصة احترافية للتوظيف الخارجي مع نظام تقييم ذكي للمتقدمين.</p>
    <a href="{{ route('jobs.index') }}" class="inline-block bg-white text-blue-700 font-semibold px-5 py-2 rounded-lg">
        تصفح الوظائف
    </a>
</section>

<section class="grid md:grid-cols-3 gap-4 mb-8">
    <div class="bg-white rounded-lg border p-4">
        <h3 class="font-bold mb-2">الخدمات</h3>
        <p class="text-sm text-slate-600">توظيف خارجي - متابعة طلبات - دعم كامل للمتقدمين.</p>
    </div>
    <div class="bg-white rounded-lg border p-4">
        <h3 class="font-bold mb-2">الدول المتاحة</h3>
        <p class="text-sm text-slate-600">{{ $countries->count() }} دولة متاحة</p>
    </div>
    <div class="bg-white rounded-lg border p-4">
        <h3 class="font-bold mb-2">التخصصات</h3>
        <p class="text-sm text-slate-600">{{ $specialties->count() }} تخصص وظيفي</p>
    </div>
</section>

<section class="mb-10">
    <div class="flex items-center justify-between mb-4">
        <h2 class="text-xl font-bold">أحدث الوظائف</h2>
        <a href="{{ route('jobs.index') }}" class="text-blue-600 text-sm">عرض الكل</a>
    </div>

    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
        @forelse($latestJobs as $job)
            <article class="bg-white border rounded-lg p-4">
                <h3 class="font-semibold text-lg mb-1">{{ app()->getLocale() === 'ar' ? $job->title_ar : $job->title_en }}</h3>
                <p class="text-sm text-slate-500 mb-2">{{ app()->getLocale() === 'ar' ? $job->country->name_ar : $job->country->name_en }}</p>
                <p class="text-sm text-slate-700 mb-3 line-clamp-3">
                    {{ \Illuminate\Support\Str::limit(app()->getLocale() === 'ar' ? $job->description_ar : $job->description_en, 120) }}
                </p>
                <a href="{{ route('jobs.show', $job) }}" class="text-blue-600 text-sm font-medium">تفاصيل الوظيفة</a>
            </article>
        @empty
            <p class="text-slate-600">لا توجد وظائف متاحة حاليًا.</p>
        @endforelse
    </div>
</section>
@endsection