{{-- Homepage Solutions Section (StickyScrollSolutions) — Left sticky title + right 2×2 grid --}}
@php
$solutionCards = __('home.solutions_section.cards');

// Image/video file mappings (matching React source paths)
$solutionMedia = [
[
'image' => 'images/solutions/detections.webp',
'video' => 'videos/solutions/detections_analyse.mp4',
'width' => 926,
'height' => 686,
],
[
'image' => 'images/optimisation_dark.webp',
'video' => null,
'width' => 404,
'height' => 397,
],
[
'image' => 'images/by_pass.webp',
'video' => 'videos/by_pass.mp4',
'width' => 585,
'height' => 567,
],
[
'image' => 'images/incendie.webp',
'video' => 'videos/incendie.mp4',
'width' => 750,
'height' => 562,
],
];
@endphp

<section class="w-full px-4 bg-background mb-40" data-sticky-scroll>
    <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
                :subject="__('home.solutions_section.subject')"
                :title="__('home.solutions_section.title')"
                :subtitle="__('home.solutions_section.subtitle')"
                align="left"
                class="mb-8" />
            <x-atoms.button-link
                href="{{ localized_route('solutions.performance-optimization') }}"
                class="mt-8 lg:mt-40 hidden lg:inline-flex">
                {{ __('home.solutions_section.cta') }}
            </x-atoms.button-link>
        </div>

        {{-- Right column — 2×2 solution cards grid --}}
        <div class="w-full lg:w-2/3 pt-20">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                @foreach($solutionCards as $index => $card)
                <div data-display-wrapped>
                    <x-molecules.image-block
                        :image="$solutionMedia[$index]['image'] ?? ''"
                        :title="$card['title']"
                        :description="$card['description']"
                        :alt="$card['image_alt']"
                        :width="$solutionMedia[$index]['width'] ?? null"
                        :height="$solutionMedia[$index]['height'] ?? null"
                        class="mb-10 h-full" />
                </div>
                @endforeach
            </div>
        </div>
    </div>

    {{-- Mobile CTA (visible only on mobile, hidden on lg+) --}}
    <div class="max-w-7xl mx-auto px-4 lg:hidden">
        <x-atoms.button-link
            href="{{ localized_route('solutions.performance-optimization') }}"
            class="mt-8">
            {{ __('home.solutions_section.cta') }}
        </x-atoms.button-link>
    </div>
</section>