@php
    $featured = $team['featured'] ?? [];
    $departments = $team['departments'] ?? [];
@endphp

<section class="about-team-section reveal" id="team" aria-labelledby="team-title">
    <header class="about-team-header">
        <span class="about-team-label">{{ $team['kicker'] }}</span>
        <h2 class="about-team-title" id="team-title">{{ $team['title'] }}</h2>
        <p class="about-team-lead">{{ $team['lead'] }}</p>
    </header>

    @if (count($featured))
        <div class="about-founders">
            @foreach ($featured as $index => $leader)
                <article class="about-founder-panel reveal" style="--reveal-delay: {{ $index * 100 }}ms">
                    <div class="about-founder-portrait about-team-media" data-about-team-media>
                        <img
                            src="{{ asset($leader['image']) }}"
                            alt="{{ $leader['image_alt'] }}"
                            loading="lazy"
                            decoding="async"
                        >
                        @if (! empty($leader['linkedin']))
                            <div class="about-team-social">
                                <a
                                    href="{{ $leader['linkedin'] }}"
                                    class="about-team-social-link"
                                    target="_blank"
                                    rel="noopener noreferrer"
                                    aria-label="{{ $leader['name'] }} on LinkedIn"
                                >
                                    <x-icon name="linkedin" />
                                </a>
                            </div>
                        @endif
                    </div>
                    <div class="about-founder-copy">
                        <h3 class="about-founder-name">{{ $leader['name'] }}</h3>
                        <p class="about-founder-role">{{ $leader['role'] }}</p>
                        @if (! empty($leader['bio']))
                            <p class="about-founder-bio">{{ $leader['bio'] }}</p>
                        @endif
                    </div>
                </article>
            @endforeach
        </div>
    @endif

    <div class="about-team-grid-heading reveal" style="--reveal-delay: 120ms">
        <h3 class="about-team-grid-title">Meet our talented team</h3>
    </div>

    @if (count($departments))
        <div class="about-team-filters-wrap reveal" style="--reveal-delay: 140ms">
            <div class="about-team-filters" data-about-team-filters role="tablist" aria-label="Filter team by department">
                @foreach ($departments as $index => $department)
                    <button
                        type="button"
                        class="about-team-filter{{ $index === 0 ? ' is-active' : '' }}"
                        role="tab"
                        data-about-team-filter="{{ $department['id'] }}"
                        aria-selected="{{ $index === 0 ? 'true' : 'false' }}"
                        aria-controls="about-team-grid"
                        id="about-team-filter-{{ $department['id'] }}"
                    >
                        {{ $department['label'] }}
                    </button>
                @endforeach
            </div>
        </div>
    @endif

    <div class="about-team-showcase" data-about-team>
        <div class="about-team-avatars" id="about-team-grid" role="tabpanel" aria-labelledby="about-team-filter-all">
            @foreach ($team['members'] as $index => $member)
                <article
                    class="about-team-person reveal"
                    style="--reveal-delay: {{ ($index % 4) * 60 }}ms"
                    data-team-departments="{{ implode(',', $member['departments'] ?? []) }}"
                >
                    <div class="about-team-avatar about-team-media" data-about-team-media>
                        <img
                            src="{{ asset($member['image']) }}"
                            alt="{{ $member['image_alt'] }}"
                            loading="lazy"
                            decoding="async"
                        >
                        @if (! empty($member['linkedin']))
                            <div class="about-team-social">
                                <a
                                    href="{{ $member['linkedin'] }}"
                                    class="about-team-social-link"
                                    target="_blank"
                                    rel="noopener noreferrer"
                                    aria-label="{{ $member['name'] }} on LinkedIn"
                                >
                                    <x-icon name="linkedin" />
                                </a>
                            </div>
                        @endif
                    </div>
                    <div class="about-team-person-copy">
                        <h3 class="about-team-person-name">{{ $member['name'] }}</h3>
                        <p class="about-team-person-role">{{ $member['role'] }}</p>
                    </div>
                </article>
            @endforeach
        </div>

        <p class="about-team-empty" data-about-team-empty hidden>No team members in this department yet.</p>
    </div>
</section>