Team

@props([
    'eyebrow' => 'Our team',
    'heading' => 'The people building it',
    'subheading' => 'Large portrait tiles for a visual, editorial team page — names and roles sit over each photo, with social links revealed on hover and keyboard focus.',
    'members' => null,
])

@php
    $members ??= [
        [
            'name' => 'Avery Mitchell',
            'role' => 'Co-founder & CEO',
            'initials' => 'AM',
            'links' => [
                'linkedin' => 'https://www.linkedin.com/',
                'x' => 'https://x.com/',
                'github' => 'https://github.com/',
            ],
        ],
        [
            'name' => 'Jordan Lee',
            'role' => 'Head of Engineering',
            'initials' => 'JL',
            'links' => [
                'linkedin' => 'https://www.linkedin.com/',
                'x' => 'https://x.com/',
                'github' => 'https://github.com/',
            ],
        ],
        [
            'name' => 'Priya Nair',
            'role' => 'Lead Designer',
            'initials' => 'PN',
            'links' => [
                'linkedin' => 'https://www.linkedin.com/',
                'x' => 'https://x.com/',
                'github' => 'https://github.com/',
            ],
        ],
        [
            'name' => 'Marcus Bell',
            'role' => 'Developer Advocate',
            'initials' => 'MB',
            'links' => [
                'linkedin' => 'https://www.linkedin.com/',
                'x' => 'https://x.com/',
                'github' => 'https://github.com/',
            ],
        ],
        [
            'name' => 'Sofia Romero',
            'role' => 'Product Manager',
            'initials' => 'SR',
            'links' => [
                'linkedin' => 'https://www.linkedin.com/',
                'x' => 'https://x.com/',
                'github' => 'https://github.com/',
            ],
        ],
        [
            'name' => 'Theo Almeida',
            'role' => 'Staff Engineer',
            'initials' => 'TA',
            'links' => [
                'linkedin' => 'https://www.linkedin.com/',
                'x' => 'https://x.com/',
                'github' => 'https://github.com/',
            ],
        ],
    ];

    // Per-person `links` (network => url) become one social-links row, labelled per person.
    $networkLabels = ['linkedin' => 'LinkedIn', 'x' => 'X', 'github' => 'GitHub'];
    $memberLinks = fn (array $member) => collect($member['links'])
        ->map(fn (string $url, string $network) => [
            'platform' => $network,
            'href' => $url,
            'label' => __(':name on :network', ['name' => $member['name'], 'network' => $networkLabels[$network] ?? ucfirst($network)]),
        ])
        ->values()
        ->all();
@endphp

<x-ui.section data-slot="team-05" space="xl" {{ $attributes }}>
    <x-ui.container gutter="sm">
        <x-ui.section-heading align="center" overline-style="label" :overline="$eyebrow" :title="$heading" :subtitle="$subheading" />

        <ul role="list" class="mt-12 grid grid-cols-1 gap-6 sm:mt-16 sm:grid-cols-2 lg:grid-cols-3">
            @foreach ($members as $member)
                <li>
                    <div class="group relative aspect-[3/4] overflow-hidden rounded-lg bg-muted">
                        {{-- Photo placeholder: large centered initials on a token surface. --}}
                        <div class="flex size-full items-center justify-center" aria-hidden="true">
                            <span class="text-3xl font-bold tracking-tight text-muted-foreground/40">{{ $member['initials'] }}</span>
                        </div>

                        {{-- Bottom gradient overlay (token utility, not raw colour). --}}
                        <div class="pointer-events-none absolute inset-0 bg-gradient-to-t from-foreground/70 via-foreground/20 to-transparent"></div>

                        <div class="absolute inset-x-0 bottom-0 flex items-end justify-between gap-4 p-6">
                            <div class="min-w-0">
                                <h3 class="truncate text-lg font-semibold text-background">{{ __($member['name']) }}</h3>
                                <p class="truncate text-sm text-background/80">{{ __($member['role']) }}</p>
                            </div>

                            @if (! empty($member['links']))
                                <x-ui.social-links :links="$memberLinks($member)" size="md" :label="__('Social links of :name', ['name' => $member['name']])" class="shrink-0 opacity-0 transition-opacity duration-200 group-hover:opacity-100 group-focus-within:opacity-100 motion-reduce:transition-none" />
                            @endif
                        </div>
                    </div>
                </li>
            @endforeach
        </ul>
    </x-ui.container>
</x-ui.section>