<?php
$pageTitle = "About Us | B.S. Public School Meerut";
$pageDesc = "Learn about the journey of B.S. Public School, our commitment to holistic education, and the vision of Furkan Saifi.";
require_once('header.php');
?>

    <!-- Page Header -->
    <section class="section-padding text-white text-center py-5" style="background: linear-gradient(135deg, rgba(7, 37, 69, 0.9) 0%, rgba(11, 55, 100, 0.8) 100%), url('http://bsps.co.in/images_new/6.jpg') center/cover no-repeat;">
        <div class="container">
            <h1 class="display-4 fw-bold text-white"><?php echo __('about_us'); ?></h1>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb justify-content-center">
                    <li class="breadcrumb-item"><a href="index.php" class="text-white text-decoration-none"><?php echo __('home'); ?></a></li>
                    <li class="breadcrumb-item active text-warning" aria-current="page"><?php echo __('about_us'); ?></li>
                </ol>
            </nav>
        </div>
    </section>

    <section class="section-padding">
        <div class="container text-center reveal">
            <div class="section-title">
                <span class="subtitle"><?php echo __('our_journey'); ?></span>
                <h2><?php echo __('inspiring_growth'); ?></h2>
                <div class="line mx-auto"></div>
            </div>
            <div class="row justify-content-center">
                <div class="col-lg-10">
                    <p class="lead mb-4"><?php echo __('about_intro_1'); ?></p>
                    <p><?php echo __('about_intro_2'); ?></p>
                    <p><?php echo __('about_intro_3'); ?></p>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section class="section-padding bg-light">
        <div class="container">
            <div class="row g-4">
                <div class="col-md-4">
                    <div class="feature-card text-center p-5">
                        <div class="icon-box mb-4 fs-1 text-danger"><i class="fas fa-certificate pulse-animation"></i></div>
                        <h4 class="fw-bold"><?php echo __('holistic_approach'); ?></h4>
                        <p class="text-muted"><?php echo __('holistic_desc'); ?></p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="feature-card text-center p-5">
                        <div class="icon-box mb-4 fs-1 text-success"><i class="fas fa-lightbulb pulse-animation"></i></div>
                        <h4 class="fw-bold"><?php echo __('innovation'); ?></h4>
                        <p class="text-muted"><?php echo __('innovation_desc'); ?></p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="feature-card text-center p-5">
                        <div class="icon-box mb-4 fs-1 text-primary"><i class="fas fa-user-check pulse-animation"></i></div>
                        <h4 class="fw-bold"><?php echo __('integrity'); ?></h4>
                        <p class="text-muted"><?php echo __('integrity_desc'); ?></p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Leadership Messages -->
    <section class="section-padding bg-white">
        <div class="container">
            <div class="section-title text-center reveal">
                <span class="subtitle">Words of Wisdom</span>
                <h2>Messages from Leadership</h2>
                <div class="line mx-auto"></div>
            </div>

            <!-- Chairman's Message -->
            <div class="row align-items-center mb-5 reveal">
                <div class="col-lg-4 text-center">
                    <img src="images/chairman_plain.png" alt="Chairman" class="img-fluid rounded-circle shadow-sm border border-5 border-light" style="width: 250px; height: 250px; object-fit: cover; object-position: top;">
                </div>
                <div class="col-lg-8 ps-lg-5">
                    <h3 class="fw-bold text-success mb-2"><?php echo __('chairman_name'); ?></h3>
                    <h5 class="text-muted mb-4"><?php echo __('chairman'); ?></h5>
                    <p class="lead fst-italic">"<?php echo __('chairman_msg'); ?>"</p>
                </div>
            </div>

            <hr class="my-5 opacity-25">

            <!-- Secretary's Message -->
            <div class="row align-items-center flex-lg-row-reverse mb-5 reveal">
                <div class="col-lg-4 text-center">
                    <img src="images/adv abhishek giri secretory bs public School.jpeg" alt="Secretary" class="img-fluid rounded-circle shadow-sm border border-5 border-light" style="width: 250px; height: 250px; object-fit: cover;">
                </div>
                <div class="col-lg-8 pe-lg-5 text-lg-end">
                    <h3 class="fw-bold text-success mb-2"><?php echo __('secretary_name'); ?></h3>
                    <h5 class="text-muted mb-4"><?php echo __('secretary'); ?></h5>
                    <p class="lead fst-italic">"<?php echo __('secretary_msg'); ?>"</p>
                </div>
            </div>

            <hr class="my-5 opacity-25">

            <!-- Principal's Message -->
            <div class="row align-items-center reveal mb-5">
                <div class="col-lg-4 text-center">
                    <img src="http://bsps.co.in/images/2.jpg" alt="Principal" class="img-fluid rounded-circle shadow-sm border border-5 border-light" style="width: 250px; height: 250px; object-fit: cover;">
                </div>
                <div class="col-lg-8 ps-lg-5">
                    <h3 class="fw-bold text-success mb-2">Furkan Saifi</h3>
                    <h5 class="text-muted mb-4"><?php echo __('principal'); ?></h5>
                    <p class="lead fst-italic">"<?php echo __('principal_msg'); ?>"</p>
                    <p><?php echo __('principal_intro'); ?></p>
                </div>
            </div>

            <hr class="my-5 opacity-25">

            <!-- Manager Wisdom's Message -->
            <div class="row align-items-center flex-lg-row-reverse mb-5 reveal">
                <div class="col-lg-4 text-center">
                    <img src="images/MUSTUFA SAIFI  manager wisdom learning school.jpeg" alt="Manager Wisdom" class="img-fluid rounded-circle shadow-sm border border-5 border-light" style="width: 250px; height: 250px; object-fit: cover;">
                </div>
                <div class="col-lg-8 pe-lg-5 text-lg-end">
                    <h3 class="fw-bold text-success mb-2"><?php echo __('manager_wisdom_name'); ?></h3>
                    <h5 class="text-muted mb-4"><?php echo __('manager_wisdom'); ?></h5>
                    <p class="lead fst-italic">"<?php echo __('manager_wisdom_msg'); ?>"</p>
                </div>
            </div>

            <hr class="my-5 opacity-25">

            <!-- Manager BSPS's Message -->
            <div class="row align-items-center reveal">
                <div class="col-lg-4 text-center">
                    <img src="images/manager mukeem saifi bs public school.jpeg" alt="Manager BSPS" class="img-fluid rounded-circle shadow-sm border border-5 border-light" style="width: 250px; height: 250px; object-fit: cover;">
                </div>
                <div class="col-lg-8 ps-lg-5">
                    <h3 class="fw-bold text-success mb-2"><?php echo __('manager_bsps_name'); ?></h3>
                    <h5 class="text-muted mb-4"><?php echo __('manager_bsps'); ?></h5>
                    <p class="lead fst-italic">"<?php echo __('manager_bsps_msg'); ?>"</p>
                </div>
            </div>
        </div>
    </section>


<?php require_once('footer.php'); ?>
