<section data-animate id="locations" class="bg-background py-24 lg:py-32">
    <div class="mx-auto max-w-7xl px-6">
        <div class="ani-down mb-12 text-center" style="animation-delay: 0.1s">
            <p class="mb-5 flex items-center justify-center gap-3 font-display text-sm font-semibold uppercase tracking-[0.15em] text-primary">
                <span class="h-0.5 w-8 bg-primary"></span>
                <span class="size-2 rounded-full border border-primary"></span>
                Where We Work
                <span class="size-2 rounded-full border border-primary"></span>
                <span class="h-0.5 w-8 bg-primary"></span>
            </p>
            <h2 class="font-display text-[36px] font-bold text-secondary sm:text-[44px] lg:text-[52px]">Our Service Locations</h2>
            <p class="mx-auto mt-5 max-w-xl text-sm leading-relaxed text-muted-foreground">
                HSE Horizon delivers expert safety, compliance, and HSE management services across the Middle East, Europe, and North America.
            </p>
        </div>

        <div class="ani-up mb-14 flex flex-wrap justify-center gap-x-16 gap-y-6 border-y border-border py-8" style="animation-delay: 0.3s">
            @foreach ([['6', 'Cities'], ['4', 'Countries'], ['3', 'Regions']] as [$value, $label])
                <div class="flex flex-col items-center gap-1">
                    <span class="font-display text-[42px] font-bold leading-none text-secondary">{{ $value }}</span>
                    <span class="text-[11px] uppercase tracking-[0.14em] text-muted-foreground">{{ $label }}</span>
                </div>
            @endforeach
        </div>

        <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
            @foreach (config('site.locations') as $i => $loc)
                <div class="group relative overflow-hidden border border-border bg-background p-6 transition-shadow duration-300 hover:shadow-md ani-up" style="animation-delay: {{ 0.4 + $i * 0.08 }}s">
                    <div class="absolute inset-x-0 top-0 h-[3px] origin-left scale-x-0 bg-primary transition-transform duration-300 group-hover:scale-x-100"></div>
                    <div class="mb-5 flex items-center gap-2.5">
                        <div class="flex size-8 items-center justify-center bg-primary/10">
                            @include('partials.icon', ['name' => 'map-pin', 'class' => 'size-4 text-primary'])
                        </div>
                        <span class="font-display text-[10px] font-bold uppercase tracking-[0.16em] text-primary">{{ $loc['region'] }}</span>
                    </div>
                    <h3 class="font-display text-[20px] font-bold leading-tight text-secondary transition-colors duration-300 group-hover:text-primary">{{ $loc['city'] }}</h3>
                    <p class="mt-1 font-display text-sm font-semibold uppercase tracking-wide text-muted-foreground">{{ $loc['country'] }}</p>
                    <div class="my-4 h-px bg-border"></div>
                    <p class="text-xs leading-relaxed text-muted-foreground">{{ $loc['address'] }}</p>
                </div>
            @endforeach
        </div>
    </div>
</section>
