{{-- Team Section --}}
@php
$members = __('approach.team.members');
$icons = ['settings', 'bar-chart-3', 'users', 'wrench'];
@endphp

<div class="w-full px-4">
    <div class="w-full bg-background py-20 px-4">
        <div class="max-w-7xl mx-auto">
            <x-atoms.title
                :title="__('approach.team.title')"
                :subtitle="[__('approach.team.subtitle')]"
                align="center"
                class="mb-16 max-w-[800px] mx-auto" />

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6" data-display-wrapped>
                @foreach($members as $index => $member)
                <x-molecules.icon-card
                    :icon="$icons[$index]"
                    :title="$member['role']"
                    :description="$member['description']"
                    :transparent="true"
                    class="bg-glassmorphism"
                    data-display-wrapped />
                @endforeach
            </div>
        </div>
    </div>
</div>