@extends('layouts.public')

@section('content')
    <div class="border-b border-amare-border bg-amare-bg" data-motion="page-open">
        <div class="container-amare space-y-10 py-16 md:py-24">
            <div class="max-w-2xl space-y-4" data-motion-beat="heading">
                <p class="text-xs font-semibold uppercase tracking-[0.14em] text-amare-accent">Serviços</p>
                <h1 class="text-headline font-medium tracking-tight text-amare-text">Uma mesma excelência, diferentes ocasiões.</h1>
                <p class="text-lg text-amare-muted">O escopo é construído de acordo com o momento do projeto, o nível de apoio necessário e a complexidade de cada evento.</p>
            </div>

            @if ($services->isEmpty())
                <p class="text-amare-muted">O catálogo de serviços está em organização. Enquanto isso, fale conosco para uma primeira conversa.</p>
            @else
                <div class="divide-y divide-amare-border border-y border-amare-border" data-reveal-group>
                    @foreach ($services as $index => $service)
                        <article class="grid gap-4 py-8 md:grid-cols-[5rem_minmax(0,1fr)_minmax(0,1.2fr)] md:items-start" data-reveal data-reveal-from="up">
                            <span class="text-sm font-semibold uppercase tracking-[0.14em] text-amare-accent">{{ str_pad((string) ($index + 1), 2, '0', STR_PAD_LEFT) }}</span>
                            <div class="space-y-3">
                                <h2 class="text-2xl font-medium text-amare-text md:text-3xl">{{ $service->title }}</h2>
                                <p class="text-amare-muted">{{ $service->summary }}</p>
                            </div>
                            <div class="space-y-4">
                                @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, 40vw"
                                        class="img-editorial aspect-[16/10] w-full object-cover"
                                    />
                                @endif
                                @if (filled($service->description))
                                    <div class="text-amare-muted">
                                        {!! nl2br(e($service->description)) !!}
                                    </div>
                                @endif
                            </div>
                        </article>
                    @endforeach
                </div>
            @endif
        </div>
    </div>

    <x-home.final-cta :settings="$siteSettings" />
@endsection