{{-- Dangerous Objects Management — Typology section --}}
@php
$typology = __('solutions.dangerous_objects.typology');
$images = [
'images/solutions/dangerous_objects_management/n2o-bulk.webp',
'images/solutions/dangerous_objects_management/gas-bottle-bulk.webp',
'images/solutions/dangerous_objects_management/battery-bulk.jpg',
];
@endphp

<section class="w-full px-4 bg-background mb-40">
    <div class="w-full p-4 flex flex-col lg:flex-row gap-8 lg:gap-32 max-w-7xl mx-auto">
        {{-- Left column — Sticky title --}}
        <div class="w-full lg:w-1/3 lg:sticky lg:top-10 h-fit pt-20">
            <x-atoms.title
                :title="$typology['title']"
                :subtitle="$typology['descriptions']"
                align="left"
                class="mb-8" />
            <x-atoms.button-link
                :href="localized_route('approach')"
                class="mt-8 lg:mt-40">
                {{ $typology['cta'] }}
            </x-atoms.button-link>
        </div>

        {{-- Right column — Image grid --}}
        <div class="w-full lg:w-2/3 pt-20">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6" data-display-wrapped>
                @foreach($typology['items'] as $index => $item)
                <x-molecules.image-block
                    :image="$images[$index]"
                    :title="$item['label']"
                    :alt="$item['image_alt']"
                    class="mb-10" />
                @endforeach
            </div>
        </div>
    </div>
</section>