@extends('layouts.public')

@section('content')
    <div class="container-amare space-y-10">
        <div class="max-w-2xl space-y-3">
            <h1 class="text-4xl font-semibold text-amare-text">Serviços</h1>
            <p class="text-lg text-amare-text-muted">Assessoria completa para casamentos e eventos corporativos.</p>
        </div>

        @if ($services->isEmpty())
            <p class="text-amare-text-muted">Em breve publicaremos o catálogo de serviços.</p>
        @else
            <div class="grid gap-8 md:grid-cols-2">
                @foreach ($services as $service)
                    <article class="space-y-3 border-t border-amare-border pt-6">
                        @if (filled($service->cover_image_path))
                            <x-media.image
                                :path="$service->cover_image_path"
                                :alt="$service->cover_image_alt ?: $service->title"
                                sizes="(max-width: 768px) 100vw, 50vw"
                                class="aspect-[16/10] w-full object-cover"
                            />
                        @endif
                        <h2 class="text-2xl font-semibold text-amare-text">{{ $service->title }}</h2>
                        <p class="text-amare-text-muted">{{ $service->summary }}</p>
                        @if (filled($service->description))
                            <div class="prose prose-amare max-w-none text-amare-text-muted">
                                {!! nl2br(e($service->description)) !!}
                            </div>
                        @endif
                    </article>
                @endforeach
            </div>
        @endif
    </div>
@endsection