@extends('layouts.app')

@section('title', 'Hirenakes.com - Cari & Dapatkan Karier Tenaga Kesehatan Lebih Mudah')

@section('content')
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-12 pb-16">
    <div class="grid md:grid-cols-2 gap-8 items-center">
        <div>
            <h1 class="text-4xl md:text-5xl font-extrabold text-gray-900 leading-tight">
                Cari & Dapatkan Karier<br>Tenaga Kesehatan Lebih Mudah
            </h1>
            <p class="text-gray-500 mt-4">Platform Karier Tenaga Kesehatan Indonesia</p>

            <form action="{{ route('jobs.index') }}" method="GET" class="mt-6 flex flex-col sm:flex-row gap-3">
                <input type="text" name="q" placeholder="Perawat, RS, Apoteker..."
                       class="flex-1 border border-gray-200 rounded-lg px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary">
                <button class="bg-primary hover:bg-primary-dark text-white font-semibold px-6 py-3 rounded-lg transition">Cari Lowongan</button>
            </form>

            <div class="mt-4 flex gap-3">
                <a href="{{ route('jobs.index') }}" class="border border-gray-200 text-sm font-medium px-4 py-2 rounded-lg hover:border-primary">Lihat Lowongan</a>
                <a href="{{ route('membership.show') }}" class="border border-gray-200 text-sm font-medium px-4 py-2 rounded-lg hover:border-primary">Gabung Premium</a>
            </div>
        </div>
        <div class="hidden md:flex justify-center">
            <div class="w-72 h-72 rounded-full bg-primary-light flex items-center justify-center text-8xl">🩺</div>
        </div>
    </div>

    <div class="grid grid-cols-3 md:grid-cols-5 gap-4 mt-10">
        @foreach($professions as $label => $slug)
            <a href="{{ route('jobs.index', ['profession' => $label]) }}"
               class="bg-white border border-gray-100 rounded-xl p-4 text-center hover:border-primary hover:shadow-sm transition">
                <div class="text-2xl mb-2">⚕️</div>
                <div class="text-xs font-medium text-gray-700">{{ $label }}</div>
            </a>
        @endforeach
    </div>
</section>

<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-16">
    <div class="flex items-center justify-between mb-6">
        <h2 class="text-xl font-bold">Lowongan Terbaru</h2>
        <a href="{{ route('jobs.index') }}" class="text-primary text-sm font-medium hover:underline">Lihat Semua</a>
    </div>
    <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-5">
        @foreach($latestJobs as $job)
            <div class="bg-white border border-gray-100 rounded-xl p-5 flex flex-col">
                <span class="text-xs font-semibold text-primary bg-primary-light w-fit px-2 py-0.5 rounded mb-3">Baru</span>
                <h3 class="font-semibold text-gray-900">{{ $job->title }}</h3>
                <p class="text-sm text-gray-500 mt-1">{{ $job->hospital->name }}</p>
                <p class="text-xs text-gray-400 mt-1">📍 {{ $job->location_city }}</p>
                <p class="text-xs text-gray-400 mt-1">{{ $job->job_type }} · {{ $job->education_requirement }}</p>
                <a href="{{ route('jobs.show', $job) }}" class="mt-4 border border-primary text-primary text-sm font-semibold text-center py-2 rounded-lg hover:bg-primary hover:text-white transition">Lihat Detail</a>
            </div>
        @endforeach
    </div>
</section>

<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-16">
    <div class="flex items-center justify-between mb-6">
        <h2 class="text-xl font-bold">Rumah Sakit Unggulan</h2>
        <a href="{{ route('hospitals.index') }}" class="text-primary text-sm font-medium hover:underline">Lihat Semua</a>
    </div>
    <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-5">
        @foreach($featuredHospitals as $hospital)
            <a href="{{ route('hospitals.show', $hospital) }}" class="bg-white border border-gray-100 rounded-xl p-5 text-center hover:shadow-sm transition">
                <div class="w-12 h-12 mx-auto rounded-lg bg-primary-light flex items-center justify-center text-xl mb-3">🏥</div>
                <h3 class="font-semibold text-sm">{{ $hospital->name }}</h3>
                <p class="text-xs text-gray-400 mt-1">📍 {{ $hospital->location_city }}</p>
                <p class="text-xs text-primary font-medium mt-2">{{ $hospital->active_jobs_count }} Lowongan</p>
            </a>
        @endforeach
    </div>
</section>

<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-16">
    <div class="flex items-center justify-between mb-6">
        <h2 class="text-xl font-bold">Artikel Karier</h2>
        <a href="{{ route('articles.index') }}" class="text-primary text-sm font-medium hover:underline">Lihat Semua</a>
    </div>
    <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-5">
        @foreach($latestArticles as $article)
            <a href="{{ route('articles.show', $article) }}" class="bg-white border border-gray-100 rounded-xl overflow-hidden hover:shadow-sm transition">
                <div class="h-32 bg-primary-light flex items-center justify-center text-3xl">📰</div>
                <div class="p-4">
                    <span class="text-xs font-medium text-primary">{{ $article->category }}</span>
                    <h3 class="font-semibold text-sm mt-1">{{ $article->title }}</h3>
                    <p class="text-xs text-gray-400 mt-2">{{ $article->read_minutes }} menit baca</p>
                </div>
            </a>
        @endforeach
    </div>

    <div class="mt-8 bg-primary rounded-2xl p-8 text-white flex flex-col md:flex-row items-center justify-between gap-4">
        <div>
            <h3 class="text-lg font-bold">Upgrade Premium untuk akses template CV, surat lamaran, dan bank soal</h3>
        </div>
        <a href="{{ route('membership.show') }}" class="bg-white text-primary font-semibold px-5 py-2.5 rounded-lg whitespace-nowrap">Lihat Premium</a>
    </div>
</section>
@endsection