@extends('layouts.app')
@section('titre', $realisation->titre)
@section('description', Str::limit(strip_tags($realisation->description), 155))

@section('contenu')

<section class="bg-bleu-fonce py-16">
    <div class="max-w-4xl mx-auto px-6 md:px-8">
        <a href="{{ route('realisations') }}" class="text-vert text-sm font-bold">← Toutes les réalisations</a>
        <div class="text-vert text-sm font-bold uppercase tracking-wide mt-4 mb-3">{{ $realisation->categorie }}</div>
        <h1 class="text-white text-3xl md:text-4xl font-bold">{{ $realisation->titre }}</h1>
    </div>
</section>

<section class="py-16">
    <div class="max-w-4xl mx-auto px-6 md:px-8">

        @if ($realisation->image)
        <img src="{{ asset('storage/' . $realisation->image) }}" alt="{{ $realisation->titre }}" loading="lazy" class="w-full mb-10 border border-gray-200">
        @endif

        <div class="grid md:grid-cols-3 gap-6 mb-10 text-sm">
            @if ($realisation->maitre_ouvrage)
            <div class="bg-[#EDEBE5] p-4">
                <div class="text-xs font-bold uppercase text-bleu-fonce mb-1">Maître d'ouvrage</div>
                {{ $realisation->maitre_ouvrage }}
            </div>
            @endif
            @if ($realisation->localisation)
            <div class="bg-[#EDEBE5] p-4">
                <div class="text-xs font-bold uppercase text-bleu-fonce mb-1">Localisation</div>
                {{ $realisation->localisation }}
            </div>
            @endif
            @if ($realisation->annee)
            <div class="bg-[#EDEBE5] p-4">
                <div class="text-xs font-bold uppercase text-bleu-fonce mb-1">Année</div>
                {{ $realisation->annee }}
            </div>
            @endif
        </div>

        @if ($realisation->description)
        <div class="prose max-w-none text-gray-600 leading-relaxed">
            {{ $realisation->description }}
        </div>
        @endif

        <a href="{{ route('contact') }}" class="inline-block mt-10 bg-rouge hover:bg-rouge-fonce text-white font-bold px-8 py-4 rounded">
            Un projet similaire ? Contactez-nous →
        </a>
    </div>
</section>

@endsection