<section data-animate id="industries" class="relative overflow-hidden bg-background py-24 lg:py-32">
    <div aria-hidden="true" class="pointer-events-none absolute -left-16 top-0 h-full w-56 -skew-x-[18deg] bg-secondary/[0.03]"></div>
    <div aria-hidden="true" class="pointer-events-none absolute -right-20 bottom-0 h-2/3 w-48 -skew-x-[18deg] bg-primary/[0.04]"></div>

    <div class="relative mx-auto max-w-7xl px-6">
        <div class="mb-14 flex flex-col items-start justify-between gap-8 lg:flex-row lg:items-end">
            <div class="max-w-2xl">
                <p class="ani-down mb-5 flex items-center gap-4 font-display text-sm font-semibold uppercase tracking-[0.15em] text-primary" style="animation-delay: 0.1s">
                    <span class="h-0.5 w-8 bg-primary"></span>
                    Industries Snapshot
                </p>
                <h2 class="font-display text-[32px] leading-[1.15] text-secondary sm:text-[42px] lg:text-[48px]">
                    @foreach (explode(' ', 'Built for High-Hazard, High-Stakes Environments') as $wi => $word)
                        <span class="mr-2.5 inline-flex overflow-hidden">
                            <span class="word-up" style="animation-delay: {{ 0.15 + $wi * 0.05 }}s">{{ $word }}</span>
                        </span>
                    @endforeach
                </h2>
            </div>
            <a href="#contact" class="btn-slide ani-up h-14 shrink-0 bg-secondary px-8 text-sm text-secondary-foreground hover:bg-primary hover:text-primary-foreground" style="animation-delay: 0.45s">
                <span class="btn-label">
                    <span class="text-one">Discuss Your Sector</span>
                    <span class="text-two">Discuss Your Sector</span>
                </span>
                @include('partials.arrow-icon')
            </a>
        </div>

        <div class="grid gap-0 sm:grid-cols-2 lg:grid-cols-5">
            @foreach (config('site.industries_snapshot') as $i => $industry)
                <article class="group relative flex flex-col gap-4 border border-border p-7 transition-all duration-300 hover:border-secondary hover:bg-secondary ani-up" style="animation-delay: {{ 0.3 + $i * 0.1 }}s">
                    <span aria-hidden="true" class="absolute right-5 top-4 font-display text-[52px] font-extrabold leading-none text-foreground/[0.04] transition-colors duration-300 group-hover:text-white/[0.06]">{{ $industry['no'] }}</span>
                    <div class="flex size-12 items-center justify-center bg-primary/10 text-primary transition-all duration-300 group-hover:bg-primary group-hover:text-primary-foreground">
                        @include('partials.icon', ['name' => $industry['icon'], 'class' => 'size-6'])
                    </div>
                    <div>
                        <h3 class="font-display text-[17px] font-bold leading-tight text-secondary transition-colors duration-300 group-hover:text-secondary-foreground">{{ $industry['title'] }}</h3>
                        <p class="mt-0.5 font-display text-[11px] font-semibold uppercase tracking-[0.14em] text-primary">{{ $industry['sub'] }}</p>
                    </div>
                    <p class="text-sm leading-relaxed text-muted-foreground transition-colors duration-300 group-hover:text-white/60">{{ $industry['desc'] }}</p>
                    <div class="mt-auto h-0.5 w-8 bg-primary/40 transition-all duration-500 group-hover:w-full group-hover:bg-primary/60"></div>
                </article>
            @endforeach
        </div>
    </div>
</section>
