{{-- About Team — Team Members Grid Section --}}
@php
$members = __('about.team.the_team.members');
@endphp

<x-atoms.section-wrapper>
    <x-atoms.title
        :subject="__('about.team.the_team.subject')"
        :title="__('about.team.the_team.title')"
        align="center"
        class="mb-12" />

    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-8 md:gap-10">
        @foreach($members as $member)
        <div class="flex flex-col items-center text-center gap-3" data-appear-from-bottom>
            {{-- Avatar placeholder (team photos not yet available) --}}
            <div class="w-24 h-24 rounded-full bg-glassmorphism border border-muted flex items-center justify-center overflow-hidden">
                <span class="text-2xl font-medium text-primary" aria-hidden="true">
                    {{ collect(explode(' ', $member['name']))->map(fn($n) => mb_substr($n, 0, 1))->take(2)->join('') }}
                </span>
            </div>

            <div>
                <h3 class="text-base font-semibold text-foreground">
                    {{ $member['name'] }}
                </h3>
                <p class="text-sm text-muted-foreground mt-1">
                    {{ $member['role'] }}
                </p>
            </div>

            @if(!empty($member['linkedin']))
            <a href="{{ $member['linkedin'] }}"
                target="_blank"
                rel="noopener noreferrer"
                class="text-primary hover:text-primary/80 transition-colors"
                aria-label="LinkedIn {{ $member['name'] }}">
                <x-atoms.linkedin-icon class="w-5 h-5 !h-5 fill-current" />
            </a>
            @endif
        </div>
        @endforeach
    </div>
</x-atoms.section-wrapper>