@extends('layouts.app')
@section('titre', 'Nos réalisations')

@section('titre', 'Nos réalisations')
@section('description', "Routes, ponts, ouvrages hydrauliques : découvrez les projets d'infrastructure réalisés par HORSE au Bénin, de la conception à la livraison.")

@section('contenu')

<section class="bg-bleu-fonce py-20">
    <div class="max-w-6xl mx-auto px-6 md:px-8">
        <div class="text-vert text-sm font-bold uppercase tracking-wide mb-4">Nos chantiers</div>
        <h1 class="text-white text-4xl font-bold max-w-2xl">Réalisations récentes</h1>
                @include('composants.fil-ariane')

    </div>
</section>



<section class="py-20">
    <div class="max-w-6xl mx-auto px-6 md:px-8 grid md:grid-cols-2 lg:grid-cols-3 gap-6">
        @forelse ($realisations as $item)
        <a href="{{ route('realisations.show', $item) }}" class="bg-bleu-fonce h-64 relative overflow-hidden group block">
            @if ($item->image)
                <img src="{{ asset('storage/' . $item->image) }}" alt="{{ $item->titre }}" loading="lazy"
                
                     class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition duration-500">
            @endif
            <div class="absolute inset-0 bg-gradient-to-t from-bleu-fonce/95 via-bleu-fonce/20 to-transparent flex items-end p-5">
                <div class="text-white">
                    <span class="text-vert text-xs font-bold uppercase">{{ $item->categorie }}</span>
                    <div class="font-bold text-sm mt-1">{{ $item->titre }}</div>
                    @if ($item->localisation)
                        <div class="text-white/60 text-xs mt-1">{{ $item->localisation }} @if($item->annee) · {{ $item->annee }} @endif</div>
                    @endif
                </div>
            </div>
</a>
        @empty
        <p class="text-gray-400 col-span-full text-center">Aucune réalisation publiée pour le moment.</p>
        @endforelse
    </div>
</section>
@endsection