@php
    $positionGroups = [
        'Striker' => ['slug' => 'striker', 'label' => 'Strikers'],
        'Midfielder' => ['slug' => 'midfielder', 'label' => 'Midfielders'],
        'Defender' => ['slug' => 'defender', 'label' => 'Defenders'],
        'Goalkeeper' => ['slug' => 'goalkeeper', 'label' => 'Goalkeepers'],
    ];
@endphp

<x-app-layout>
    <main class="flex-grow">
        @php
            $heroPlayer = isset($players) && $players->isNotEmpty()
                ? ($players->first(fn ($p) => filled($p->photo)) ?? $players->first())
                : null;
            $playerCount = isset($players) ? $players->count() : 0;
        @endphp

        {{-- Hero: same split pattern as Highlights --}}
        <section class="highlight-hero-split border-bottom border-light" aria-labelledby="players-hero-heading">
            <div class="container-fluid px-0 overflow-hidden">
                <div class="row g-0 align-items-stretch highlight-hero-split-row mx-0">
                    <div class="col-lg-5 d-flex highlight-hero-aside order-2 order-lg-1">
                        <div class="highlight-hero-aside-inner w-100 d-flex flex-column justify-content-center py-4 py-lg-5 px-4 px-xl-5">
                            <div class="d-inline-flex align-items-center gap-2 rounded-pill px-3 py-2 mb-3 highlight-hero-badge">
                                <i class="bi bi-trophy small" aria-hidden="true"></i>
                                <span class="small fw-semibold">First team</span>
                            </div>
                            <h1 id="players-hero-heading" class="highlight-hero-heading text-dark fw-bold mb-3">
                                Our squad
                            </h1>
                            <div class="d-flex flex-wrap align-items-center gap-2 text-secondary mb-3 small">
                                <i class="bi bi-people highlight-hero-date-icon" aria-hidden="true"></i>
                                <span>{{ $playerCount }} {{ Str::plural('player', $playerCount) }}</span>
                                <span class="text-muted" aria-hidden="true">·</span>
                                <span class="d-inline-flex align-items-center gap-1">
                                    <i class="bi bi-shield-check highlight-hero-date-icon" aria-hidden="true"></i>
                                    Match ready
                                </span>
                            </div>
                            <p class="highlight-hero-deck text-secondary mb-4">
                                Meet the talented players who represent Life Football Club — skill, heart, and pride in every match.
                            </p>
                            <a href="#players-roster" class="highlight-hero-scroll d-inline-flex align-items-center gap-2 text-decoration-none fw-semibold small">
                                <span>Browse roster</span>
                                <i class="bi bi-arrow-down-circle" aria-hidden="true"></i>
                            </a>
                        </div>
                    </div>
                    <div class="col-lg-7 p-0 order-1 order-lg-2 highlight-hero-visual d-flex">
                        @if ($heroPlayer && filled($heroPlayer->photo))
                            <figure class="highlight-hero-figure highlight-hero-figure--cinema mb-0 position-relative">
                                <img
                                    src="{{ local_asset($heroPlayer->photo) }}"
                                    class="highlight-hero-photo position-absolute top-0 start-0 w-100 h-100 object-fit-cover"
                                    alt="{{ $heroPlayer->name }}"
                                    loading="eager"
                                    fetchpriority="high"
                                    style="object-position: center 15%;"
                                >
                            </figure>
                        @else
                            <figure class="highlight-hero-figure highlight-hero-figure--fill mb-0 w-100 h-100 position-relative">
                                <img
                                    src="{{ asset('images/news-hero/news-main.png') }}"
                                    class="highlight-hero-photo position-absolute top-0 start-0 w-100 h-100 object-fit-cover"
                                    alt="Life Football Club"
                                    loading="eager"
                                    fetchpriority="high"
                                >
                            </figure>
                        @endif
                    </div>
                </div>
            </div>
        </section>

        {{-- Chip Filters (scroll target for hero CTA) --}}
        <section id="players-roster" class="py-4 bg-white border-bottom sticky-top people-filter-section" tabindex="-1">
            <div class="container">
                <div class="d-flex flex-wrap justify-content-center gap-2">
                    <button type="button" class="btn btn-primary px-4 py-2 rounded-pill player-filter-btn" data-category="all">All</button>
                    @foreach($positionGroups as $posKey => $pos)
                        <button type="button" class="btn btn-light px-4 py-2 rounded-pill player-filter-btn" data-category="{{ $pos['slug'] }}">{{ $pos['label'] }}</button>
                    @endforeach
                </div>
            </div>
        </section>

        {{-- Players Grid (original big overlay cards) --}}
        <section class="py-5 bg-white">
            <div class="container">
                @if($players->isEmpty())
                    <div class="text-center py-5 text-muted">
                        <i class="bi bi-people display-4 d-block mb-3"></i>
                        <p>No players to display yet. Check back soon!</p>
                    </div>
                @else
                    <div class="row g-4 align-items-stretch justify-content-center player-row">
                        @foreach($players as $player)
                            @php
                                $rawPosition = trim((string) ($player->position ?? ''));
                                $positionSlug = 'other';
                                foreach ($positionGroups as $canonical => $meta) {
                                    if (strcasecmp($rawPosition, $canonical) === 0) {
                                        $positionSlug = $meta['slug'];
                                        break;
                                    }
                                }
                                if ($positionSlug === 'other' && $rawPosition !== '') {
                                    $lower = strtolower($rawPosition);
                                    $positionSlug = match (true) {
                                        str_contains($lower, 'strik') || str_contains($lower, 'forward') => 'striker',
                                        str_contains($lower, 'mid') => 'midfielder',
                                        str_contains($lower, 'defend') => 'defender',
                                        str_contains($lower, 'goal') => 'goalkeeper',
                                        default => 'other',
                                    };
                                }
                            @endphp
                            <div class="col-12 col-md-6 col-lg-4 d-flex player-item" data-category="{{ $positionSlug }}">
                                <div class="w-100 d-flex">
                                    <x-player-card
                                        class="people-player-card flex-grow-1"
                                        :name="$player->name"
                                        :number="$player->jersey_number ?? '0'"
                                        :image="$player->photo ? local_asset($player->photo) : ''"
                                        :country="$player->nationality ?? '—'"
                                        :position="$player->position ?? null"
                                    />
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>
        </section>
    </main>

    @include('partials.highlight-hero-styles')
    <style>
        #players-roster {
            scroll-margin-top: 6.5rem;
        }

        .people-filter-section { z-index: 1020; }
        .player-row > .player-item > .w-100 { min-height: 0; }
        .people-player-card { width: 100%; }

        .player-filter-btn.btn-primary {
            background: #74c7fe !important;
            border-color: #74c7fe !important;
            color: white !important;
        }
        .player-filter-btn.btn-primary:hover {
            background: #0284c7 !important;
            border-color: #0284c7 !important;
            color: white !important;
        }
    </style>

    @if(!$players->isEmpty())
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const btns = document.querySelectorAll('.player-filter-btn');
            const items = document.querySelectorAll('.player-item');
            function filter(cat) {
                var c = String(cat || '').trim();
                items.forEach(function(el) {
                    var itemCat = (el.getAttribute('data-category') || '').trim();
                    var show = c === 'all' || itemCat === c;
                    // Beat Bootstrap .d-flex { display:flex !important } — plain inline display:none does not
                    if (show) {
                        el.style.removeProperty('display');
                    } else {
                        el.style.setProperty('display', 'none', 'important');
                    }
                });
                btns.forEach(function(b) {
                    var btnCat = (b.getAttribute('data-category') || '').trim();
                    b.classList.toggle('btn-primary', btnCat === c);
                    b.classList.toggle('btn-light', btnCat !== c);
                });
            }
            btns.forEach(function(btn) {
                btn.addEventListener('click', function() {
                    filter(btn.getAttribute('data-category'));
                });
            });
        });
    </script>
    @endif
</x-app-layout>