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

<section id="zone" class="relative overflow-hidden py-12 md:py-20">
    <div aria-hidden="true" class="pointer-events-none absolute inset-0 overflow-hidden noise">
        <div class="absolute -top-40 -left-40 h-[520px] w-[520px] rounded-full blur-3xl floaty-slow" style="background: radial-gradient(circle, oklch(0.72 0.13 78 / 0.14), transparent 60%);"></div>
        <div class="absolute top-1/3 -right-40 h-[600px] w-[600px] rounded-full blur-3xl floaty" style="background: radial-gradient(circle, oklch(0.45 0.12 220 / 0.18), transparent 60%);"></div>
        <div class="absolute bottom-0 left-1/3 h-[480px] w-[480px] rounded-full blur-3xl floaty-slow" style="background: radial-gradient(circle, oklch(0.55 0.14 60 / 0.11), transparent 60%);"></div>
        <div class="absolute inset-0 opacity-[0.06]" style="background-image: linear-gradient(oklch(0.72 0.13 78 / 0.5) 1px, transparent 1px), linear-gradient(90deg, oklch(0.72 0.13 78 / 0.5) 1px, transparent 1px); background-size: 80px 80px; mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);"></div>
    </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('zone_eyebrow') }}</div>
            <h2 class="reveal display-title mt-4" data-delay="0.1">{!! $reglage->tradEm('zone_title') !!}</h2>
            <p class="reveal mt-6 text-cream/70" data-delay="0.2">{{ $reglage->trad('zone_intro') }}</p>
        </div>

        <div class="stagger-group mt-16 grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3">
            @foreach ($territoires as $territoire)
                <article class="stagger-item tilt-card gold-border {{ $territoire->terr_hub ? 'glass-strong' : 'glass' }} group relative overflow-hidden rounded-2xl p-7">
                    <div aria-hidden="true" class="pointer-events-none absolute -inset-px opacity-0 transition-opacity duration-500 group-hover:opacity-100" style="background: radial-gradient(400px circle at var(--x, 50%) var(--y, 50%), oklch(0.72 0.13 78 / 0.15), transparent 40%);"></div>
                    <div class="flex items-start justify-between">
                        <div class="flex items-start gap-3">
                            <div class="w-8 h-6 shrink-0 mt-1">
                                <x-territoire-flag :slug="$territoire->terr_slug" />
                            </div>
                            <div>
                                <div class="font-serif text-2xl text-cream leading-tight">{{ $territoire->trad('nom') }}</div>
                                <div class="mt-1 text-[11px] uppercase tracking-[0.18em] text-gold">{{ $territoire->trad('tag') }}</div>
                            </div>
                        </div>
                        @if ($territoire->trad('badge'))
                            <span class="rounded-full border border-gold/40 bg-gold/10 px-2 py-1 text-[9px] uppercase tracking-widest text-gold/100">{{ $territoire->trad('badge') }}</span>
                        @endif
                    </div>
                    <p class="mt-5 text-sm leading-relaxed text-cream/70">{{ $territoire->trad('desc') }}</p>
                    <div class="mt-6 h-px w-12 bg-gradient-to-r from-gold to-transparent transition-all duration-500 group-hover:w-full"></div>
                </article>
            @endforeach
        </div>
    </div>
</section>