@extends('layouts.app')

@section('title', 'Sports & Extracurricular Activities - ' . $siteContext->name)

@section('content')
    <!-- breadcrumb -->
    <div class="site-breadcrumb" style="background-image: url('{{ asset('assets/img/breadcrumb/breadcrumb.jpg') }}'); background-size: cover; background-position: center; padding: 80px 0;">
        <div class="container text-center text-white">
            <h2 class="breadcrumb-title text-white">Sports & ECA</h2>
            <ul class="breadcrumb-menu d-flex justify-content-center list-unstyled gap-2 mt-2">
                <li><a href="{{ route('home') }}" class="text-white">Home</a></li>
                <li class="text-white">/</li>
                <li><a href="{{ route('facilities.index') }}" class="text-white">Facilities</a></li>
                <li class="text-white">/</li>
                <li class="active text-white">Sports & ECA</li>
            </ul>
        </div>
    </div>
    <!-- breadcrumb end -->

    <!-- sports and eca section -->
    <div class="facilities-detail py-120">
        <div class="container">
            <!-- Sports Activities -->
            <div class="row align-items-center g-5 mb-5 pb-5 border-bottom">
                <div class="col-lg-6">
                    <div class="detail-content">
                        <span class="site-title-tagline"><i class="far fa-book-open-reader"></i> Physical Development</span>
                        <h2 class="site-title mb-4">Sports & <span>Recreation</span></h2>
                        <p class="text-justify mb-3">
                            Sports build character, foster teamwork, and teach self-discipline. We feature extensive sports setups to keep students active, healthy, and competitive.
                        </p>
                        <p class="text-justify mb-4">
                            Our campus premises contain standard courts for **Basketball, Volleyball, Badminton, and Table Tennis**. Students are encouraged to participate in annual sports meets, inter-school tournaments, and regular recreational plays during leisure hours.
                        </p>
                        
                        <div class="row g-3">
                            <div class="col-6">
                                <span class="d-flex align-items-center gap-2 small text-muted"><i class="far fa-circle-check text-primary"></i> Basketball court</span>
                            </div>
                            <div class="col-6">
                                <span class="d-flex align-items-center gap-2 small text-muted"><i class="far fa-circle-check text-primary"></i> Volleyball setup</span>
                            </div>
                            <div class="col-6">
                                <span class="d-flex align-items-center gap-2 small text-muted"><i class="far fa-circle-check text-primary"></i> Badminton court</span>
                            </div>
                            <div class="col-6">
                                <span class="d-flex align-items-center gap-2 small text-muted"><i class="far fa-circle-check text-primary"></i> Indoor Table Tennis boards</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="image-box rounded shadow-lg overflow-hidden border">
                        <img src="{{ asset('assets/img/about/about.jpg') }}" alt="Sports Activities" class="img-fluid w-100">
                    </div>
                </div>
            </div>

            <!-- Extracurricular Activities -->
            <div class="row align-items-center g-5 pt-5">
                <div class="col-lg-6 order-lg-2">
                    <div class="detail-content">
                        <span class="site-title-tagline"><i class="far fa-book-open-reader"></i> Holistic Caliber</span>
                        <h2 class="site-title mb-4">Extracurricular <span>Activities (ECA)</span></h2>
                        <p class="text-justify mb-3">
                            Mental growth extends far beyond textbooks. We organize weekly extracurricular panels to encourage public speech, creative thought, and social responsibility.
                        </p>
                        <p class="text-justify mb-4">
                            Our systematic ECA events include **Quiz contests, Debate panels, Essay writing competitions, Eloquence challenges, and Creative writing workshops**. To bridge classroom theory with practical insights, we also coordinate **regular industrial visits and educational excursions** within and outside Pokhara valley.
                        </p>
                        
                        <div class="row g-3">
                            <div class="col-6">
                                <span class="d-flex align-items-center gap-2 small text-muted"><i class="far fa-circle-check text-primary"></i> Public debates & elocution</span>
                            </div>
                            <div class="col-6">
                                <span class="d-flex align-items-center gap-2 small text-muted"><i class="far fa-circle-check text-primary"></i> Inter-school quiz panels</span>
                            </div>
                            <div class="col-6">
                                <span class="d-flex align-items-center gap-2 small text-muted"><i class="far fa-circle-check text-primary"></i> Industrial visits & outings</span>
                            </div>
                            <div class="col-6">
                                <span class="d-flex align-items-center gap-2 small text-muted"><i class="far fa-circle-check text-primary"></i> Creative writing workshops</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-6 order-lg-1">
                    <div class="image-box rounded shadow-lg overflow-hidden border">
                        <img src="{{ asset('assets/img/about/02.jpg') }}" alt="ECA Programs" class="img-fluid w-100">
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection