@extends('frontend.layout.app')

@section('title', 'Sports News | खेल जगत | UCN News')

@section('content')
    <div class="row g-3">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center border-bottom border-primary border-4 pb-2 mb-4">
                <h3 class="fw-bold mb-0 text-primary"><i class="bi bi-trophy-fill"></i> खेल दुनिया</h3>
                <span class="badge bg-primary rounded-0 px-3 py-2">LATEST SCORES</span>
            </div>
        </div>

        @for ($s = 1; $s <= 3; $s++)
            <div class="col-md-4">
                <div class="card border-0 shadow-sm rounded-0 h-100 sports-card">
                    <div class="position-relative overflow-hidden">
                        <img src="https://via.placeholder.com/400x250/004a99/ffffff?text=Cricket+News"
                            class="img-fluid transition">
                        <div class="position-absolute top-0 end-0 m-2">
                            <span class="badge bg-danger">EXCLUSIVE</span>
                        </div>
                    </div>
                    <div class="card-body p-3 bg-white border-top border-primary border-3">
                        <small class="text-primary fw-bold">CRICKET</small>
                        <h5 class="fw-bold mt-1">विदर्भ ने रचा इतिहास: रणजी ट्रॉफी के फाइनल में मुंबई को दी कड़ी टक्कर...</h5>
                        <p class="small text-muted mb-0">नागपुर के वीसीए स्टेडियम में दर्शकों का भारी हुजूम, टीम इंडिया के
                            सिलेक्टर्स की भी नजर...</p>
                    </div>
                </div>
            </div>
        @endfor

        <div class="col-12 my-5 text-center">
            <img src="https://placehold.jp/24/004a99/ffffff/1200x150.png?text=Gear+Up+Your+Game+-+Top+Sports+Brand+Ad"
                class="img-fluid border shadow-sm">
        </div>

        <div class="col-lg-8">
            <h4 class="fw-bold mb-3 border-start border-success border-4 ps-3">फुटबॉल और अन्य खेल</h4>
            @for ($o = 1; $o <= 4; $o++)
                <div class="d-flex bg-white border p-3 mb-3 align-items-center">
                    <img src="https://via.placeholder.com/120x80/28a745/fff" class="rounded me-3">
                    <div>
                        <h6 class="fw-bold mb-1">नागपुर फुटबॉल लीग: यंग ब्रदर्स क्लब ने दर्ज की शानदार जीत</h6>
                        <small class="text-muted">Local Sports | 3 Hours Ago</small>
                    </div>
                </div>
            @endfor
        </div>

        <div class="col-lg-4">
            <div class="bg-dark text-white p-4 text-center">
                <h5 class="fw-bold text-warning mb-3">Live Score Updates</h5>
                <div class="border-bottom border-secondary pb-2 mb-2">
                    <p class="small mb-1">VID vs MUM</p>
                    <h6 class="fw-bold text-success">VID: 345/4 (90.0)</h6>
                </div>
                <div class="pb-2">
                    <p class="small mb-1">IND vs AUS</p>
                    <h6 class="fw-bold text-danger">LIVE SOON</h6>
                </div>
            </div>
        </div>
    </div>

    <style>
        .sports-card:hover img {
            transform: scale(1.1);
        }

        .transition {
            transition: 0.5s ease;
        }
    </style>
@endsection