@props(['phases', 'reglage'])

<section id="services" class="relative overflow-hidden py-12 md:py-20">
    <div aria-hidden="true" class="pointer-events-none absolute inset-0 opacity-40" style="background: radial-gradient(ellipse at top, oklch(0.32 0.06 235 / 0.6), transparent 70%);"></div>
    <div class="relative mx-auto max-w-7xl px-6">
        <div class="mx-auto max-w-3xl text-center">
            <div class="reveal section-eyebrow justify-center">{{ $reglage->trad('svc_eyebrow') }}</div>
            <h2 class="reveal display-title mt-4" data-delay="0.1">{!! $reglage->tradEm('svc_title') !!}</h2>
            <p class="reveal mt-6 text-cream/70" data-delay="0.2">{{ $reglage->trad('svc_intro') }}</p>
        </div>

        <div class="mt-20 space-y-20">
            @foreach ($phases as $phase)
                <div>
                    <div class="reveal flex items-center gap-4">
                        <div class="h-px flex-1 bg-gradient-to-r from-transparent to-gold/40"></div>
                        <span class="font-serif text-base italic text-gold/90 md:text-lg lg:text-xl"><span class="mr-3 text-cream/40">{{ $phase->svph_numero }}</span>{{ $phase->trad('label') }}</span>
                        <div class="h-px flex-1 bg-gradient-to-l from-transparent to-gold/40"></div>
                    </div>
                    <div class="stagger-group mt-10 grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3">
                        @foreach ($phase->services as $service)
                            <article class="stagger-item tilt-card glass gold-border group relative overflow-hidden rounded-2xl p-7">
                                <div class="flex items-start justify-between">
                                    <div class="grid h-12 w-12 place-items-center rounded-xl border border-gold/30 text-gold transition-all duration-500 group-hover:border-gold/70 group-hover:bg-gold/10 group-hover:scale-110">
                                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><x-service-icon :icon="$service->svc_icone" /></svg>
                                    </div>
                                    <div class="font-serif text-3xl italic text-cream/20 transition-colors duration-500 group-hover:text-gold/60">{{ $service->svc_numero }}</div>
                                </div>
                                <h3 class="mt-6 font-serif text-xl leading-tight text-cream">
                                    {{ $service->trad('title') }}
                                    @if ($service->svc_exclusif)
                                        <span class="ml-2 rounded-full border border-gold/40 bg-gold/10 px-2 py-0.5 align-middle text-[9px] uppercase tracking-widest text-gold">{{ lpick('EXCLUSIF', 'EXCLUSIVE', 'EXKLUSIV') }}</span>
                                    @endif
                                </h3>
                                <p class="mt-3 text-sm leading-relaxed text-cream/70">{{ $service->trad('desc') }}</p>
                                <div aria-hidden="true" class="pointer-events-none absolute -right-16 -top-16 h-32 w-32 rotate-45 bg-gradient-to-b from-gold/20 to-transparent opacity-0 blur-2xl transition-opacity duration-700 group-hover:opacity-100"></div>
                            </article>
                        @endforeach
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>