@extends('layouts.app')
@section('title', 'Find Your Dream Job')

@section('content')

{{-- Hero + Search --}}
<section class="bg-gradient-to-r from-blue-600 to-indigo-700 text-white py-16">
    <div class="max-w-7xl mx-auto px-4">
        <h1 class="text-4xl md:text-5xl font-bold mb-3">Find Your Dream Job</h1>
        <p class="text-blue-100 mb-8 text-lg">{{ $stats['jobs'] }}+ jobs waiting for you</p>

        <form method="GET" action="{{ route('jobs.index') }}"
              class="bg-white p-4 rounded-lg shadow-lg grid grid-cols-1 md:grid-cols-4 gap-3">
            <input name="keyword" placeholder="Job title, keyword..."
                   class="border rounded px-3 py-2 text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500">
            <input name="location" placeholder="Location"
                   class="border rounded px-3 py-2 text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500">
            <select name="job_type" class="border rounded px-3 py-2 text-gray-800">
                <option value="">All Types</option>
                <option value="full_time">Full Time</option>
                <option value="part_time">Part Time</option>
                <option value="contract">Contract</option>
                <option value="internship">Internship</option>
            </select>
            <button class="bg-blue-600 text-white rounded px-4 py-2 font-semibold hover:bg-blue-700">
                Search
            </button>
        </form>
    </div>
</section>

{{-- Stats --}}
<section class="max-w-7xl mx-auto px-4 -mt-8">
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        @foreach ([
            ['Jobs', $stats['jobs'], 'text-blue-600'],
            ['Companies', $stats['companies'], 'text-green-600'],
            ['Categories', $stats['categories'], 'text-purple-600'],
            ['Seekers', $stats['seekers'], 'text-orange-600'],
        ] as [$label, $count, $color])
            <div class="bg-white rounded-lg shadow p-6 text-center">
                <p class="text-3xl font-bold {{ $color }}">{{ $count }}</p>
                <p class="text-gray-600 text-sm mt-1">{{ $label }}</p>
            </div>
        @endforeach
    </div>
</section>

{{-- Categories --}}
<section class="max-w-7xl mx-auto px-4 mt-12">
    <h2 class="text-2xl font-bold mb-4">Browse by Category</h2>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        @foreach($categories as $category)
            <a href="{{ route('jobs.by-category', $category->slug) }}"
               class="bg-white rounded-lg shadow p-5 hover:shadow-lg transition">
                <p class="font-semibold text-gray-800">{{ $category->name }}</p>
                <p class="text-sm text-gray-500 mt-1">{{ $category->jobs_count }} jobs</p>
            </a>
        @endforeach
    </div>
</section>

{{-- Featured Jobs --}}
@if($featuredJobs->count())
<section class="max-w-7xl mx-auto px-4 mt-12">
    <h2 class="text-2xl font-bold mb-4">⭐ Featured Jobs</h2>
    <div class="space-y-3">
        @foreach($featuredJobs as $job)
            @include('jobs._card', ['job' => $job])
        @endforeach
    </div>
</section>
@endif

{{-- Latest Jobs --}}
<section class="max-w-7xl mx-auto px-4 mt-12">
    <div class="flex justify-between items-center mb-4">
        <h2 class="text-2xl font-bold">Latest Jobs</h2>
        <a href="{{ route('jobs.index') }}" class="text-blue-600 hover:underline">View all →</a>
    </div>
    <div class="space-y-3">
        @foreach($latestJobs as $job)
            @include('jobs._card', ['job' => $job])
        @endforeach
    </div>
</section>

@endsection