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

@section('content')

<section class="bg-navy py-16">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <span class="w-16 h-16 mx-auto rounded-2xl bg-white/10 flex items-center justify-center text-gold mb-5">
            <x-icon name="{{ $service->icon ?: 'target' }}" class="w-8 h-8" />
        </span>
        <h1 class="font-display font-extrabold text-3xl sm:text-4xl text-white">{{ $service->title }}</h1>
        @if($service->excerpt)
            <p class="text-white/70 mt-4 max-w-2xl mx-auto">{{ $service->excerpt }}</p>
        @endif
    </div>
</section>

<section class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
    @if($service->cover_image)
        <img src="{{ Storage::url($service->cover_image) }}" alt="{{ $service->title }}" class="w-full h-72 object-cover rounded-2xl mb-10">
    @endif

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

    <div class="mt-12 bg-gray-50 rounded-2xl p-8 text-center">
        <h3 class="font-display font-bold text-xl text-navy-dark mb-3">Intéressé par ce service ?</h3>
        <a href="{{ route('contact.index') }}" class="inline-flex items-center gap-2 btn-gold text-navy-dark font-display font-extrabold px-6 py-3 rounded-full shadow-md hover:brightness-105 transition-all">
            Demander un devis <x-icon name="arrow-right" class="w-4 h-4" />
        </a>
    </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 services</h2>
        <div class="grid sm:grid-cols-3 gap-6">
            @foreach($others as $other)
                <a href="{{ route('services.show', $other) }}" class="bg-white border border-gray-100 rounded-2xl p-6 hover:shadow-lg transition-all">
                    <span class="w-10 h-10 rounded-xl bg-navy/5 flex items-center justify-center text-navy mb-3">
                        <x-icon name="{{ $other->icon ?: 'target' }}" class="w-5 h-5" />
                    </span>
                    <h3 class="font-display font-bold text-navy-dark">{{ $other->title }}</h3>
                </a>
            @endforeach
        </div>
    </div>
</section>
@endif

@endsection