{{-- Dangerous Objects Management — Actions section --}}
@php
$data = __('solutions.dangerous_objects.actions');
$icons = ['scan', 'alert-circle', 'wrench', 'chart-line'];
$images = [
'images/solutions/dangerous_objects_management/real-time-detection.webp',
'images/solutions/dangerous_objects_management/real-time-alert.webp',
'images/by_pass.webp',
'images/solutions/dangerous_objects_management/alert-dashboard.webp',
];
@endphp

<section class="w-full p-4 flex flex-col justify-center gap-8 max-w-7xl mx-auto mt-40">
    <x-atoms.title
        :title="$data['title']"
        :subtitle="[$data['description']]"
        align="center"
        class="mb-8 w-full max-w-2xl mx-auto" />

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6" data-display-wrapped>
        @foreach($data['steps'] as $index => $step)
        <x-molecules.icon-card
            :icon="$icons[$index]"
            :title="$step['title']"
            :description="$step['description']"
            :showIcon="true"
            :transparent="true"
            :index="$index"
            class="bg-glassmorphism">
            <div class="mt-4 rounded-lg overflow-hidden aspect-video">
                <img
                    src="{{ asset($images[$index]) }}"
                    alt="{{ $step['image_alt'] }}"
                    class="w-full h-auto object-cover object-center"
                    loading="lazy">
            </div>
        </x-molecules.icon-card>
        @endforeach
    </div>
</section>