@extends('layouts.public')
@section('title', $item->title)

@section('content')

<section class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-14">
    <div class="mb-8">
        @if($item->category)
            <span class="text-xs font-bold text-gold uppercase tracking-wide">{{ $item->category }}</span>
        @endif
        <h1 class="font-display font-extrabold text-3xl sm:text-4xl text-navy-dark mt-2">{{ $item->title }}</h1>
        <div class="flex flex-wrap gap-x-6 gap-y-1 text-sm text-gray-500 mt-3">
            @if($item->client_name)
                <span>Client : <strong class="text-navy-dark">{{ $item->client_name }}</strong></span>
            @endif
            @if($item->realized_at)
                <span>{{ $item->realized_at->translatedFormat('F Y') }}</span>
            @endif
        </div>
    </div>

    @if($item->cover_image)
        <img src="{{ Storage::url($item->cover_image) }}" alt="{{ $item->title }}" class="w-full h-80 object-cover rounded-2xl mb-10">
    @endif

    <div class="prose prose-navy max-w-none text-gray-600 leading-relaxed">
        {!! nl2br(e($item->content)) !!}
    </div>
</section>

@if($others->isNotEmpty())
<section class="bg-gray-50 py-16">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 class="font-display font-bold text-2xl text-navy-dark mb-8">Autres réalisations</h2>
        <div class="grid sm:grid-cols-3 gap-6">
            @foreach($others as $other)
                <a href="{{ route('portfolio.show', $other) }}" class="block rounded-2xl overflow-hidden border border-gray-100 hover:shadow-lg transition-all">
                    <div class="h-36 bg-navy/5">
                        @if($other->cover_image)
                            <img src="{{ Storage::url($other->cover_image) }}" class="w-full h-full object-cover" alt="{{ $other->title }}">
                        @endif
                    </div>
                    <div class="p-4">
                        <h3 class="font-display font-bold text-navy-dark text-sm">{{ $other->title }}</h3>
                    </div>
                </a>
            @endforeach
        </div>
    </div>
</section>
@endif

@endsection