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,
    'loop' => true,
])

@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 Marchetti',
            'role' => 'Product Manager',
            'initials' => 'SM',
            'bio' => 'Keeps the roadmap focused and the feedback loop short so we build what teams actually need.',
            'links' => [
                'linkedin' => 'https://www.linkedin.com/',
                'x' => 'https://x.com/',
                'github' => 'https://github.com/',
            ],
        ],
        [
            'name' => 'Devon Hayes',
            'role' => 'Staff Engineer',
            'initials' => 'DH',
            'bio' => 'Sweats the build pipeline and the edge cases so releases stay clean and reversible.',
            '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" />

        <x-ui.carousel :loop="$loop" class="mt-12 px-12 sm:mt-16 sm:px-14" aria-label="{{ __('Team members') }}">
            <x-ui.carousel.content>
                @foreach ($members as $member)
                    <x-ui.carousel.item class="basis-full px-2 sm:basis-1/2 lg:basis-1/3">
                        <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>
                    </x-ui.carousel.item>
                @endforeach
            </x-ui.carousel.content>

            <x-ui.carousel.previous />
            <x-ui.carousel.next />
        </x-ui.carousel>
    </x-ui.container>
</x-ui.section>