Team

@props([
    'heading'     => 'Meet our team',
    'subheading'  => 'The people who make it happen — passionate, diverse, and driven.',
    'departments' => [],
    'members'     => [],
])

@php
    if (empty($members)) {
        $members = [
            ['name' => 'Alice Müller',    'role' => 'CEO',                'dept' => 'Leadership',  'initials' => 'AM', 'bio' => 'Visionary leader with 15 years scaling global products.'],
            ['name' => 'Ben Okafor',      'role' => 'VP Engineering',     'dept' => 'Engineering', 'initials' => 'BO', 'bio' => 'Infrastructure enthusiast who believes in boring reliable systems.'],
            ['name' => 'Camille Dubois',  'role' => 'Head of Design',     'dept' => 'Design',      'initials' => 'CD', 'bio' => 'Craft-obsessed designer turning research into delightful UIs.'],
            ['name' => 'Diego Ramírez',   'role' => 'Senior Engineer',    'dept' => 'Engineering', 'initials' => 'DR', 'bio' => 'Full-stack developer with a love for clean architecture.'],
            ['name' => 'Elif Şahin',      'role' => 'Product Designer',   'dept' => 'Design',      'initials' => 'EŞ', 'bio' => 'Creates accessible, beautiful experiences for everyone.'],
            ['name' => 'Finn Larsen',     'role' => 'Growth Lead',        'dept' => 'Marketing',   'initials' => 'FL', 'bio' => 'Data-driven marketer turning numbers into compelling narratives.'],
            ['name' => 'Grace Osei',      'role' => 'Backend Engineer',   'dept' => 'Engineering', 'initials' => 'GO', 'bio' => 'API architect passionate about performance and security.'],
            ['name' => 'Hana Tanaka',     'role' => 'Content Strategist', 'dept' => 'Marketing',   'initials' => 'HT', 'bio' => 'Wordsmith who distills complex ideas into simple stories.'],
            ['name' => 'Ivan Petrov',     'role' => 'COO',                'dept' => 'Leadership',  'initials' => 'IP', 'bio' => 'Operational excellence champion keeping teams in sync.'],
        ];
    }

    if (empty($departments)) {
        $departments = array_values(array_unique(array_column($members, 'dept')));
    }

    // 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'] ?? ['linkedin' => '#', 'x' => '#', 'github' => '#'])
        ->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-data="{
        filter: 'all',
        members: {{ Js::from($members) }},
        init() {},
        destroy() {}
    }"
>
    {{-- Header --}}
    <div class="mx-auto max-w-2xl px-4 text-center">
        <h2 class="text-3xl font-bold tracking-tight sm:text-4xl">{{ __($heading) }}</h2>
        @if ($subheading)
            <p class="mt-4 text-lg text-muted-foreground">{{ __($subheading) }}</p>
        @endif
    </div>

    {{-- Filter pills --}}
    <div class="mx-auto mt-10 flex max-w-5xl flex-wrap justify-center gap-2 px-4" role="group" aria-label="{{ __('Filter by department') }}">
        <button
            type="button"
            class="rounded-full border px-4 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
            :class="filter === 'all'
                ? 'bg-primary text-primary-foreground border-primary'
                : 'bg-background text-foreground border-border hover:bg-muted'"
            :aria-pressed="filter === 'all'"
            x-on:click="filter = 'all'"
        >{{ __('All') }}</button>

        @foreach ($departments as $dept)
            <button
                type="button"
                class="rounded-full border px-4 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
                :class="filter === {{ Js::from($dept) }}
                    ? 'bg-primary text-primary-foreground border-primary'
                    : 'bg-background text-foreground border-border hover:bg-muted'"
                :aria-pressed="filter === {{ Js::from($dept) }}"
                x-on:click="filter = {{ Js::from($dept) }}"
            >{{ __($dept) }}</button>
        @endforeach
    </div>

    {{-- Member grid --}}
    <div class="mx-auto mt-12 grid max-w-5xl grid-cols-1 gap-6 px-4 sm:grid-cols-2 lg:grid-cols-3">
        @foreach ($members as $member)
            <div
                data-dept="{{ $member['dept'] }}"
                x-show="filter === 'all' || filter === {{ Js::from($member['dept']) }}"
                x-transition:enter="transition duration-200 ease-out"
                x-transition:enter-start="opacity-0 scale-95"
                x-transition:enter-end="opacity-100 scale-100"
                x-transition:leave="transition duration-150 ease-in"
                x-transition:leave-start="opacity-100 scale-100"
                x-transition:leave-end="opacity-0 scale-95"
            >
                <x-ui.card class="h-full">
                    <x-ui.card.content class="flex flex-col gap-4 pt-6">
                        {{-- Avatar + name row --}}
                        <div class="flex items-center gap-4">
                            <x-ui.avatar :fallback="$member['initials']" class="size-12 shrink-0" />
                            <div class="min-w-0">
                                <p class="truncate font-semibold text-foreground">{{ $member['name'] }}</p>
                                <x-ui.badge variant="secondary" class="mt-2">{{ __($member['role']) }}</x-ui.badge>
                            </div>
                        </div>

                        {{-- Bio --}}
                        <p class="text-sm text-muted-foreground">{{ __($member['bio']) }}</p>

                        <x-ui.social-links :links="$memberLinks($member)" :label="__('Social links of :name', ['name' => $member['name']])" />
                    </x-ui.card.content>
                </x-ui.card>
            </div>
        @endforeach
    </div>
</x-ui.section>