@extends('layouts.frontend')

@section('title', 'About Us - Kidscholl Academy')

@section('content')
    <!-- Page Header -->
    <section class="page-header text-center">
        <div class="container">
            <h1 class="page-header-title">About Kidscholl Academy</h1>
            <p class="lead text-muted">A home away from home since 2012, nurturing creative young minds.</p>
        </div>
    </section>

    <!-- School Intro & History -->
    <section class="section-padding bg-white pt-0">
        <div class="container">
            <div class="row align-items-center mb-5">
                <div class="col-lg-6">
                    <span class="badge bg-danger kids-badge mb-2">Our History</span>
                    <h2 class="text-primary mb-3">School History & Journey</h2>
                    <p class="lead text-muted">Founded on the values of love, curiosity, and play-based pedagogy.</p>
                    <p>Kidscholl Academy was established in 2012 with just 20 students and a vision to make primary schooling a joyful learning experience. Over the last decade, we have expanded to two state-of-the-art campuses (Main and West Branch) and currently guide over 500+ active students.</p>
                    <p>Our curriculum represents a harmonious blend of standard academic rigor and innovative experiential learning models, letting children learn critical concepts through games, toys, interactive models, and digital systems.</p>
                </div>
                <div class="col-lg-6">
                    <img src="https://images.unsplash.com/photo-1503676260728-1c00da094a0b?auto=format&fit=crop&q=80&w=800" alt="History" class="img-fluid rounded-4 shadow border border-5 border-white">
                </div>
            </div>

            <!-- Vision & Mission -->
            <div id="vision" class="row text-center mt-5 pt-4">
                <div class="col-md-6 mb-4">
                    <div class="kids-card card p-5 border-top border-5 border-primary">
                        <div class="fs-1 text-danger mb-3"><i class="bi bi-eye-fill"></i></div>
                        <h3 class="text-primary">Our Vision</h3>
                        <p class="text-muted">To be a globally recognized center of excellence in early childhood and primary education, nurturing child curiosity and preparing confident future leaders.</p>
                    </div>
                </div>
                <div class="col-md-6 mb-4">
                    <div class="kids-card card p-5 border-top border-5 border-secondary">
                        <div class="fs-1 text-success mb-3"><i class="bi bi-shield-fill-check"></i></div>
                        <h3 class="text-secondary">Our Mission</h3>
                        <p class="text-muted">To provide a safe, active, and inspiring environment that empowers students to reach their peak intellectual, social, and emotional potential with parental partnership.</p>
                    </div>
                </div>
            </div>

            <!-- Core Values -->
            <div class="row mt-5 pt-4 text-center">
                <h2 class="text-primary mb-5">Our Core Values</h2>
                <div class="col-6 col-md-3 mb-4">
                    <div class="p-4 rounded-4 bg-light border border-dashed border-primary">
                        <div class="fs-2 text-danger mb-2"><i class="bi bi-heart-fill"></i></div>
                        <h5 class="text-dark">Compassion</h5>
                        <p class="text-muted small mb-0">Treating everyone with warmth and respect.</p>
                    </div>
                </div>
                <div class="col-6 col-md-3 mb-4">
                    <div class="p-4 rounded-4 bg-light border border-dashed border-success">
                        <div class="fs-2 text-success mb-2"><i class="bi bi-lightbulb-fill"></i></div>
                        <h5 class="text-dark">Curiosity</h5>
                        <p class="text-muted small mb-0">Encouraging questioning and exploration.</p>
                    </div>
                </div>
                <div class="col-6 col-md-3 mb-4">
                    <div class="p-4 rounded-4 bg-light border border-dashed border-warning">
                        <div class="fs-2 text-warning mb-2"><i class="bi bi-people-fill"></i></div>
                        <h5 class="text-dark">Collaboration</h5>
                        <p class="text-muted small mb-0">Building bonds with students & parents.</p>
                    </div>
                </div>
                <div class="col-6 col-md-3 mb-4">
                    <div class="p-4 rounded-4 bg-light border border-dashed border-info">
                        <div class="fs-2 text-info mb-2"><i class="bi bi-shield-fill-exclamation"></i></div>
                        <h5 class="text-dark">Integrity</h5>
                        <p class="text-muted small mb-0">Doing what is right, honest, and ethical.</p>
                    </div>
                </div>
            </div>

            <!-- Infrastructure & Achievements -->
            <div class="row align-items-center mt-5 pt-5">
                <div class="col-lg-6 mb-4 mb-lg-0 order-lg-2">
                    <span class="badge bg-success kids-badge mb-2">Achievements & Facilities</span>
                    <h2 class="text-primary mb-3">Premium Infrastructure</h2>
                    <p class="lead">Best-in-class classrooms, laboratories, and green playgrounds.</p>
                    <ul class="list-unstyled">
                        <li class="mb-2"><i class="bi bi-patch-check-fill text-success me-2"></i> Smart Interactive Classrooms (Audio-Visual Enabled)</li>
                        <li class="mb-2"><i class="bi bi-patch-check-fill text-success me-2"></i> Clean and Hygienic Montessori Activity Rooms</li>
                        <li class="mb-2"><i class="bi bi-patch-check-fill text-success me-2"></i> Extensive Children Play Area & Indoor Sports Complex</li>
                        <li class="mb-2"><i class="bi bi-patch-check-fill text-success me-2"></i> Smart Computer Labs & Junior Library</li>
                        <li class="mb-2"><i class="bi bi-patch-check-fill text-success me-2"></i> GPS Tracked safe school transport fleet</li>
                    </ul>
                    <div class="alert alert-success mt-4">
                        <i class="bi bi-trophy-fill text-warning me-2 fs-5"></i> <strong>2025 Award Winner:</strong> Named "Best Primary School for Creative Pedagogy" by the Regional Education Board.
                    </div>
                </div>
                <div class="col-lg-6 order-lg-1">
                    <img src="https://images.unsplash.com/photo-1577896851231-70ef18881754?auto=format&fit=crop&q=80&w=800" alt="Infrastructure" class="img-fluid rounded-4 shadow border border-5 border-white">
                </div>
            </div>
        </div>
    </section>
@endsection