Team

@props([
    'eyebrow' => 'Our team',
    'heading' => 'Meet the people behind the product',
    'subheading' => 'A small, senior team that ships fast and sweats the details — from design tokens to keyboard focus states.',
    'members' => null,
])

@php
    $members ??= [
        [
            'name' => 'Avery Mitchell',
            'role' => 'Co-founder & CEO',
            'initials' => 'AM',
            'bio' => 'Sets product direction and keeps everyone honest about shipping value, not features.',
            'links' => [
                'linkedin' => 'https://www.linkedin.com/',
                'x' => 'https://x.com/',
                'github' => 'https://github.com/',
            ],
        ],
        [
            'name' => 'Jordan Lee',
            'role' => 'Head of Engineering',
            'initials' => 'JL',
            'bio' => 'Owns the architecture and the build pipeline so every release lands clean and reversible.',
            'links' => [
                'linkedin' => 'https://www.linkedin.com/',
                'x' => 'https://x.com/',
                'github' => 'https://github.com/',
            ],
        ],
        [
            'name' => 'Priya Nair',
            'role' => 'Lead Designer',
            'initials' => 'PN',
            'bio' => 'Turns the token system into interfaces that feel obvious, accessible, and on-brand.',
            'links' => [
                'linkedin' => 'https://www.linkedin.com/',
                'x' => 'https://x.com/',
                'github' => 'https://github.com/',
            ],
        ],
        [
            'name' => 'Marcus Bell',
            'role' => 'Developer Advocate',
            'initials' => 'MB',
            'bio' => 'Writes the docs, runs the demos, and brings real-world feedback back into the roadmap.',
            '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 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-4">
            @foreach ($members as $member)
                <li>
                    <x-ui.card class="flex h-full flex-col items-center gap-4 p-6 text-center transition-shadow hover:shadow-md">
                        <x-ui.avatar
                            size="xl"
                            :alt="$member['name']"
                            :fallback="$member['initials']"
                            class="ring-2 ring-border ring-offset-2 ring-offset-card"
                        />

                        <div class="flex flex-col items-center gap-2">
                            <h3 class="text-sm font-semibold text-foreground">{{ __($member['name']) }}</h3>
                            <x-ui.badge variant="secondary" size="sm">{{ __($member['role']) }}</x-ui.badge>
                        </div>

                        @if (! empty($member['bio']))
                            <p class="text-pretty text-sm leading-relaxed text-muted-foreground">{{ __($member['bio']) }}</p>
                        @endif

                        @if (! empty($member['links']))
                            <x-ui.social-links :links="$memberLinks($member)" size="md" :label="__('Social links of :name', ['name' => $member['name']])" class="mt-auto justify-center pt-2" />
                        @endif
                    </x-ui.card>
                </li>
            @endforeach
        </ul>
    </x-ui.container>
</x-ui.section>