Team

@props([
    'eyebrow' => 'Our team',
    'heading' => 'The people directory',
    'subheading' => 'Everyone who builds, ships, and supports the product — at a glance.',
    '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/',
            ],
        ],
        [
            'name' => 'Sofia Reyes',
            'role' => 'Product Manager',
            'initials' => 'SR',
            'bio' => 'Keeps the roadmap ruthless and the trade-offs explicit so the team builds the right thing.',
            '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 size="md" gutter="sm">
        <x-ui.section-heading align="start" overline-style="label" :overline="$eyebrow" :title="$heading" :subtitle="$subheading" />

        <ul role="list" class="mt-10 sm:mt-12">
            @foreach ($members as $member)
                <li class="flex flex-col gap-4 border-b border-border py-6 last:border-b-0 sm:flex-row sm:items-center">
                    <x-ui.avatar
                        size="lg"
                        :alt="$member['name']"
                        :fallback="$member['initials']"
                        class="shrink-0 ring-2 ring-border ring-offset-2 ring-offset-background"
                    />

                    <div class="flex-1">
                        <div class="flex flex-wrap items-center gap-x-4 gap-y-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="mt-2 text-pretty text-sm leading-relaxed text-muted-foreground">{{ __($member['bio']) }}</p>
                        @endif
                    </div>

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