<?php
$pageTitle = "B.S. Public School | Nurturing Minds, Shaping Futures";
$pageDesc = "B.S. Public School Meerut - Providing quality education, vocational training, and skills for a self-reliant future. Admission Open for 2026-27.";
require_once('header.php');
require_once('db.php');

// Fetch Sliders
$sliders = [];
if ($db_connected) {
    // Auto-import Gallery Images from 'images/function/' if table is empty
    $check_gallery = $conn->query("SELECT id FROM gallery LIMIT 1");
    if ($check_gallery && $check_gallery->num_rows == 0) {
        $source_dir = 'images/function/';
        $dest_dir = 'uploads/gallery/';
        if (!file_exists($dest_dir)) mkdir($dest_dir, 0777, true);
        
        $images = glob($source_dir . "*.{jpg,jpeg,png,gif,webp,jpeg}", GLOB_BRACE);
        if ($images) {
            foreach ($images as $img_path) {
                $filename = basename($img_path);
                $new_filename = time() . '_' . $filename;
                if (copy($img_path, $dest_dir . $new_filename)) {
                    $stmt = $conn->prepare("INSERT INTO gallery (image, heading) VALUES (?, 'Campus Event')");
                    $stmt->bind_param("s", $new_filename);
                    $stmt->execute();
                }
            }
        }
    }

    $slider_res = $conn->query("SELECT * FROM sliders WHERE status = 1 ORDER BY id DESC");
    if ($slider_res) {
        while($row = $slider_res->fetch_assoc()) {
            $sliders[] = $row;
        }
    }

    // Fetch Gallery (All images for carousel)
    $gallery_res = $conn->query("SELECT * FROM gallery WHERE status = 1 ORDER BY id DESC");
    if ($gallery_res) {
        while($row = $gallery_res->fetch_assoc()) {
            $gallery_items[] = $row;
        }
    }

    // Fetch Board Members
    $board_members = [];
    $bm_res = $conn->query("SELECT * FROM board_members WHERE status = 1 ORDER BY order_num ASC, id ASC");
    if ($bm_res && $bm_res->num_rows > 0) {
        while($row = $bm_res->fetch_assoc()) {
            $board_members[] = $row;
        }
    }

    // Fetch Events Gallery (5 items for mosaic)
    $event_items = [];
    $ev_res = $conn->query("SELECT * FROM event_gallery WHERE status = 1 ORDER BY order_num ASC, id ASC LIMIT 5");
    if ($ev_res && $ev_res->num_rows > 0) {
        while($row = $ev_res->fetch_assoc()) {
            $event_items[] = $row;
        }
    }

    // Fetch Director's Desk
    $director_data = null;
    $dd_res = $conn->query("SELECT * FROM director_desk LIMIT 1");
    if ($dd_res && $dd_res->num_rows > 0) {
        $director_data = $dd_res->fetch_assoc();
    }

    // Fetch Our Schools (Campuses)
    $our_schools = [];
    $sc_res = $conn->query("SELECT * FROM our_schools WHERE status = 1 ORDER BY order_num ASC, id ASC");
    if ($sc_res && $sc_res->num_rows > 0) {
        while($row = $sc_res->fetch_assoc()) {
            $our_schools[] = $row;
        }
    }
} else {
    $gallery_items = [];
    $board_members = [];
    $event_items = [];
    $director_data = null;
    $our_schools = [];
}

// Fallback defaults if tables empty or not connected
if (empty($board_members)) {
    $board_members = [
        ['name' => 'Dr. Furkan Saifi', 'designation' => 'Secretary', 'image' => 'secretary_furkan.webp'],
        ['name' => 'Smt. Sashi Sagar', 'designation' => 'Registrar', 'image' => 'president_sashi.webp'],
        ['name' => 'Dr. Vinod Kothari', 'designation' => 'Exam Controller', 'image' => 'exam_controller_vinod.webp'],
        ['name' => 'Charan Singh', 'designation' => 'President', 'image' => 'president_charan.webp'],
        ['name' => 'Sanjay Kumar Verma', 'designation' => 'Joint Secretary', 'image' => 'joint_secretary_sanjay.webp'],
        ['name' => 'Arshi Saifi', 'designation' => 'Board Member', 'image' => 'board_member_arshi.webp'],
        ['name' => 'Adv. Abhishek Giri', 'designation' => 'Legal Advisor', 'image' => 'adv_abhishek.jpg'],
    ];
}

if (empty($event_items)) {
    $event_items = [
        ['title' => 'IBVTE Event 1', 'image' => 'gov_gallery_1.webp'],
        ['title' => 'IBVTE Event 2', 'image' => 'gov_gallery_2.webp'],
        ['title' => 'IBVTE Event 3', 'image' => 'gov_gallery_3.webp'],
        ['title' => 'IBVTE Event 4', 'image' => 'gov_gallery_4.webp'],
        ['title' => 'IBVTE Event 5', 'image' => 'gov_gallery_5.webp'],
    ];
}

if (!$director_data) {
    $director_data = [
        'badge' => "DIRECTOR'S DESK",
        'title' => "From Director's Desk",
        'subtitle' => "Leadership vision and message for holistic education.",
        'director_name' => "Dr. Furkan Saifi",
        'designation' => "Principle",
        'image' => "secretary_furkan.webp",
        'quote' => "BS Public School & AH International School is committed to transforming education through modern curriculum, moral discipline, and holistic development to build real-world careers and empower students for future success.",
        'stamp_image' => "images/logo_bsps.png"
    ];
}

if (empty($our_schools)) {
    $our_schools = [
        [
            'id' => 1,
            'name' => 'B.S. Public School',
            'tagline' => 'CBSE Pattern • Foundational Excellence (Nursery to 10th)',
            'description' => 'Empowering young minds through comprehensive curriculum, disciplined environment, modern laboratories, and value-based education.',
            'badge' => 'Main Campus • Estd. 2005',
            'image' => 'bs_public_school.webp',
            'explore_link' => 'the-school.php',
            'admission_link' => 'admission-enquiry.php',
            'order_num' => 1
        ],
        [
            'id' => 2,
            'name' => 'A.H. International School',
            'tagline' => 'World-Class Pedagogy • Smart Interactive Digital Campus',
            'description' => 'State-of-the-art educational infrastructure cultivating global competence, critical thinking, sports training, and creative innovation.',
            'badge' => 'International Standard • Advanced Campus',
            'image' => 'ah_international_school.webp',
            'explore_link' => 'facilities.php',
            'admission_link' => 'admission-enquiry.php',
            'order_num' => 2
        ]
    ];
}
?>

    <!-- Hero Slider (Dynamic) -->
    <div id="heroCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel">
        <div class="carousel-inner">
            <?php if(empty($sliders)): ?>
            <!-- Fallback Static Sliders if DB is empty -->
            <div class="carousel-item active" style="background-image: url('http://bsps.co.in/images_new/4.jpg');">
                <div class="carousel-overlay"></div>
                <div class="container h-100 position-relative">
                    <div class="carousel-caption">
                        <span class="subtitle"><?php echo __('academic_excellence'); ?></span>
                        <h2 class="display-2 fw-bold"><?php echo __('nurturing_minds'); ?></h2>
                        <p class="lead"><?php echo __('hero_desc'); ?></p>
                        <a href="about-us.php" class="btn btn-admission py-3 px-5 fs-5 mt-3"><?php echo __('discover_school'); ?></a>
                    </div>
                </div>
            </div>
            <?php else: ?>
                <?php foreach($sliders as $key => $slide): ?>
                <div class="carousel-item <?php echo $key == 0 ? 'active' : ''; ?>" style="background-image: url('uploads/sliders/<?php echo $slide['image']; ?>');">
                    <div class="carousel-overlay"></div>
                    <div class="container h-100 position-relative">
                        <div class="carousel-caption">
                            <span class="subtitle"><?php echo htmlspecialchars($slide['subtitle']); ?></span>
                            <h2 class="display-2 fw-bold"><?php echo nl2br(htmlspecialchars($slide['title'])); ?></h2>
                            <p class="lead"><?php echo htmlspecialchars($slide['description']); ?></p>
                            <?php if($slide['link']): ?>
                            <a href="<?php echo $slide['link']; ?>" class="btn btn-admission py-3 px-5 fs-5 mt-3"><?php echo __('about_us'); ?></a>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
                <?php endforeach; ?>
            <?php endif; ?>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#heroCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon"></span>
        </button>
    </div>

    <!-- Dynamic News & Info Section -->
    <section id="news" class="py-4 bg-dark text-white overflow-hidden" style="background: var(--navy-deep) !important; border-bottom: 2px solid var(--accent-color);">
        <div class="container-fluid">
            <div class="ticker-wrapper d-flex align-items-center">
                <div class="ticker-badge px-4 py-2 fw-bold text-nowrap rounded-end me-3"><?php echo __('latest_news'); ?></div>
                <marquee behavior="scroll" direction="left" class="fs-5">
                    🚀 <strong><?php echo __('news_1'); ?></strong> 
                    | 💡 <strong><?php echo __('news_2'); ?></strong> 
                </marquee>
            </div>
        </div>
    </section>

    <!-- Leadership & Director Desk Section (Exact Match to Reference) -->
    <section class="leadership-showcase py-5 bg-light">
        <div class="container">
            <div class="row g-4 align-items-stretch">

                <!-- BOX 1: Hon'ble Commission / Board Leadership -->
                <div class="col-lg-3 col-md-6">
                    <div class="board-box h-100 rounded-4 shadow-sm bg-white p-4 d-flex flex-column" style="min-height:460px;">
                        <div class="box-header mb-3 text-center">
                            <span class="badge bg-warning text-dark mb-2">HON'BLE BOARD MEMBERS</span>
                            <h4 class="fw-bold mb-1">Board Leadership</h4>
                            <p class="small text-muted">Core leadership directing the vision of BSPS.</p>
                        </div>
                        <!-- ECI Style Vertical Scrolling Marquee of Leaders -->
                        <div class="commission-marquee-wrap flex-grow-1" style="height: 330px; overflow: hidden; position: relative;">
                            <div class="commission-marquee-inner d-flex flex-column" style="gap: 15px;">
                                <?php 
                                // Duplicate array once for seamless continuous loop
                                $loop_members = array_merge($board_members, $board_members);
                                foreach($loop_members as $m): 
                                    $img_file = $m['image'];
                                    $m_img = (str_starts_with($img_file, 'http') || str_starts_with($img_file, 'images/'))
                                        ? $img_file
                                        : (file_exists('uploads/board/' . $img_file) ? 'uploads/board/' . $img_file : 'images/' . $img_file);
                                    $m_ver = file_exists($m_img) ? filemtime($m_img) : time();
                                ?>
                                <div class="eci-card text-center py-2" style="background: #fff; border-bottom: 1px dashed #eee;">
                                    <div class="eci-photo-frame">
                                        <img src="<?php echo htmlspecialchars($m_img) . '?v=' . $m_ver; ?>" alt="<?php echo htmlspecialchars($m['name']); ?>" onerror="this.src='https://ui-avatars.com/api/?name=<?php echo urlencode($m['name']); ?>&background=0b3b60&color=fff';">
                                    </div>
                                    <h5 class="fw-bold mb-0 mt-2" style="font-size: 0.98rem; color: #0b2545; font-family: 'Inter', sans-serif; letter-spacing: 0.2px;"><?php echo htmlspecialchars($m['name']); ?></h5>
                                    <span class="d-block text-muted" style="font-size: 0.76rem; font-weight: 700; text-transform: uppercase; color: #d90429 !important;"><?php echo htmlspecialchars($m['designation']); ?></span>
                                </div>
                                <?php endforeach; ?>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- BOX 2: Our Events Gallery -->
                <div class="col-lg-5 col-md-6">
                    <div class="board-box h-100 rounded-4 shadow-sm bg-white p-4 d-flex flex-column" style="min-height:460px;">
                        <div class="box-header mb-3 text-center">
                            <span class="badge bg-primary text-white mb-2">OUR EVENTS</span>
                            <h4 class="fw-bold mb-1">Our Events Gallery</h4>
                        </div>
                        <!-- Mosaic-Style Gallery of 5 Event/Award images -->
                        <div class="gov-gallery-grid flex-grow-1" style="height: 330px; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(6, 1fr); gap: 8px;">
                            <?php
                            $grid_styles = [
                                0 => 'grid-column: span 3; grid-row: span 3;',
                                1 => 'grid-column: span 3; grid-row: span 2;',
                                2 => 'grid-column: span 3; grid-row: span 2;',
                                3 => 'grid-column: span 3; grid-row: span 3;',
                                4 => 'grid-column: span 3; grid-row: span 2;',
                            ];
                            foreach($event_items as $idx => $ev):
                                $ev_file = $ev['image'];
                                $ev_img = (str_starts_with($ev_file, 'http') || str_starts_with($ev_file, 'images/'))
                                    ? $ev_file
                                    : (file_exists('uploads/events/' . $ev_file) ? 'uploads/events/' . $ev_file : 'images/' . $ev_file);
                                $style = $grid_styles[$idx] ?? 'grid-column: span 3; grid-row: span 2;';
                            ?>
                            <div class="gallery-mosaic-item rounded-3 overflow-hidden shadow-sm" style="<?php echo $style; ?> cursor: pointer; position: relative; border: 2px solid #fd7e14;">
                                <img src="<?php echo htmlspecialchars($ev_img); ?>" class="w-100 h-100 object-fit-cover" alt="<?php echo htmlspecialchars($ev['title']); ?>" style="transition: transform 0.4s ease;">
                            </div>
                            <?php endforeach; ?>
                        </div>
                    </div>
                </div>

                <!-- BOX 3: Director's Desk -->
                <div class="col-lg-4 col-md-12">
                    <div class="board-box h-100 rounded-4 shadow-sm bg-white p-4 d-flex flex-column" style="min-height:460px;">
                        <div class="box-header mb-3">
                            <span class="badge bg-danger text-white mb-2"><?php echo htmlspecialchars($director_data['badge']); ?></span>
                            <h4 class="fw-bold mb-2"><?php echo htmlspecialchars($director_data['title']); ?></h4>
                            <p class="small text-muted"><?php echo htmlspecialchars($director_data['subtitle']); ?></p>
                        </div>
                        <div class="director-photo-container text-center mb-3">
                            <div class="director-box overflow-hidden rounded-4 mb-2 mx-auto" style="position: relative; max-width: 300px; height: 215px; border: 2px solid #e2e8f0;">
                                <?php 
                                $d_file = $director_data['image'];
                                $d_img = (str_starts_with($d_file, 'http') || str_starts_with($d_file, 'images/'))
                                    ? $d_file
                                    : (file_exists('uploads/director/' . $d_file) ? 'uploads/director/' . $d_file : 'images/' . $d_file);
                                $d_ver = file_exists($d_img) ? filemtime($d_img) : time();
                                ?>
                                <img src="<?php echo htmlspecialchars($d_img) . '?v=' . $d_ver; ?>" class="img-fluid rounded-4 w-100 h-100" style="object-fit: cover; object-position: center center;" alt="<?php echo htmlspecialchars($director_data['director_name']); ?>" onerror="this.src='https://ibvte.com/assets/images/secretary_furkan.webp';">
                            </div>
                            <div class="mt-2">
                                <span class="d-block text-muted small fw-semibold"><?php echo htmlspecialchars($director_data['designation']); ?></span>
                                <h6 class="fw-bold text-dark mb-0 fs-5"><?php echo htmlspecialchars($director_data['director_name']); ?></h6>
                            </div>
                        </div>
                        <div class="flex-grow-1 d-flex flex-column justify-content-between">
                            <div class="row align-items-center">
                                <div class="col-8">
                                    <div class="director-quote-container" style="position: relative; min-height: 105px; padding: 0 5px; text-align: justify;">
                                        <span style="font-size: 2.2rem; color: #0d6efd; line-height: 0; font-family: Georgia, serif; position: absolute; top: -5px; left: -2px; opacity: 0.35;">&ldquo;</span>
                                        <span style="font-style: italic; font-weight: 700; color: #0f172a; font-size: 0.86rem; line-height: 1.6; display: inline; padding-left: 14px; font-family: 'Outfit', sans-serif;">
                                            <?php echo htmlspecialchars($director_data['quote']); ?>
                                        </span>
                                        <span style="font-size: 2.2rem; color: #0d6efd; line-height: 0; font-family: Georgia, serif; position: relative; bottom: -12px; opacity: 0.35;">&rdquo;</span>
                                    </div>
                                </div>
                                <div class="col-4 text-center">
                                    <img src="<?php echo htmlspecialchars($director_data['stamp_image'] ?? 'images/logo_bsps.png'); ?>" alt="School Seal" class="img-fluid" style="max-height: 95px; object-fit: contain;">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div><!-- /.row -->
        </div><!-- /.container -->
    </section>

    <!-- Leadership Section CSS -->
    <style>
    @keyframes borderRotate {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    .eci-photo-frame {
        position: relative;
        width: 130px;
        height: 140px;
        margin: 15px auto 10px;
        overflow: hidden;
        border-radius: 8px;
        padding: 3px;
        background: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1;
    }
    .eci-photo-frame::before {
        content: '';
        position: absolute;
        width: 200%;
        height: 200%;
        top: -50%;
        left: -50%;
        background: conic-gradient(
            #0d6efd,
            #d90429,
            #ffc107,
            #0d6efd
        );
        animation: borderRotate 4s linear infinite;
        z-index: -1;
    }
    .eci-photo-frame::after {
        content: '';
        position: absolute;
        top: 3px;
        left: 3px;
        right: 3px;
        bottom: 3px;
        background: #fff;
        z-index: 0;
        border-radius: 5px;
    }
    .eci-photo-frame img {
        position: relative;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
        z-index: 2;
        border-radius: 5px;
        border: none;
        box-shadow: none;
    }
    .commission-marquee-wrap {
        position: relative;
        height: 330px;
        overflow: hidden;
    }
    .commission-marquee-inner {
        display: flex;
        flex-direction: column;
        animation: commissionScrollUp 42s linear infinite;
    }
    .commission-marquee-wrap:hover .commission-marquee-inner {
        animation-play-state: paused;
    }
    @keyframes commissionScrollUp {
        0%   { transform: translateY(0); }
        100% { transform: translateY(-50%); }
    }
    .gallery-mosaic-item img {
        transition: transform 0.4s ease;
    }
    .gallery-mosaic-item:hover img {
        transform: scale(1.08);
    }
    .board-box {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        border: 1px solid #edf2f7;
    }
    .board-box:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 28px rgba(0, 35, 70, 0.09) !important;
    }
    </style>

    <!-- ==============================================
         OUR INSTITUTIONS & CAMPUSES (DAIS INTERACTIVE SHOWCASE)
         ============================================== -->
    <section id="our-schools-showcase" class="py-5 position-relative" style="background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%); border-top: 1px solid #edf2f7; border-bottom: 1px solid #edf2f7;">
        <div class="container py-3">
            <!-- Section Header -->
            <div class="row align-items-center mb-4">
                <div class="col-lg-8">
                    <span class="badge text-uppercase px-3 py-2 fw-bold mb-2 shadow-sm" style="background: #e0e7ff; color: #1e3a8a; letter-spacing: 1.5px; font-size: 0.78rem;">
                        <i class="fas fa-university text-warning me-2"></i> Our Institutions &amp; Campuses
                    </span>
                    <h2 class="display-6 fw-bold text-dark mb-2" style="font-family: 'Cinzel', serif;">
                        Centers of Academic &amp; Holistic Excellence
                    </h2>
                    <p class="text-muted lead fs-6 mb-0">
                        Select or hover over our institutions below to explore each campus, infrastructure, and academic atmosphere.
                    </p>
                </div>
                <div class="col-lg-4 text-lg-end mt-3 mt-lg-0">
                    <a href="admission-enquiry.php" class="btn btn-warning px-4 py-2 fw-bold text-dark rounded-pill shadow-sm">
                        <i class="fas fa-user-graduate me-2"></i> Admissions Open 2026-27
                    </a>
                </div>
            </div>

            <!-- Interactive Showcase Row -->
            <div class="row g-4 align-items-center">
                <!-- Left Column: School Interactive Selector (Tabs) -->
                <div class="col-lg-5 col-md-12">
                    <div class="school-tabs-container d-flex flex-column gap-3">
                        <?php foreach($our_schools as $idx => $school): ?>
                            <?php 
                            $sc_img = (str_starts_with($school['image'], 'http') || str_starts_with($school['image'], 'images/'))
                                ? $school['image']
                                : 'uploads/campuses/' . $school['image'];
                            $sc_ver = file_exists($sc_img) ? filemtime($sc_img) : time();
                            $sc_full_img = htmlspecialchars($sc_img) . '?v=' . $sc_ver;
                            ?>
                            <div class="school-tab-card p-4 rounded-4 <?php echo $idx === 0 ? 'active' : ''; ?>"
                                 data-school-index="<?php echo $idx; ?>"
                                 data-school-name="<?php echo htmlspecialchars($school['name']); ?>"
                                 data-school-badge="<?php echo htmlspecialchars($school['badge']); ?>"
                                 data-school-tagline="<?php echo htmlspecialchars($school['tagline']); ?>"
                                 data-school-desc="<?php echo htmlspecialchars($school['description']); ?>"
                                 data-school-img="<?php echo $sc_full_img; ?>"
                                 data-explore-link="<?php echo htmlspecialchars($school['explore_link'] ?? 'the-school.php'); ?>"
                                 data-admission-link="<?php echo htmlspecialchars($school['admission_link'] ?? 'admission-enquiry.php'); ?>">
                                <div class="d-flex align-items-center justify-content-between">
                                    <div class="flex-grow-1 pe-3">
                                        <div class="d-flex align-items-center gap-2 mb-2">
                                            <span class="school-tab-badge badge px-3 py-1 rounded-pill small fw-semibold">
                                                <?php echo htmlspecialchars($school['badge']); ?>
                                            </span>
                                            <span class="school-active-indicator small fw-bold">Active Campus</span>
                                        </div>
                                        <h3 class="school-tab-title mb-2">
                                            <?php echo htmlspecialchars($school['name']); ?>
                                        </h3>
                                        <p class="school-tab-tagline mb-0 small">
                                            <?php echo htmlspecialchars($school['tagline']); ?>
                                        </p>
                                    </div>
                                    <div class="school-tab-arrow d-flex align-items-center justify-content-center rounded-circle">
                                        <i class="fas fa-arrow-right"></i>
                                    </div>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                </div>

                <!-- Right Column: Grand Showcase Card (DAIS Style) -->
                <div class="col-lg-7 col-md-12">
                    <?php 
                    $first_img = (str_starts_with($our_schools[0]['image'], 'http') || str_starts_with($our_schools[0]['image'], 'images/'))
                        ? $our_schools[0]['image']
                        : 'uploads/campuses/' . $our_schools[0]['image'];
                    $first_ver = file_exists($first_img) ? filemtime($first_img) : time();
                    $first_full_img = htmlspecialchars($first_img) . '?v=' . $first_ver;
                    ?>
                    <div class="school-showcase-card position-relative rounded-4 overflow-hidden shadow-lg" id="schoolShowcaseCard">
                        <!-- Campus Background Image -->
                        <div class="showcase-img-container position-relative overflow-hidden" style="height: 490px;">
                            <img id="showcaseImage" 
                                 src="<?php echo $first_full_img; ?>" 
                                 alt="<?php echo htmlspecialchars($our_schools[0]['name']); ?>" 
                                 class="w-100 h-100 object-fit-cover showcase-main-photo">
                            <div class="showcase-gradient-overlay"></div>

                            <!-- Top Floating Badge -->
                            <div class="position-absolute top-0 start-0 m-3 m-md-4 z-2">
                                <span class="badge showcase-pill-badge px-3 py-2 rounded-pill shadow-sm d-inline-flex align-items-center gap-2" id="showcaseBadge">
                                    <i class="fas fa-certificate text-warning"></i>
                                    <span><?php echo htmlspecialchars($our_schools[0]['badge']); ?></span>
                                </span>
                            </div>

                            <!-- Top Right Quick Info -->
                            <div class="position-absolute top-0 end-0 m-3 m-md-4 z-2 d-none d-sm-block">
                                <span class="badge bg-white text-dark px-3 py-2 rounded-pill shadow-sm fw-bold">
                                    <i class="fas fa-check-circle text-success me-1"></i> Recognized &amp; Affiliated
                                </span>
                            </div>

                            <!-- Bottom Glass Content Panel -->
                            <div class="showcase-bottom-panel position-absolute bottom-0 start-0 end-0 p-3 p-md-4 z-2">
                                <div class="showcase-glass-card p-3 p-md-4 rounded-4 shadow-sm">
                                    <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-2">
                                        <div>
                                            <h4 class="text-white fw-bold mb-1" id="showcaseTitle" style="font-family: 'Cinzel', serif;">
                                                <?php echo htmlspecialchars($our_schools[0]['name']); ?>
                                            </h4>
                                            <p class="text-white-50 small mb-0" id="showcaseTagline">
                                                <?php echo htmlspecialchars($our_schools[0]['tagline']); ?>
                                            </p>
                                        </div>
                                        <div class="d-flex align-items-center gap-2">
                                            <a href="<?php echo htmlspecialchars($our_schools[0]['explore_link'] ?? 'the-school.php'); ?>" 
                                               id="showcaseExploreBtn" 
                                               class="btn btn-sm btn-outline-light rounded-pill px-3 py-2 fw-semibold">
                                                <i class="fas fa-compass me-1"></i> Explore Campus
                                            </a>
                                            <a href="<?php echo htmlspecialchars($our_schools[0]['admission_link'] ?? 'admission-enquiry.php'); ?>" 
                                               id="showcaseApplyBtn" 
                                               class="btn btn-sm btn-warning rounded-pill px-3 py-2 fw-bold text-dark shadow-sm">
                                                <i class="fas fa-paper-plane me-1"></i> Apply Now
                                            </a>
                                        </div>
                                    </div>
                                    <p class="text-light small mb-0 d-none d-md-block" id="showcaseDesc" style="opacity: 0.92; line-height: 1.55;">
                                        <?php echo htmlspecialchars($our_schools[0]['description']); ?>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Our Schools Showcase Styles & Script -->
    <style>
    .school-tab-card {
        background: #ffffff;
        border: 2px solid #e2e8f0;
        border-left: 6px solid transparent;
        cursor: pointer;
        position: relative;
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        box-shadow: 0 4px 14px rgba(0,0,0,0.03);
    }
    .school-tab-card:hover {
        border-color: #f5a623;
        border-left: 6px solid #f5a623;
        transform: translateX(6px);
        box-shadow: 0 10px 25px rgba(245, 166, 35, 0.12);
    }
    .school-tab-card.active {
        background: #ffffff;
        border-color: #f5a623;
        border-left: 6px solid #f5a623;
        transform: translateX(8px);
        box-shadow: 0 14px 32px rgba(11, 59, 96, 0.12);
    }
    .school-tab-card .school-tab-title {
        font-family: 'Cinzel', serif;
        font-weight: 700;
        font-size: 1.6rem;
        color: #0b3b60;
        transition: color 0.3s ease;
    }
    .school-tab-card:hover .school-tab-title,
    .school-tab-card.active .school-tab-title {
        color: #b45309; /* Rich golden amber */
    }
    .school-tab-card .school-tab-badge {
        background: #f1f5f9;
        color: #475569;
        transition: all 0.3s ease;
    }
    .school-tab-card.active .school-tab-badge {
        background: #fef3c7;
        color: #92400e;
    }
    .school-tab-card .school-active-indicator {
        display: none;
        color: #16a34a;
        font-size: 0.75rem;
    }
    .school-tab-card.active .school-active-indicator {
        display: inline-block;
    }
    .school-tab-card .school-tab-tagline {
        color: #64748b;
        line-height: 1.5;
        transition: color 0.3s ease;
    }
    .school-tab-card.active .school-tab-tagline {
        color: #1e293b;
        font-weight: 500;
    }
    .school-tab-card .school-tab-arrow {
        width: 42px;
        height: 42px;
        background: #f1f5f9;
        color: #94a3b8;
        transition: all 0.3s ease;
        flex-shrink: 0;
        font-size: 1rem;
    }
    .school-tab-card:hover .school-tab-arrow,
    .school-tab-card.active .school-tab-arrow {
        background: #f5a623;
        color: #ffffff;
        transform: scale(1.08) translateX(2px);
    }

    /* Right Showcase Box */
    .school-showcase-card {
        border: 4px solid #ffffff;
        border-radius: 24px;
        background: #0b3b60;
    }
    .showcase-gradient-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(7, 37, 69, 0.25) 0%, rgba(7, 37, 69, 0.05) 40%, rgba(7, 37, 69, 0.92) 100%);
        pointer-events: none;
        z-index: 1;
    }
    .showcase-pill-badge {
        background: rgba(11, 59, 96, 0.88);
        backdrop-filter: blur(8px);
        color: #ffffff;
        border: 1px solid rgba(255,255,255,0.25);
        font-size: 0.88rem;
    }
    .showcase-glass-card {
        background: rgba(11, 59, 96, 0.72);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }
    .showcase-main-photo {
        transition: opacity 0.35s ease, transform 0.45s ease;
    }
    .showcase-main-photo.fade-out {
        opacity: 0.15;
        transform: scale(1.03);
    }
    </style>

    <script>
    document.addEventListener('DOMContentLoaded', function() {
        const tabs = document.querySelectorAll('.school-tab-card');
        const photo = document.getElementById('showcaseImage');
        const title = document.getElementById('showcaseTitle');
        const tagline = document.getElementById('showcaseTagline');
        const desc = document.getElementById('showcaseDesc');
        const badge = document.getElementById('showcaseBadge');
        const exploreBtn = document.getElementById('showcaseExploreBtn');
        const applyBtn = document.getElementById('showcaseApplyBtn');

        function switchSchool(tab) {
            if (tab.classList.contains('active')) return;

            tabs.forEach(t => t.classList.remove('active'));
            tab.classList.add('active');

            const sName = tab.getAttribute('data-school-name');
            const sBadge = tab.getAttribute('data-school-badge');
            const sTagline = tab.getAttribute('data-school-tagline');
            const sDesc = tab.getAttribute('data-school-desc');
            const sImg = tab.getAttribute('data-school-img');
            const sExplore = tab.getAttribute('data-explore-link');
            const sAdmission = tab.getAttribute('data-admission-link');

            // Cross-fade photo
            if (photo) {
                photo.classList.add('fade-out');
                setTimeout(() => {
                    photo.src = sImg;
                    photo.alt = sName;
                    photo.onload = () => {
                        photo.classList.remove('fade-out');
                    };
                    // In case browser served instantly from cache
                    setTimeout(() => photo.classList.remove('fade-out'), 60);
                }, 160);
            }

            if (title) title.innerText = sName;
            if (tagline) tagline.innerText = sTagline;
            if (desc) desc.innerText = sDesc;
            if (badge) {
                const span = badge.querySelector('span');
                if (span) span.innerText = sBadge;
            }
            if (exploreBtn) exploreBtn.href = sExplore;
            if (applyBtn) applyBtn.href = sAdmission;
        }

        tabs.forEach(tab => {
            // Hover interaction
            tab.addEventListener('mouseenter', function() {
                switchSchool(this);
            });
            // Tap/click interaction
            tab.addEventListener('click', function() {
                switchSchool(this);
            });
        });
    });
    </script>

    <!-- Interactive Features Section -->
    <section class="section-padding bg-light position-relative overflow-hidden">
        <div class="container">
            <div class="section-title text-center reveal">
                <span class="subtitle"><?php echo __('why_stand_out'); ?></span>
                <h2><?php echo __('excellence_step'); ?></h2>
                <div class="line mx-auto"></div>
            </div>
            <div class="row g-4 mt-5 text-center">
                <div class="col-lg-3 col-md-6 reveal">
                    <div class="feature-card p-5 bg-white border-0 shadow-sm hover-up">
                        <div class="icon-box mb-4 fs-1 text-success"><i class="fas fa-graduation-cap pulse-animation"></i></div>
                        <h4 class="fw-bold">1500+</h4>
                        <p class="text-muted"><?php echo __('students_graduated'); ?></p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 reveal">
                    <div class="feature-card p-5 bg-white border-0 shadow-sm hover-up">
                        <div class="icon-box mb-4 fs-1 text-primary"><i class="fas fa-laptop-code pulse-animation"></i></div>
                        <h4 class="fw-bold"><?php echo __('modern_labs'); ?></h4>
                        <p class="text-muted"><?php echo __('tech_learning'); ?></p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 reveal">
                    <div class="feature-card p-5 bg-white border-0 shadow-sm hover-up">
                        <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 __('skill_certs'); ?></h4>
                        <p class="text-muted"><?php echo __('govt_recognized'); ?></p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 reveal">
                    <div class="feature-card p-5 bg-white border-0 shadow-sm hover-up">
                        <div class="icon-box mb-4 fs-1 text-warning"><i class="fas fa-heart pulse-animation"></i></div>
                        <h4 class="fw-bold">100%</h4>
                        <p class="text-muted"><?php echo __('student_support'); ?></p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Purpose & Achievement Section -->
    <section class="section-padding bg-white overflow-hidden">
        <div class="container">
            <!-- Constituency Banner -->
            <div class="row mb-5 justify-content-center">
                <div class="col-lg-10">
                    <div class="constituency-banner d-flex align-items-center shadow-lg rounded-4 overflow-hidden bg-white" style="border: 2px solid var(--accent-color);">
                        <div class="flex-grow-1 p-4 p-md-5">
                            <?php 
                            $const_parts = explode(':-', __('constituency'));
                            $const_title = trim($const_parts[0]);
                            $const_val = isset($const_parts[1]) ? trim($const_parts[1]) : '';
                            ?>
                            <h2 class="display-6 fw-bold mb-0 text-primary-dark"><?php echo $const_title; ?> <?php if($const_val): ?>:- <span style="color: var(--accent-color);"><?php echo $const_val; ?></span><?php endif; ?></h2>
                        </div>
                        <div class="d-none d-md-block h-100" style="width: 40%;">
                            <img src="http://bsps.co.in/images_new/bsstc/1.jpg" alt="Meerut Landmark" class="img-fluid h-100 w-100" style="object-fit: cover;">
                        </div>
                    </div>
                </div>
            </div>

            <div class="row align-items-center mt-5">
                <div class="col-lg-7 reveal">
                    <div class="section-title text-start">
                        <span class="subtitle">B.S. PUBLIC SCHOOL</span>
                        <?php 
                        $pa_str = __('purpose_achievement');
                        $pa_parts = preg_split('/(&|और|and)/u', $pa_str, 2);
                        $pa_1 = trim($pa_parts[0]);
                        $pa_2 = isset($pa_parts[1]) ? trim($pa_parts[1]) : '';
                        ?>
                        <h2><span style="color: var(--accent-color);"><?php echo $pa_1; ?></span> <?php if($pa_2): ?>&amp; <?php echo $pa_2; ?><?php endif; ?></h2>
                        <div class="line"></div>
                    </div>
                    <p class="text-muted mb-4"><?php echo __('purpose_desc'); ?></p>
                    <h5 class="fw-bold mb-3"><?php echo __('leadership_desc'); ?></h5>
                    <ul class="purpose-list list-unstyled">
                        <li><i class="fas fa-check-circle text-warning me-2"></i> <?php echo __('purpose_point_1'); ?></li>
                        <li><i class="fas fa-check-circle text-warning me-2"></i> <?php echo __('purpose_point_2'); ?></li>
                        <li><i class="fas fa-check-circle text-warning me-2"></i> <?php echo __('purpose_point_3'); ?></li>
                        <li><i class="fas fa-check-circle text-warning me-2"></i> <?php echo __('purpose_point_4'); ?></li>
                    </ul>
                    <p class="mt-4 fw-medium"><?php echo __('purpose_outro'); ?></p>
                </div>
                <div class="col-lg-5 reveal mt-5 mt-lg-0">
                    <div class="achievement-img-wrapper rainbow-border p-2">
                        <img src="http://bsps.co.in/images_new/7.jpg" alt="B.S. Public School Students" class="img-fluid rounded-4 shadow w-100">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Gallery Section -->
    <section class="section-padding bg-white">
        <div class="container-fluid px-lg-5">
            <div class="section-title text-center reveal">
                <span class="subtitle"><?php echo __('moments_captured'); ?></span>
                <h2><?php echo __('campus_gallery'); ?></h2>
                <p class="text-muted"><?php echo __('gallery_desc'); ?></p>
                <div class="line mx-auto"></div>
            </div>

            <div class="owl-carousel gallery-carousel mt-5">
                <?php foreach($gallery_items as $item): ?>
                <div class="gallery-carousel-item">
                    <div class="rainbow-border">
                        <div class="gallery-card m-0">
                            <div class="gallery-img-wrapper">
                                <img src="uploads/gallery/<?php echo $item['image']; ?>" alt="<?php echo htmlspecialchars($item['heading']); ?>" loading="lazy">
                            </div>
                            <div class="gallery-content">
                                <h4 class="mb-0"><?php echo htmlspecialchars($item['heading']); ?></h4>
                            </div>
                        </div>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>

            <div class="text-center mt-5">
                <a href="gallery.php" class="btn btn-admission px-5 py-3 fs-5">
                    <i class="fas fa-images me-2"></i> <?php echo __('view_full_gallery'); ?>
                </a>
            </div>
        </div>
    </section>

    <!-- Our Management Section -->
    <section class="section-padding bg-light overflow-hidden">
        <div class="container">
            <div class="section-title text-center reveal">
                <span class="subtitle"><?php echo __('our_management'); ?></span>
                <h2>Meet Our Visionary Leaders</h2>
                <div class="line mx-auto"></div>
            </div>

            <div class="row g-4 mt-5 justify-content-center row-cols-1 row-cols-md-2 row-cols-lg-3">
                <!-- Chairman -->
                <div class="col reveal">
                    <div class="management-card bg-white rounded-4 shadow-sm overflow-hidden text-center h-100">
                        <div class="management-img-box">
                            <img src="images/chairman_plain.png" alt="Chairman" class="img-fluid">
                        </div>
                        <div class="p-4">
                            <h5 class="fw-bold mb-1" style="color: var(--primary-color);"><?php echo __('chairman_name'); ?></h5>
                            <p class="text-muted small mb-3"><?php echo __('chairman'); ?></p>
                            <p class="fst-italic small">"<?php echo mb_strimwidth(__('chairman_msg'), 0, 150, "..."); ?>"</p>
                        </div>
                    </div>
                </div>

                <!-- Secretary -->
                <div class="col reveal">
                    <div class="management-card bg-white rounded-4 shadow-sm overflow-hidden text-center h-100">
                        <div class="management-img-box">
                            <img src="images/adv abhishek giri secretory bs public School.jpeg" alt="Secretary" class="img-fluid">
                        </div>
                        <div class="p-4">
                            <h5 class="fw-bold mb-1" style="color: var(--primary-color);"><?php echo __('secretary_name'); ?></h5>
                            <p class="text-muted small mb-3"><?php echo __('secretary'); ?></p>
                            <p class="fst-italic small">"<?php echo mb_strimwidth(__('secretary_msg'), 0, 150, "..."); ?>"</p>
                        </div>
                    </div>
                </div>

                <!-- Principal -->
                <div class="col reveal">
                    <div class="management-card bg-white rounded-4 shadow-sm overflow-hidden text-center h-100">
                        <div class="management-img-box">
                            <img src="http://bsps.co.in/images/2.jpg" alt="Principal" class="img-fluid">
                        </div>
                        <div class="p-4">
                            <h5 class="fw-bold mb-1" style="color: var(--primary-color);">Furkan Saifi</h5>
                            <p class="text-muted small mb-3"><?php echo __('principal'); ?></p>
                            <p class="fst-italic small">"<?php echo mb_strimwidth(__('principal_msg'), 0, 150, "..."); ?>"</p>
                        </div>
                    </div>
                </div>

                <!-- Manager Wisdom -->
                <div class="col reveal">
                    <div class="management-card bg-white rounded-4 shadow-sm overflow-hidden text-center h-100">
                        <div class="management-img-box">
                            <img src="images/MUSTUFA SAIFI  manager wisdom learning school.jpeg" alt="Manager Wisdom" class="img-fluid">
                        </div>
                        <div class="p-4">
                            <h5 class="fw-bold mb-1" style="color: var(--primary-color);"><?php echo __('manager_wisdom_name'); ?></h5>
                            <p class="text-muted small mb-3"><?php echo __('manager_wisdom'); ?></p>
                            <p class="fst-italic small">"<?php echo mb_strimwidth(__('manager_wisdom_msg'), 0, 150, "..."); ?>"</p>
                        </div>
                    </div>
                </div>

                <!-- Manager BSPS -->
                <div class="col reveal">
                    <div class="management-card bg-white rounded-4 shadow-sm overflow-hidden text-center h-100">
                        <div class="management-img-box">
                            <img src="images/manager mukeem saifi bs public school.jpeg" alt="Manager BSPS" class="img-fluid">
                        </div>
                        <div class="p-4">
                            <h5 class="fw-bold mb-1" style="color: var(--primary-color);"><?php echo __('manager_bsps_name'); ?></h5>
                            <p class="text-muted small mb-3"><?php echo __('manager_bsps'); ?></p>
                            <p class="fst-italic small">"<?php echo mb_strimwidth(__('manager_bsps_msg'), 0, 150, "..."); ?>"</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Awards & Recognition Section -->
    <section class="section-padding bg-white position-relative award-section" style="background-image: linear-gradient(rgba(255,255,255,0.92), rgba(255,255,255,0.92)), url('http://bsps.co.in/images_new/7.jpg'); background-size: cover; background-attachment: fixed;">
        <div class="container">
            <div class="section-title text-center reveal">
                <span class="subtitle">ABOUT US</span>
                <?php 
                $igt = explode(',', __('inspiring_growth_title'));
                $igt_1 = trim($igt[0]);
                $igt_2 = isset($igt[1]) ? trim($igt[1]) : '';
                ?>
                <h2><span style="color: var(--accent-color);"><?php echo $igt_1; ?></span><?php if($igt_2): ?>, <?php echo $igt_2; ?><?php endif; ?></h2>
                <h5 class="text-muted mt-3"><?php echo __('edu_philosophy'); ?></h5>
                <div class="line mx-auto"></div>
            </div>

            <div class="row g-4 mt-5">
                <div class="col-lg-4 col-md-6 reveal">
                    <div class="award-card text-center p-4 h-100">
                        <div class="award-top p-4">
                            <h5 class="fw-bold text-white mb-0"><?php echo __('award_1'); ?></h5>
                        </div>
                        <div class="award-bottom bg-white p-4 shadow-sm">
                            <div class="award-icon fs-1 text-warning"><i class="fas fa-trophy"></i></div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 reveal">
                    <div class="award-card text-center p-4 h-100">
                        <div class="award-top p-4" style="background: linear-gradient(135deg, var(--primary-light), var(--primary-color));">
                            <h5 class="fw-bold text-white mb-0"><?php echo __('award_2'); ?></h5>
                        </div>
                        <div class="award-bottom bg-white p-4 shadow-sm">
                            <div class="award-icon fs-1 text-warning"><i class="fas fa-trophy"></i></div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-12 reveal">
                    <div class="award-card text-center p-4 h-100">
                        <div class="award-top p-4" style="background: linear-gradient(135deg, var(--accent-color), var(--accent-hover));">
                            <h5 class="fw-bold text-white mb-0"><?php echo __('award_3'); ?></h5>
                        </div>
                        <div class="award-bottom bg-white p-4 shadow-sm">
                            <div class="award-icon fs-1 text-warning"><i class="fas fa-trophy"></i></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


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