{{-- Homepage Approach Section (Home3Blocs) — 4-column icon card grid + presentation video --}}
@php
use App\Helpers\PresentationVideo;

$cards = [
['icon' => 'pie-chart', 'title' => __('home.approach_section.card_1.title'), 'items' => __('home.approach_section.card_1.items')],
['icon' => 'camera', 'title' => __('home.approach_section.card_2.title'), 'items' => __('home.approach_section.card_2.items')],
['icon' => 'shield', 'title' => __('home.approach_section.card_3.title'), 'items' => __('home.approach_section.card_3.items')],
['icon' => 'flame', 'title' => __('home.approach_section.card_4.title'), 'items' => __('home.approach_section.card_4.items')],
];

$video = PresentationVideo::assets();
@endphp

<section
    class="w-full px-8 pt-10 xl:pt-40 xl:pb-30 md:px-8 xl:px-20 bg-background"
    aria-labelledby="features-heading">
    <h2 id="features-heading" class="sr-only">
        {{ __('home.approach_section.sr_title') }}
    </h2>

    <div class="flex-col sm:flex-row flex flex-wrap justify-between px-4 mb-8 max-w-7xl mx-auto gap-0">
        @foreach($cards as $index => $card)
        <div class="w-full md:w-[50%] lg:w-[calc(25%-10px)] flex justify-center" data-display-wrapped>
            <x-molecules.icon-card
                :icon="$card['icon']"
                :title="$card['title']"
                :description="$card['items']"
                :transparent="true"
                :showIcon="true"
                class="bg-glassmorphism rounded-lg border-0 shadow-none px-0 w-full max-w-78 mb-8" />
        </div>
        @endforeach
    </div>

    {{-- Presentation video — adaptive-bitrate HLS, starts muted once on screen.
         The narration is lost while muted, but the video carries burnt-in
         subtitles, so the message still reads. One click on the native volume
         control brings the sound back. --}}
    {{--
         <div class="w-full max-w-7xl mx-auto px-4 mb-8">
        <h3 class="sr-only">{{ __('home.approach_section.video.heading') }}</h3>

    <x-molecules.video-player
        :hls="$video['hls']"
        :sources="$video['sources']"
        :poster="$video['poster']"
        :label="__('home.approach_section.video.alt')"
        :autoplayInView="true"
        data-appear-from-bottom />
    </div>
    --}}

    <div class="w-full mx-auto max-w-7xl mt-20 text-center">
        <x-atoms.button-link href="{{ localized_route('approach') }}">
            {{ __('home.approach_section.cta') }}
        </x-atoms.button-link>
    </div>
</section>