<?php include_once 'lang.php'; ?>
<!DOCTYPE html>
<html lang="<?php echo $lang; ?>">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo isset($pageTitle) ? $pageTitle : "B.S. Public School & A.H. International School | Meerut"; ?></title>
    
    <!-- SEO Meta Tags -->
    <meta name="description" content="<?php echo isset($pageDesc) ? $pageDesc : "B.S. Public School and A.H. International School Meerut - Providing quality education and skills for a self-reliant future. Admission Open for 2026-27."; ?>">
    <meta name="keywords" content="<?php echo __('seo_keywords'); ?>">
    <meta name="author" content="B.S. Public School & A.H. International School">
    <meta name="robots" content="index, follow">
    <link rel="canonical" href="https://bspspublicschool.in/<?php echo basename($_SERVER['PHP_SELF']); ?>" />

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://bspspublicschool.in/">
    <meta property="og:title" content="<?php echo isset($pageTitle) ? $pageTitle : "B.S. Public School & A.H. International School"; ?>">
    <meta property="og:description" content="<?php echo isset($pageDesc) ? $pageDesc : "Education Today | A Brighter Tomorrow"; ?>">
    <meta property="og:image" content="images/logo_bsps.png">

    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 6 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@700;800;900&family=Playfair+Display:ital,wght@0,700;1,500;1,600;1,700&family=Outfit:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=Hind:wght@500;700&display=swap" rel="stylesheet">
    <!-- Owl Carousel CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
    <!-- Custom CSS with Cache Buster -->
    <link rel="stylesheet" href="css/style.css?v=<?php echo filemtime('css/style.css'); ?>">
    <style>
        .main-header-area {
            background: #ffffff !important;
            padding: 10px 0 !important;
            border-bottom: 1px solid #e9edf2 !important;
        }
        .header-brand-cluster {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 45px !important;
            max-width: 1400px !important;
            margin: 0 auto !important;
            text-align: center !important;
            flex-wrap: nowrap !important;
        }
        .header-logo-box {
            flex-shrink: 0 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
        }
        .school-logo-img {
            height: 185px !important;
            width: 185px !important;
            object-fit: contain !important;
            filter: drop-shadow(0 5px 12px rgba(0, 35, 70, 0.12)) !important;
            transition: transform 0.3s ease !important;
        }
        .school-logo-img:hover {
            transform: scale(1.04) !important;
        }
        .school-brand-titles {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
            flex-shrink: 1 !important;
        }
        .school-title {
            font-family: 'Cinzel', Georgia, serif !important;
            font-size: 3.25rem !important;
            font-weight: 800 !important;
            color: #08325a !important;
            letter-spacing: 2px !important;
            margin: 0 !important;
            line-height: 1.15 !important;
            text-transform: uppercase !important;
            white-space: nowrap !important;
        }
        .and-separator {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 18px !important;
            margin: 6px 0 !important;
        }
        .and-separator .gold-rule {
            height: 2.5px !important;
            width: 85px !important;
            background: #f5a623 !important;
            border-radius: 2px !important;
        }
        .and-separator .and-tag {
            font-family: 'Cinzel', serif !important;
            font-weight: 800 !important;
            font-size: 1.15rem !important;
            color: #08325a !important;
            letter-spacing: 3.5px !important;
        }
        .school-motto {
            font-family: 'Playfair Display', Georgia, serif !important;
            font-style: italic !important;
            font-weight: 600 !important;
            font-size: 1.55rem !important;
            color: #1a426e !important;
            letter-spacing: 1.8px !important;
            margin-top: 6px !important;
            white-space: nowrap !important;
        }
        .motto-divider {
            color: #f5a623 !important;
            margin: 0 14px !important;
            font-style: normal !important;
            font-weight: 700 !important;
        }
        .site-navbar .nav-link {
            font-size: 16px !important;
            padding: 16px 22px !important;
            font-weight: 600 !important;
            letter-spacing: 0.4px !important;
        }
        .site-navbar .nav-item-home .nav-link.home-btn {
            font-size: 16px !important;
            padding: 16px 30px !important;
            font-weight: 700 !important;
        }
        .btn-apply-header {
            padding: 10px 24px !important;
            font-size: 15px !important;
        }
        @media (max-width: 1399px) {
            .header-brand-cluster { gap: 32px !important; }
            .school-title { font-size: 2.75rem !important; }
            .school-logo-img { height: 165px !important; width: 165px !important; }
            .school-motto { font-size: 1.35rem !important; }
            .and-separator .gold-rule { width: 70px !important; }
            .site-navbar .nav-link { padding: 14px 16px !important; font-size: 15px !important; }
            .site-navbar .nav-item-home .nav-link.home-btn { padding: 14px 22px !important; }
        }
        @media (max-width: 1199px) {
            .header-brand-cluster { gap: 24px !important; }
            .school-title { font-size: 2.2rem !important; }
            .school-logo-img { height: 135px !important; width: 135px !important; }
            .school-motto { font-size: 1.15rem !important; }
            .and-separator .gold-rule { width: 55px !important; }
        }
        @media (max-width: 991px) {
            .header-brand-cluster { gap: 16px !important; }
            .school-logo-img { height: 95px !important; width: 95px !important; }
            .school-title { font-size: 1.55rem !important; }
            .and-separator { gap: 10px !important; margin: 3px 0 !important; }
            .and-separator .gold-rule { width: 40px !important; }
            .school-motto { font-size: 0.95rem !important; }
            .main-header-area { padding: 8px 0 !important; }
            .site-navbar .nav-link { padding: 10px 15px !important; }
        }
        @media (max-width: 576px) {
            .header-brand-cluster { gap: 8px !important; }
            .school-logo-img { height: 60px !important; width: 60px !important; }
            .school-title { font-size: 1.05rem !important; }
            .school-motto { font-size: 0.72rem !important; }
            .motto-divider { margin: 0 5px !important; }
        }
    </style>
</head>
<body>

    <!-- Top Bar -->
    <div class="top-bar">
        <div class="container">
            <div class="row align-items-center py-1">
                <!-- Contact info left -->
                <div class="col-md-8 col-12 text-md-start text-center mb-1 mb-md-0 top-contact-info">
                    <a href="tel:+919876543210" class="top-link">
                        <i class="fas fa-phone-alt me-1"></i> +91 98765 43210
                    </a>
                    <span class="top-divider">|</span>
                    <a href="tel:+919012020817" class="top-link d-none d-xl-inline">
                        +91 9012020817
                    </a>
                    <span class="top-divider d-none d-xl-inline">|</span>
                    <a href="mailto:info@bspschool.edu.in" class="top-link">
                        <i class="fas fa-envelope me-1"></i> info@bspschool.edu.in
                    </a>
                </div>

                <!-- Social and Lang right -->
                <div class="col-md-4 col-12 text-md-end text-center d-flex justify-content-md-end justify-content-center align-items-center">
                    <div class="top-social-links me-3">
                        <a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
                        <a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
                        <a href="#" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
                    </div>
                    <div class="lang-switcher dropdown">
                        <button class="btn btn-sm dropdown-toggle text-white" type="button" data-bs-toggle="dropdown" style="background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); border-radius: 20px; padding: 2px 12px; font-size: 13px;">
                            <i class="fas fa-globe me-1"></i> <?php echo $lang == 'hi' ? 'हिन्दी' : 'English'; ?>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end shadow">
                            <li><a class="dropdown-item" href="?lang=en">English</a></li>
                            <li><a class="dropdown-item" href="?lang=hi">हिन्दी</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Header Brand Section -->
    <header class="main-header-area bg-white">
        <div class="container py-4">
            <div class="header-brand-cluster">
                <!-- Left: BS Public School Logo -->
                <div class="header-logo-box">
                    <a href="index.php" class="header-logo-wrap" aria-label="B.S. Public School Home">
                        <img src="images/logo_bsps.png" alt="B.S. Public School Logo" class="school-logo-img logo-left">
                    </a>
                </div>
                
                <!-- Center: Royal School Names & Slogan -->
                <div class="school-brand-titles">
                    <h1 class="school-title">B.S PUBLIC SCHOOL</h1>
                    <div class="and-separator">
                        <span class="gold-rule"></span>
                        <span class="and-tag">AND</span>
                        <span class="gold-rule"></span>
                    </div>
                    <h2 class="school-title">A.H INTERNATIONAL SCHOOL</h2>
                    <div class="school-motto">
                        <span>Education Today</span>
                        <span class="motto-divider">|</span>
                        <span>A Brighter Tomorrow</span>
                    </div>
                </div>

                <!-- Right: AH International School Logo -->
                <div class="header-logo-box">
                    <a href="index.php" class="header-logo-wrap" aria-label="A.H. International School Home">
                        <img src="images/logo_ah.png" alt="A.H. International School Logo" class="school-logo-img logo-right">
                    </a>
                </div>
            </div>
        </div>
    </header>

    <!-- Main Navigation Bar -->
    <nav class="navbar navbar-expand-lg site-navbar sticky-top">
        <div class="container">
            <!-- Mobile Menu Bar Toggler -->
            <div class="d-flex d-lg-none justify-content-between align-items-center w-100 py-2 px-3">
                <span class="text-white fw-bold fs-6">
                    <i class="fas fa-graduation-cap me-2 text-warning"></i> Navigation
                </span>
                <button class="navbar-toggler btn-mobile-nav" type="button" data-bs-toggle="collapse" data-bs-target="#mainMenuNavbar" aria-controls="mainMenuNavbar" aria-expanded="false" aria-label="Toggle navigation">
                    <i class="fas fa-bars"></i>
                </button>
            </div>

            <div class="collapse navbar-collapse" id="mainMenuNavbar">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0 align-items-lg-center">
                    <!-- 1. Home (Distinct Gold Background as per mockup) -->
                    <li class="nav-item nav-item-home">
                        <a class="nav-link home-btn <?php echo basename($_SERVER['PHP_SELF']) == 'index.php' ? 'active' : ''; ?>" href="index.php">
                            <i class="fas fa-home me-1"></i> <?php echo __('home'); ?>
                        </a>
                    </li>

                    <!-- 2. About Us Dropdown -->
                    <li class="nav-item dropdown">
                        <?php
                        $aboutPages = ['about-us.php', 'our-principal.php', 'vision-mission.php', 'bsstc-initiative.php', 'social-impact.php', 'message-to-youth.php'];
                        $isAboutActive = in_array(basename($_SERVER['PHP_SELF']), $aboutPages);
                        ?>
                        <a class="nav-link dropdown-toggle <?php echo $isAboutActive ? 'active' : ''; ?>" href="about-us.php" id="aboutNavDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            <?php echo __('about_us'); ?>
                        </a>
                        <ul class="dropdown-menu shadow-lg border-0" aria-labelledby="aboutNavDropdown">
                            <li><a class="dropdown-item" href="about-us.php"><i class="fas fa-info-circle me-2 text-warning"></i><?php echo __('about_us'); ?></a></li>
                            <li><a class="dropdown-item" href="our-principal.php"><i class="fas fa-user-tie me-2 text-warning"></i><?php echo __('principal'); ?></a></li>
                            <li><a class="dropdown-item" href="vision-mission.php"><i class="fas fa-eye me-2 text-warning"></i><?php echo __('vision_mission'); ?></a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="bsstc-initiative.php"><i class="fas fa-certificate me-2 text-warning"></i><?php echo __('bses_trust'); ?></a></li>
                            <li><a class="dropdown-item" href="social-impact.php"><i class="fas fa-hands-helping me-2 text-warning"></i><?php echo __('social_impact'); ?></a></li>
                            <li><a class="dropdown-item" href="message-to-youth.php"><i class="fas fa-bullhorn me-2 text-warning"></i><?php echo __('message_youth'); ?></a></li>
                        </ul>
                    </li>

                    <!-- 3. Academics -->
                    <li class="nav-item">
                        <a class="nav-link <?php echo basename($_SERVER['PHP_SELF']) == 'academics.php' ? 'active' : ''; ?>" href="academics.php">
                            <?php echo __('academics'); ?>
                        </a>
                    </li>

                    <!-- 4. Admissions -->
                    <li class="nav-item">
                        <a class="nav-link <?php echo basename($_SERVER['PHP_SELF']) == 'admission-enquiry.php' ? 'active' : ''; ?>" href="admission-enquiry.php">
                            <?php echo __('admissions'); ?>
                        </a>
                    </li>

                    <!-- 5. Facilities -->
                    <li class="nav-item">
                        <a class="nav-link <?php echo basename($_SERVER['PHP_SELF']) == 'facilities.php' ? 'active' : ''; ?>" href="facilities.php">
                            <?php echo __('facilities'); ?>
                        </a>
                    </li>

                    <!-- 6. Gallery -->
                    <li class="nav-item">
                        <a class="nav-link <?php echo basename($_SERVER['PHP_SELF']) == 'gallery.php' ? 'active' : ''; ?>" href="gallery.php">
                            <?php echo __('gallery'); ?>
                        </a>
                    </li>

                    <!-- 7. News & Events -->
                    <li class="nav-item">
                        <a class="nav-link" href="index.php#news">
                            <?php echo __('news_events'); ?>
                        </a>
                    </li>

                    <!-- 8. Contact Us -->
                    <li class="nav-item">
                        <a class="nav-link <?php echo basename($_SERVER['PHP_SELF']) == 'contact-us.php' ? 'active' : ''; ?>" href="contact-us.php">
                            <?php echo __('contact_us'); ?>
                        </a>
                    </li>
                </ul>

                <!-- Admission CTA on right -->
                <div class="d-none d-xl-block ms-auto">
                    <a href="admission-enquiry.php" class="btn btn-apply-header">
                        <i class="fas fa-paper-plane me-1"></i> Apply Now
                    </a>
                </div>
            </div>
        </div>
    </nav>
