@extends('layouts.app')

@php
use App\Enums\OpportunityStatus;
$opportunities = \App\Models\Opportunity::where('status', OpportunityStatus::Published)->orderBy('published_at', 'desc')->paginate(12);
@endphp

@section('title', 'Oportunidades — Mangolê')
@section('description', 'Explore oportunidades de negócio e parceria com a Mangolê. Seja franqueado, fornecedor ou parceiro da 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">Cresça connosco</h1>
            <p class="mt-3 text-lg text-brand-100">Explore oportunidades de negócio e parceria com a Mangolê.</p>
        </div>
    </x-container>
</section>

<section class="bg-white py-16 lg:py-24">
    <x-container>
        @if ($opportunities->isNotEmpty())
        <div class="grid gap-6 lg:grid-cols-2">
            @foreach ($opportunities as $opportunity)
            <article class="group rounded-2xl bg-white p-8 shadow-sm ring-1 ring-gray-100 hover:shadow-md hover:ring-brand/20 transition-all duration-200">
                @if ($opportunity->image)
                <div class="-mx-8 -mt-8 mb-6 overflow-hidden rounded-t-2xl">
                    <img src="{{ asset('storage/' . $opportunity->image) }}" alt="{{ $opportunity->title }}" loading="lazy" class="h-48 w-full object-cover">
                </div>
                @endif
                <h2 class="text-xl font-bold text-gray-900 group-hover:text-brand transition-colors duration-150">
                    <a href="{{ url('oportunidades/' . $opportunity->slug) }}" class="no-underline">{{ $opportunity->title }}</a>
                </h2>
                @if ($opportunity->excerpt)
                <p class="mt-3 text-sm text-gray-500 leading-relaxed line-clamp-3">{{ strip_tags($opportunity->excerpt) }}</p>
                @endif
                <div class="mt-4 flex items-center gap-3 text-xs text-gray-400">
                    @if ($opportunity->published_at)
                    <span>{{ $opportunity->published_at->format('d/m/Y') }}</span>
                    @endif
                </div>
                <div class="mt-6">
                    <a href="{{ url('oportunidades/' . $opportunity->slug) }}" class="inline-flex items-center gap-1.5 text-sm font-semibold text-brand hover:text-brand-700 transition duration-150">
                        Saber mais
                        <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>
                </div>
            </article>
            @endforeach
        </div>
        <div class="mt-12">
            {{ $opportunities->links() }}
        </div>
        @else
        <div class="text-center py-20">
            <p class="text-gray-400 text-lg">Nenhuma oportunidade disponível de momento.</p>
        </div>
        @endif
    </x-container>
</section>
@endsection
