@extends('layouts.website')

@section('title', 'Sports - Budapest 2026')

@section('hero')
    <x-site.partials.inner-banner
        title="Sports"
        :breadcrumb="[
            ['label' => 'Budapest 2026', 'url' => route('site.budapest.index')],
            ['label' => 'Sports'],
        ]" />
@endsection

@push('styles')
<style>
/* ── Sport Cards ── */
.sport-card-wrap {
    cursor: pointer;
    border-radius: .55rem;
    overflow: hidden;
    border: none;
    background: var(--pgs_primary_color, #c0392b);
    transition: transform .3s ease, box-shadow .3s ease;
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.sport-card-wrap:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 14px 36px rgba(0,0,0,.45);
}
.sport-card-wrap .sport-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}
.sport-card-wrap:hover .sport-img {
    transform: scale(1.06);
}
.sport-card-wrap .sport-img-wrap {
    overflow: hidden;
}
.sport-card-title {
    padding: .7rem 1rem;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    letter-spacing: .02em;
}
</style>
@endpush

@section('content')

{{-- Page heading --}}
<section class="pt-5 pb-0">
    <div class="container">
        <div class="section-title text-center">
            <h2 class="text-white mb-0">Sports</h2>
            <div class="mt-3 mx-auto" style="width:60px;height:3px;background:var(--pgs_primary_color,#c0392b);border-radius:2px;"></div>
        </div>
    </div>
</section>

<section class="page-content">
    <div class="container">
        <div class="row mt-5 g-4">
       @forelse($sports as $sp)
                @php $cover = $sp->images->first(); @endphp
                <div class="col-4 col-md-4 col-lg-4">
                    <div class="sport-card-wrap" >
                   <a href="{{ route('site.budapest.sport', $sp) }}">
                        <div class="sport-img-wrap">
                            @switch($sp->id)
                                @case(1)
                                     <img src="{{ asset('website/images/sports-cover/ath.jpeg') }}" class="sport-img" alt="{{ $sp->name }}" loading="lazy">
                                    @break
                                @case(2)
                                     <img src="{{ asset('website/images/sports-cover/bb.jpeg') }}" class="sport-img" alt="{{ $sp->name }}" loading="lazy">
                                    @break
                                 @case(3)
                                     <img src="{{ asset('website/images/sports-cover/f.jpeg') }}" class="sport-img" alt="{{ $sp->name }}" loading="lazy">
                                    @break
                                     @case(4)
                                     <img src="{{ asset('website/images/sports-cover/swimming.jpeg') }}" class="sport-img" alt="{{ $sp->name }}" loading="lazy">
                                    @break
                                     @case(5)
                                     <img src="{{ asset('website/images/sports-cover/tt.jpeg') }}" class="sport-img" alt="{{ $sp->name }}" loading="lazy">
                                    @break
                                     @case(6)
                                     <img src="{{ asset('website/images/sports-cover/vb.jpeg') }}" class="sport-img" alt="{{ $sp->name }}" loading="lazy">
                                    @break
                                @default
                                    
                            @endswitch
                        </div>
                        </a> 
                        {{-- <h5 class="sport-card-title">{{ $sp->name }}</h5> --}}
                    </div>
                </div>
            @empty
                <div class="col-12">
                    <p class="text-white-50">Sports will appear here after you add them.</p>
                </div>
            @endforelse
        </div>
    </div>
</section>
@endsection