@extends('layouts.website')

@section('title', 'FISEC INDIA')

@section('hero')
    <x-site.partials.inner-banner
        title="About Us"
        :breadcrumb="[
            ['label' => 'About Us', 'url' => route('site.about.fisec-india')],
            ['label' => 'FISEC INDIA'],
        ]" />
@endsection

@section('content')

{{-- Hero Introduction --}}
<section class="space-ptb about">
    <div class="container">
        
        {{-- Main Intro --}}
        <div class="row justify-content-center mb-5">
            <div class="col-lg-10 text-center">
                <div class="section-title">
                    <span class="text-primary text-uppercase fw-bold letter-spacing-2 d-block mb-2">Since 2008</span>
                    <h2 class="text-white mb-4">FISEC INDIA</h2>
                    <p class="text-white lead">FISEC India is an organization working for the development and promotion of FISEC Games in India since 2008. FISEC India is member of the Fédération Internationale Sportive de l'Enseignement Catholique (FISEC) an international school sports federation recognized by the International Olympic Committee (IOC). Founded in 1948, FISEC has a rich legacy of more than seven decades in promoting international school sports and youth development.</p>
                </div>
            </div>
        </div>

        {{-- Key Stats --}}
        <div class="row counter-box mb-5 g-4">
            <div class="col-6 col-md-3">
                <div class="counter text-center">
                    <div class="counter-number">
                        <p class="text-white-50 text-uppercase small mb-2">Established</p>
                        <div class="counter-text">
                            <h2 class="timer mb-0 text-primary" data-to="2008" data-speed="2000">2008</h2>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="counter text-center">
                    <div class="counter-number">
                        <p class="text-white-50 text-uppercase small mb-2">First Participation</p>
                        <div class="counter-text">
                            <h2 class="timer mb-0 text-primary" data-to="2009" data-speed="2000">2009</h2>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="counter text-center">
                    <div class="counter-number">
                        <p class="text-white-50 text-uppercase small mb-2">FISEC Legacy</p>
                        <div class="counter-text">
                            <h2 class="timer mb-0 text-primary" data-to="77" data-speed="2000">77</h2><span class="text-primary"> Years</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="counter text-center">
                    <div class="counter-number">
                        <p class="text-white-50 text-uppercase small mb-2">IOC Recognition</p>
                        <div class="counter-text">
                            <h2 class="mb-0 text-primary"><i class="fas fa-medal"></i></h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Content Sections --}}
        <div class="row align-items-start g-5">
            <div class="col-lg-6">
                <h4 class="text-primary text-uppercase mb-4">Our Mission</h4>
                <p class="text-white mb-4">Since its inception FISEC India dedicated to promoting sports school-level and nurturing young athletic talent across the country and providing them platform in International Competition. FISEC India has been actively organizing various inter-school competitions and providing structured opportunities for students to excel in sports.</p>
                <p class="text-white mb-0">The FISEC India team has proudly represented the country at the FISEC Games since 2009, consistently contributing to the global platform of youth sports excellence.</p>
            </div>

            <div class="col-lg-6">
                <h4 class="text-primary text-uppercase mb-4">FISEC Games Legacy</h4>
                <p class="text-white mb-4">For the past 77 years, FISEC has been organizing the prestigious FISEC Games, bringing together student athletes from member nations to compete at an international level while fostering friendship, cultural exchange, and the values of fair play.</p>
                
                {{-- Timeline highlights --}}
                <div class="row g-3">
                    <div class="col-12">
                        <div class="d-flex align-items-start p-3 rounded" style="background:rgba(255,255,255,.04); border-left:3px solid var(--bs-primary);">
                            <div class="flex-shrink-0 me-3">
                                <span class="d-flex align-items-center justify-content-center rounded-circle bg-primary text-white fw-bold" style="width:48px;height:48px;">
                                    1948
                                </span>
                            </div>
                            <div>
                                <h6 class="text-white mb-1">FISEC Founded</h6>
                                <p class="text-white-50 mb-0 small">International school sports federation established and recognized by IOC</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="d-flex align-items-start p-3 rounded" style="background:rgba(255,255,255,.04); border-left:3px solid var(--bs-primary);">
                            <div class="flex-shrink-0 me-3">
                                <span class="d-flex align-items-center justify-content-center rounded-circle bg-primary text-white fw-bold" style="width:48px;height:48px;">
                                    2008
                                </span>
                            </div>
                            <div>
                                <h6 class="text-white mb-1">FISEC India Established</h6>
                                <p class="text-white-50 mb-0 small">Organization founded to promote FISEC Games in India</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="d-flex align-items-start p-3 rounded" style="background:rgba(255,255,255,.04); border-left:3px solid var(--bs-primary);">
                            <div class="flex-shrink-0 me-3">
                                <span class="d-flex align-items-center justify-content-center rounded-circle bg-primary text-white fw-bold" style="width:48px;height:48px;">
                                    2009
                                </span>
                            </div>
                            <div>
                                <h6 class="text-white mb-1">First International Participation</h6>
                                <p class="text-white-50 mb-0 small">FISEC India team proudly represented the country at FISEC Games</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>

{{-- What We Do Section --}}
<section class="space-pb">
    <div class="container">
        <div class="row justify-content-center mb-5">
            <div class="col-lg-8 text-center">
                <div class="section-title">
                    <h3 class="text-white mb-3">What We Do</h3>
                    <p class="text-white">FISEC India is committed to nurturing young talent and promoting sports excellence at the school level</p>
                </div>
            </div>
        </div>

        <div class="row g-4">
            <div class="col-md-6 col-lg-3">
                <div class="feature-item feature-info-style-02 feature-info-center text-center p-4 rounded h-100" style="background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);">
                    <div class="feature-icon mb-3">
                        <i class="fas fa-trophy fa-2x text-primary"></i>
                    </div>
                    <div class="feature-content">
                        <h5 class="text-white mb-2">Organizing Competitions</h5>
                        <p class="text-white-50 mb-0 small">Actively organizing various inter-school competitions across the country</p>
                    </div>
                </div>
            </div>

            <div class="col-md-6 col-lg-3">
                <div class="feature-item feature-info-style-02 feature-info-center text-center p-4 rounded h-100" style="background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);">
                    <div class="feature-icon mb-3">
                        <i class="fas fa-globe fa-2x text-primary"></i>
                    </div>
                    <div class="feature-content">
                        <h5 class="text-white mb-2">International Platform</h5>
                        <p class="text-white-50 mb-0 small">Providing students platform to compete in international competitions</p>
                    </div>
                </div>
            </div>

            <div class="col-md-6 col-lg-3">
                <div class="feature-item feature-info-style-02 feature-info-center text-center p-4 rounded h-100" style="background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);">
                    <div class="feature-icon mb-3">
                        <i class="fas fa-running fa-2x text-primary"></i>
                    </div>
                    <div class="feature-content">
                        <h5 class="text-white mb-2">Talent Development</h5>
                        <p class="text-white-50 mb-0 small">Nurturing young athletic talent across the country at school-level</p>
                    </div>
                </div>
            </div>

            <div class="col-md-6 col-lg-3">
                <div class="feature-item feature-info-style-02 feature-info-center text-center p-4 rounded h-100" style="background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);">
                    <div class="feature-icon mb-3">
                        <i class="fas fa-handshake fa-2x text-primary"></i>
                    </div>
                    <div class="feature-content">
                        <h5 class="text-white mb-2">Fair Play Values</h5>
                        <p class="text-white-50 mb-0 small">Fostering friendship, cultural exchange, and values of fair play</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection