{{-- Homepage Values Section (OurValues) — 5-column image grid --}}
@php
$values = __('home.values_section.values');

// Image file mappings (matching React source paths)
$valueImages = [
'images/our_team.webp',
'images/strong_relation.webp',
'images/values/hub_and_go.webp',
'images/innovation.webp',
'images/team_eco.png',
];
@endphp

<section class="w-full px-4 mb-10 z-10">
    <div class="w-full h-full px-4 py-20 bg-background rounded-lg">
        <div class="w-full max-w-7xl mx-auto">
            <x-atoms.title
                :subject="__('home.values_section.subject')"
                :title="__('home.values_section.title')"
                align="left" />
            <ul class="grid grid-cols-1 md:grid-cols-5 gap-4">
                @foreach($values as $index => $value)
                <li class="w-full h-full" data-display-wrapped>
                    <x-molecules.image-block
                        :image="$valueImages[$index] ?? ''"
                        :title="$value['title']"
                        :description="$value['description']"
                        :alt="$value['image_alt']"
                        class="mb-6 h-full" />
                </li>
                @endforeach
            </ul>
            <x-atoms.button-link
                href="{{ localized_route('about.team') }}"
                class="mt-10">
                {{ __('home.values_section.cta') }}
            </x-atoms.button-link>
        </div>
    </div>
</section>