<?php
/**
 * Header Layout — Gmind Institute
 *
 * Included by all pages. Contains HTML head, top bar, and main navigation.
 * Optimized for fast loading: font-display:swap, deferred non-critical CSS.
 * Supports multi-language (Hindi + English) via __() translation function.
 *
 * Expected PHP variables:
 *   $title      (optional) — Page title; defaults to "Gmind Institute"
 *   $csrfToken  (optional) — CSRF token from session for JS access
 *   $currentPage (optional) — Current page identifier for active nav highlighting
 */

$pageTitle    = $title ?? 'Gmind Institute';
$csrf         = $csrfToken ?? '';
$current      = $currentPage ?? '';
$settings     = $settings ?? [];
$basePath     = defined('BASE_PATH') ? BASE_PATH : '/gmind';

// Fallback __() function if translation system not loaded
if (!function_exists('__')) {
    function __(string $key, array $params = []): string {
        return $key;
    }
}

// Language detection — with fallback if functions not available
if (function_exists('getCurrentLocale')) {
    $currentLang    = getCurrentLocale();
    $alternateLang   = getAlternateLocale();
    $langToggleLabel = getLangToggleLabel();
} else {
    $currentLang    = 'en';
    $alternateLang   = 'hi';
    $langToggleLabel = 'हिंदी';
}

// Fallback getBilingual() if not available
if (!function_exists('getBilingual')) {
    function getBilingual(array $row, string $field): string {
        return (string) ($row[$field] ?? '');
    }
}

// Extract settings for top bar
$sitePhone   = $settings['site_phone']    ?? '9305640290';
$siteEmail   = $settings['site_email']     ?? 'info@gmind.in';
$socialFB    = $settings['social_facebook']  ?? 'https://facebook.com/gmindinstitute';
$socialTW    = $settings['social_twitter']   ?? 'https://twitter.com/gmindinstitute';
$socialYT    = $settings['social_youtube']   ?? 'https://youtube.com/@gmindinstitute';
$socialIG    = $settings['social_instagram'] ?? 'https://instagram.com/gmindinstitute';
?>
<!DOCTYPE html>
<html lang="<?= $currentLang === 'hi' ? 'hi' : 'en' ?>">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Gmind Institute — Leading computer education institute offering professional IT courses, online exams, and career-oriented training across India.">
    <meta name="keywords" content="Gmind Institute, computer courses, IT training, online exam, computer education, franchise, admission, programming, web development, Tally, MS-CIT">

    <title><?= htmlspecialchars($pageTitle, ENT_QUOTES, 'UTF-8') ?></title>

    <!-- Favicon -->
    <link rel="icon" type="image/png" href="<?= $basePath ?>/images/favicon.png">
    <link rel="shortcut icon" type="image/png" href="<?= $basePath ?>/images/favicon.png">

    <!-- Google Fonts: Poppins (600,700) + Inter (400,500) + Noto Sans Devanagari for Hindi -->
    <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=Inter:wght@400;500&family=Poppins:wght@600;700&family=Noto+Sans+Devanagari:wght@400;500;600;700&display=swap" rel="stylesheet">

    <!-- Preload critical CSS -->
    <link rel="preload" href="<?= $basePath ?>/css/style.css" as="style">

    <!-- Main Stylesheet (v=5 to bust cache) -->
    <link rel="stylesheet" href="<?= $basePath ?>/css/style.css?v=5">

    <!-- Inner Pages Stylesheet (only load for non-home pages) -->
    <?php if ($current !== 'home'): ?>
    <link rel="stylesheet" href="<?= $basePath ?>/css/inner-pages.css?v=5">
    <?php endif; ?>

    <!-- Open Graph Meta Tags -->
    <meta property="og:title" content="<?= htmlspecialchars($pageTitle, ENT_QUOTES, 'UTF-8') ?>">
    <meta property="og:description" content="Gmind Institute — Leading computer education institute offering professional IT courses, online exams, and career-oriented training across India.">
    <meta property="og:type" content="website">
    <meta property="og:url" content="<?= htmlspecialchars((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? 'https' : 'http') . '://' . ($_SERVER['HTTP_HOST'] ?? 'gmind.in') . ($_SERVER['REQUEST_URI'] ?? '/'), ENT_QUOTES, 'UTF-8') ?>">
    <meta property="og:site_name" content="Gmind Institute">
    <meta property="og:image" content="<?= $basePath ?>/images/og-image.png">
    <meta property="og:locale" content="<?= $currentLang === 'hi' ? 'hi_IN' : 'en_IN' ?>">
    <?php if ($currentLang === 'hi'): ?>
    <meta property="og:locale:alternate" content="en_IN">
    <?php else: ?>
    <meta property="og:locale:alternate" content="hi_IN">
    <?php endif; ?>

    <!-- CSRF Token for JavaScript Access -->
    <?php if ($csrf): ?>
    <meta name="csrf-token" content="<?= htmlspecialchars($csrf, ENT_QUOTES, 'UTF-8') ?>">
    <?php endif; ?>

    <!-- Language toggle inline styles -->
    <style>
        .lang-toggle {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 12px;
            border-radius: 20px;
            background: rgba(255,255,255,0.15);
            color: #fff;
            text-decoration: none;
            font-size: 13px;
            font-weight: 600;
            transition: background 0.2s, transform 0.15s;
            border: 1px solid rgba(255,255,255,0.25);
            cursor: pointer;
            white-space: nowrap;
        }
        .lang-toggle:hover {
            background: rgba(255,255,255,0.25);
            transform: scale(1.05);
        }
        .lang-toggle-flag {
            font-size: 16px;
            line-height: 1;
        }
        /* Hindi font override */
        html[lang="hi"] body {
            font-family: 'Noto Sans Devanagari', 'Inter', sans-serif;
        }
        html[lang="hi"] h1, html[lang="hi"] h2, html[lang="hi"] h3,
        html[lang="hi"] h4, html[lang="hi"] h5, html[lang="hi"] h6 {
            font-family: 'Noto Sans Devanagari', 'Poppins', sans-serif;
        }
    </style>
</head>
<body>

    <!-- ============================================================
         Top Bar — Deep navy background with contact info & socials
         ============================================================ -->
    <div class="top-bar" role="complementary" aria-label="Contact and social links">
        <div class="container top-bar-inner">
            <div class="top-bar-left">
                <span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/></svg>
                    <span class="label"><?= __('topbar.call') ?></span>
                    <a href="tel:<?= htmlspecialchars($sitePhone, ENT_QUOTES, 'UTF-8') ?>"><?= htmlspecialchars($sitePhone, ENT_QUOTES, 'UTF-8') ?></a>
                </span>
            </div>

            <div class="top-bar-center">
                <span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
                    <span class="label"><?= __('topbar.email') ?></span>
                    <a href="mailto:<?= htmlspecialchars($siteEmail, ENT_QUOTES, 'UTF-8') ?>"><?= htmlspecialchars($siteEmail, ENT_QUOTES, 'UTF-8') ?></a>
                </span>
            </div>

            <div class="top-bar-right">
                <!-- Language Toggle -->
                <a href="?lang=<?= $alternateLang ?>" class="lang-toggle" title="Switch to <?= $langToggleLabel ?>">
                    <span class="lang-toggle-flag"><?= $alternateLang === 'hi' ? '🇮🇳' : '🇬🇧' ?></span>
                    <span><?= $langToggleLabel ?></span>
                </a>

                <div class="top-bar-divider" aria-hidden="true"></div>

                <a href="<?= $basePath ?>/login" class="login-link"><?= __('topbar.student_login') ?></a>
                <a href="<?= $basePath ?>/admin" class="login-link"><?= __('topbar.admin_login') ?></a>
            </div>
        </div>
    </div>

    <!-- ============================================================
         Main Navigation — Sticky white header with logo & nav links
         ============================================================ -->
    <header class="main-nav main-header" role="banner">
        <div class="container header-inner">
            <!-- Logo -->
            <a href="<?= $basePath ?>/" class="nav-logo logo" aria-label="Gmind Institute — Home">
                <?php
                // Determine logo source — prefer admin-uploaded logo, fallback to default
                $logoSrc = $basePath . '/images/logo.png';
                if (!empty($settings['site_logo'])) {
                    $logoSrc = upload_url($settings['site_logo']);
                }
                ?>
                <img src="<?= htmlspecialchars($logoSrc, ENT_QUOTES, 'UTF-8') ?>" alt="Gmind Institute Logo" width="50" height="50" loading="eager" onerror="this.onerror=null;this.src='<?= $basePath ?>/images/logo.png';">
                <span class="logo-text-wrap">
                    <span class="logo-text">GMIND</span>
                    <span class="logo-subtext">INSTITUTE</span>
                </span>
            </a>

            <!-- Mobile Hamburger Toggle -->
            <input type="checkbox" id="nav-toggle" class="nav-toggle" aria-label="Toggle navigation menu" role="switch" aria-expanded="false">
            <label for="nav-toggle" class="nav-toggle-label" aria-label="Open navigation menu">
                <span></span>
            </label>

            <!-- Navigation Links -->
            <nav class="nav-links mobile-nav" role="navigation" aria-label="Main navigation">
                <a href="<?= $basePath ?>/" class="nav-link<?= $current === 'home' ? ' active' : '' ?>"><?= __('nav.home') ?></a>
                <a href="<?= $basePath ?>/about" class="nav-link<?= $current === 'about' ? ' active' : '' ?>"><?= __('nav.about') ?></a>
                <a href="<?= $basePath ?>/courses" class="nav-link<?= $current === 'courses' ? ' active' : '' ?>"><?= __('nav.courses') ?></a>
                <a href="<?= $basePath ?>/practice" class="nav-link<?= $current === 'practice' ? ' active' : '' ?>"><?= __('nav.practice') ?></a>
                <a href="<?= $basePath ?>/exam" class="nav-link<?= $current === 'online-exam' ? ' active' : '' ?>"><?= __('nav.exam') ?></a>
                <a href="<?= $basePath ?>/branch-exam" class="nav-link<?= $current === 'branch-exam' ? ' active' : '' ?>" style="color:#16a085;font-weight:600;">Branch Exam</a>
                <a href="<?= $basePath ?>/admission" class="nav-link<?= $current === 'admission' ? ' active' : '' ?>"><?= __('nav.admission') ?></a>

                <!-- More Dropdown -->
                <div class="nav-dropdown">
                    <a class="nav-link nav-dropdown-toggle" href="javascript:void(0)"><?= __('nav.more') ?> &#9662;</a>
                    <div class="nav-dropdown-menu">
                        <a href="<?= $basePath ?>/toppers" class="nav-link<?= $current === 'toppers' ? ' active' : '' ?>"><?= __('nav.toppers') ?></a>
                        <a href="<?= $basePath ?>/franchisee" class="nav-link<?= $current === 'franchisee' ? ' active' : '' ?>"><?= __('nav.franchisee') ?></a>
                        <a href="<?= $basePath ?>/branch/register" class="nav-link<?= $current === 'branch-register' ? ' active' : '' ?>" style="color:#e84118;font-weight:600;">Open a Franchise</a>
                        <a href="<?= $basePath ?>/blog" class="nav-link<?= $current === 'blog' ? ' active' : '' ?>"><?= __('nav.blog') ?></a>
                        <a href="<?= $basePath ?>/news" class="nav-link<?= $current === 'news' ? ' active' : '' ?>"><?= __('nav.news') ?></a>
                        <a href="<?= $basePath ?>/gallery" class="nav-link<?= $current === 'gallery' ? ' active' : '' ?>"><?= __('nav.gallery') ?></a>
                        <a href="<?= $basePath ?>/faq" class="nav-link<?= $current === 'faq' ? ' active' : '' ?>"><?= __('nav.faq') ?></a>
                    </div>
                </div>

                <a href="<?= $basePath ?>/contact" class="nav-link<?= $current === 'contact' ? ' active' : '' ?>"><?= __('nav.contact') ?></a>
            </nav>

            <!-- Apply Now CTA -->
            <div class="nav-cta">
                <a href="<?= $basePath ?>/admission" class="btn-apply"><?= __('nav.apply_now') ?></a>
            </div>
        </div>
    </header>
