{{-- Homepage Approach Section (Home3Blocs) — 3-column icon card grid --}}
@php
$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')],
];
@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>

    <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>