@extends('layouts.app')

@section('title', 'Introduction - ' . $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">Introduction</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 class="text-white">About Us</li>
                <li class="text-white">/</li>
                <li class="active text-white">Introduction</li>
            </ul>
        </div>
    </div>
    <!-- breadcrumb end -->

    <!-- introduction section -->
    <div class="introduction-area py-120">
        <div class="container">
            <div class="row align-items-center g-5">
                <div class="col-lg-6">
                    <div class="about-content">
                        <span class="site-title-tagline"><i class="far fa-book-open-reader"></i> Who We Are</span>
                        <h2 class="site-title mb-4">
                            Welcome to <span>{{ $siteContext->name }}</span>
                        </h2>
                        <p class="about-text text-justify mb-3">
                            Established in 2043 B.S., <strong>{{ $siteContext->name }}</strong> has long stood as a beacon of academic excellence in the Pokhara region. Over more than three decades, we have dedicated ourselves to shaping bright futures by delivering comprehensive, student-centric education.
                        </p>
                        <p class="text-justify mb-4">
                            Our institution thrives on a collaborative leadership model where educators, parents, and students work hand-in-hand. This synergy guarantees that children receive personalized guidance, moral education, and high-tech academic mentoring to excel in a competitive global landscape.
                        </p>
                        
                        <div class="row g-4 mb-4">
                            <div class="col-md-6">
                                <div class="card border-0 shadow-sm p-3 bg-light rounded">
                                    <div class="d-flex align-items-center gap-3">
                                        <i class="fal fa-file-certificate fs-2 text-primary"></i>
                                        <div>
                                            <h6 class="mb-0 fw-bold">ISO Certified</h6>
                                            <small class="text-muted">ISO 9001:2015 Quality</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="card border-0 shadow-sm p-3 bg-light rounded">
                                    <div class="d-flex align-items-center gap-3">
                                        <i class="fal fa-users fs-2 text-primary"></i>
                                        <div>
                                            <h6 class="mb-0 fw-bold">3+ Decades</h6>
                                            <small class="text-muted">Academic Legacy</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="about-bottom d-flex align-items-center gap-4 flex-wrap">
                            <a href="{{ route('contact') }}" class="theme-btn">Apply Now <i class="fas fa-arrow-right-long"></i></a>
                            <a href="{{ route('about.mission-vision') }}" class="theme-btn theme-btn2">Our Mission <i class="fas fa-arrow-right-long"></i></a>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-6">
                    <div class="about-right-img position-relative">
                        <img src="{{ asset('assets/img/about/about.jpg') }}" alt="Prativa Campus Building" class="rounded shadow-lg w-100 img-fluid">
                        <div class="experience-badge position-absolute bg-primary text-white p-3 rounded shadow d-flex align-items-center gap-3" style="bottom: 20px; left: 20px;">
                            <h3 class="mb-0 fw-bold text-white">35+</h3>
                            <p class="mb-0 lh-sm text-white">Years of<br>Educational Excellence</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="row mt-5 pt-5 border-top g-4">
                <div class="col-lg-4 col-md-6">
                    <div class="card border-0 shadow-sm h-100 p-4 text-center rounded">
                        <div class="icon-box mb-3 bg-light-primary text-primary mx-auto rounded-circle d-flex align-items-center justify-content-center" style="width: 70px; height: 70px;">
                            <i class="fal fa-graduation-cap fs-2"></i>
                        </div>
                        <h4 class="fw-bold mb-2">Holistic Growth</h4>
                        <p class="text-muted mb-0">We focus heavily on intellectual, physical, moral, and emotional development through integrated extra-curricular programs.</p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="card border-0 shadow-sm h-100 p-4 text-center rounded">
                        <div class="icon-box mb-3 bg-light-primary text-primary mx-auto rounded-circle d-flex align-items-center justify-content-center" style="width: 70px; height: 70px;">
                            <i class="fal fa-chalkboard-teacher fs-2"></i>
                        </div>
                        <h4 class="fw-bold mb-2">Qualified Faculty</h4>
                        <p class="text-muted mb-0">Led by distinguished educationists, industry leaders, and compassionate teachers who foster a supportive community.</p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-12">
                    <div class="card border-0 shadow-sm h-100 p-4 text-center rounded">
                        <div class="icon-box mb-3 bg-light-primary text-primary mx-auto rounded-circle d-flex align-items-center justify-content-center" style="width: 70px; height: 70px;">
                            <i class="fal fa-microscope fs-2"></i>
                        </div>
                        <h4 class="fw-bold mb-2">Modern Infrastructure</h4>
                        <p class="text-muted mb-0">From air-conditioned classrooms to state-of-the-art physics, chemistry, mathematics, and IT labs with high-speed internet.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- introduction section end -->
@endsection