<section data-animate id="clients" class="relative overflow-hidden bg-secondary py-24 lg:py-32">
    <div aria-hidden="true" class="pointer-events-none absolute -left-24 top-0 h-full w-72 -skew-x-[20deg] bg-primary/[0.06]"></div>
    <div aria-hidden="true" class="pointer-events-none absolute -right-32 top-0 h-full w-96 -skew-x-[20deg] bg-primary/[0.05]"></div>

    <div class="relative mx-auto max-w-7xl px-6">
        <div class="mx-auto max-w-3xl text-center">
            <p class="ani-down mb-3 font-display text-[11px] font-bold uppercase tracking-[0.2em] text-primary" style="animation-delay: 0.1s">Trusted By</p>
            <h2 class="font-display text-[34px] leading-[1.15] text-primary-foreground sm:text-[44px] lg:text-[50px]">
                @foreach (explode(' ', 'Our International Clients') as $wi => $word)
                    <span class="mr-2.5 inline-flex overflow-hidden">
                        <span class="word-up" style="animation-delay: {{ 0.2 + $wi * 0.06 }}s">{{ $word }}</span>
                    </span>
                @endforeach
            </h2>
            <p class="ani-up mx-auto mt-5 max-w-xl text-sm leading-relaxed text-white/55" style="animation-delay: 0.4s">
                World-class energy and industry leaders trust HSE Horizon to deliver rigorous safety management, compliance, and HSE excellence across their global operations.
            </p>
        </div>

        <div class="ani-up mx-auto mt-14 grid max-w-5xl border-l border-t border-primary-foreground/10 sm:grid-cols-3 lg:grid-cols-5" style="animation-delay: 0.5s">
            @foreach (['Saudi Aramco', 'EXM Tech Olet', 'CNPC', 'BP Energy', 'TotalEnergies'] as $name)
                <div class="group flex items-center justify-center border-b border-r border-primary-foreground/10 px-6 py-10 transition-colors duration-300 hover:bg-primary/10">
                    <span class="font-display text-sm font-bold uppercase tracking-[0.12em] text-primary-foreground/60 transition-all duration-500 group-hover:scale-105 group-hover:text-primary-foreground">{{ $name }}</span>
                    <span class="sr-only">{{ $name }}</span>
                </div>
            @endforeach
        </div>
    </div>
</section>
