@extends('layouts.app')

@php
use App\Enums\VacancyStatus;
$vacancies = \App\Models\Vacancy::where('status', VacancyStatus::Published)->orderBy('created_at', 'desc')->paginate(20);
@endphp

@section('title', 'Carreiras — Mangolê')
@section('description', 'Faça parte da equipa Mangolê. Explore vagas de emprego e oportunidades de carreira na maior rede de supermercados de Angola.')

@section('content')
<section class="bg-gradient-to-br from-brand via-brand-800 to-brand-900 text-white">
    <x-container class="py-20 lg:py-28">
        <div class="max-w-2xl">
            <h1 class="mt-2 text-4xl font-bold tracking-tight sm:text-5xl">Faça parte da nossa equipa</h1>
            <p class="mt-3 text-lg text-brand-100">Venha trabalhar connosco e ajude-nos a levar o melhor a cada família angolana.</p>
        </div>
    </x-container>
</section>

<section class="bg-white py-16 lg:py-24">
    <x-container>
        @if ($vacancies->isNotEmpty())
        <div class="space-y-4">
            @foreach ($vacancies as $vacancy)
            <div class="group rounded-2xl bg-white p-6 lg:p-8 shadow-sm ring-1 ring-gray-100 hover:shadow-md hover:ring-brand/20 transition-all duration-200">
                <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                    <div class="flex-1">
                        <div class="flex items-center gap-2 flex-wrap">
                            <h2 class="text-lg font-semibold text-gray-900">{{ $vacancy->title }}</h2>
                            @if ($vacancy->remote)
                            <span class="rounded-full bg-green-50 px-2.5 py-0.5 text-xs font-medium text-green-700">Remoto</span>
                            @endif
                        </div>
                        <div class="mt-2 flex flex-wrap items-center gap-3 text-sm text-gray-500">
                            @if ($vacancy->area)
                            <span>{{ $vacancy->area }}</span>
                            <span class="text-gray-300">·</span>
                            @endif
                            <span>{{ $vacancy->location }}</span>
                            @if ($vacancy->type)
                            <span class="text-gray-300">·</span>
                            <span class="rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600">{{ $vacancy->type->value }}</span>
                            @endif
                            @if ($vacancy->deadline)
                            <span class="text-gray-300">·</span>
                            <span>Candidaturas até {{ $vacancy->deadline->format('d/m/Y') }}</span>
                            @endif
                        </div>
                    </div>
                    <div class="shrink-0">
                        @if ($vacancy->href)
                        <a href="{{ $vacancy->href }}" target="_blank" rel="noopener" class="inline-flex items-center gap-2 rounded-xl bg-brand px-5 py-2.5 text-sm font-semibold text-white hover:bg-brand-700 transition duration-200">
                            Candidatar-se
                            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"/></svg>
                        </a>
                        @endif
                    </div>
                </div>
                @if ($vacancy->description)
                <div class="mt-4 text-sm text-gray-500 leading-relaxed line-clamp-2">
                    {{ strip_tags($vacancy->description) }}
                </div>
                @endif
            </div>
            @endforeach
        </div>
        <div class="mt-12">
            {{ $vacancies->links() }}
        </div>
        @else
        <div class="text-center py-20">
            <p class="text-gray-400 text-lg">Nenhuma vaga disponível de momento.</p>
        </div>
        @endif
    </x-container>
</section>
@endsection
