<?php
require_once __DIR__ . '/../includes/functions.php';
require_once __DIR__ . '/../includes/seo.php';
$s = get_settings();
$activeCountries = db()->query("SELECT name, slug FROM countries WHERE status = 'active' ORDER BY sort_order")->fetchAll();
$activePrograms = db()->query("SELECT name, slug FROM test_preparations WHERE status = 'active' ORDER BY sort_order")->fetchAll();
$pageSeoTitle = $pageSeoTitle ?? '';
$pageSeoDescription = $pageSeoDescription ?? '';
$pageSeoImage = $pageSeoImage ?? '';
$currentPage = $currentPage ?? '';
?>
<!DOCTYPE html>
<html lang="en" x-data="{ dark: false, mobileMenu: false, popup: false, chatOpen: false }" :class="{ 'dark': dark }">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<?php render_seo($pageSeoTitle, $pageSeoDescription, $pageSeoImage); ?>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Outfit:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.13.5/cdn.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<script>
tailwind.config = { darkMode: 'class', theme: { extend: {
colors: { brand: { red:'#E31E24', 'red-dark':'#B71519', green:'#2E9B38', 'green-dark':'#1E7A28', gold:'#F5B400', black:'#0A0A0A' } },
fontFamily: { heading:['Outfit','sans-serif'], body:['Poppins','sans-serif'] }
} } }
</script>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body class="bg-white dark:bg-brand-black text-gray-800 dark:text-gray-100 transition-colors duration-300">
<div class="hidden md:block bg-brand-black text-gray-200 text-sm">
<div class="top-accent-line h-[3px] w-full"></div>
<div class="max-w-7xl mx-auto px-6 py-2 flex items-center justify-between">
<div class="flex items-center gap-6">
<span><i class="fa-regular fa-calendar text-brand-gold mr-1"></i> <?= e(date('l, j F Y')) ?></span>
<span><i class="fa-solid fa-location-dot text-brand-red mr-1"></i> <?= e($s['address'] ?? '') ?></span>
</div>
<div class="flex items-center gap-6">
<a href="tel:<?= e($s['phone'] ?? '') ?>" class="hover:text-brand-gold"><i class="fa-solid fa-phone text-brand-green mr-1"></i> <?= e($s['phone'] ?? '') ?></a>
<a href="mailto:<?= e($s['email'] ?? '') ?>" class="hover:text-brand-gold"><i class="fa-solid fa-envelope text-brand-green mr-1"></i> <?= e($s['email'] ?? '') ?></a>
<div class="flex items-center gap-3">
<a href="<?= e($s['facebook_url'] ?? '#') ?>" class="hover:text-brand-red"><i class="fa-brands fa-facebook-f"></i></a>
<a href="<?= e($s['instagram_url'] ?? '#') ?>" class="hover:text-brand-red"><i class="fa-brands fa-instagram"></i></a>
<a href="<?= e($s['youtube_url'] ?? '#') ?>" class="hover:text-brand-red"><i class="fa-brands fa-youtube"></i></a>
<a href="<?= e($s['linkedin_url'] ?? '#') ?>" class="hover:text-brand-red"><i class="fa-brands fa-linkedin-in"></i></a>
</div>
</div>
</div>
</div>
<header class="sticky top-0 z-40 bg-white/95 dark:bg-brand-black/95 backdrop-blur shadow-md">
<div class="max-w-7xl mx-auto px-4 sm:px-6 py-3 flex items-center justify-between gap-3">
<a href="index.php" class="flex items-center min-w-0 shrink">
<img src="<?= e(resolve_image($s['logo_full'] ?? '')) ?>" alt="<?= e($s['site_name'] ?? '') ?>" class="h-8 sm:h-10 md:h-14 w-auto max-w-[150px] sm:max-w-[220px] md:max-w-none">
</a>
<nav class="hidden lg:flex items-center gap-7 font-medium text-sm">
<a href="index.php" class="hover:text-brand-red transition <?= $currentPage === 'home' ? 'text-brand-red' : '' ?>">Home</a>
<a href="about.php" class="hover:text-brand-red transition <?= $currentPage === 'about' ? 'text-brand-red' : '' ?>">About Us</a>
<div class="relative group">
<a href="study-abroad.php" class="hover:text-brand-red transition flex items-center gap-1">Study Abroad <i class="fa-solid fa-chevron-down text-[10px]"></i></a>
<div class="absolute hidden group-hover:block top-full left-0 pt-3 w-56">
<div class="glass-light dark:glass rounded-xl shadow-xl py-2">
<?php foreach ($activeCountries as $c): ?>
<a href="study-abroad-<?= e($c['slug']) ?>.php" class="block px-4 py-2 text-sm hover:bg-brand-green/10"><?= e($c['name']) ?></a>
<?php endforeach; ?>
</div>
</div>
</div>
<div class="relative group">
<a href="test-preparation.php" class="hover:text-brand-red transition flex items-center gap-1">Test Preparation <i class="fa-solid fa-chevron-down text-[10px]"></i></a>
<div class="absolute hidden group-hover:block top-full left-0 pt-3 w-48">
<div class="glass-light dark:glass rounded-xl shadow-xl py-2">
<?php foreach ($activePrograms as $p): ?>
<a href="test-preparation-<?= e($p['slug']) ?>.php" class="block px-4 py-2 text-sm hover:bg-brand-green/10"><?= e($p['name']) ?></a>
<?php endforeach; ?>
</div>
</div>
</div>
<a href="gallery.php" class="hover:text-brand-red transition <?= $currentPage === 'gallery' ? 'text-brand-red' : '' ?>">Gallery</a>
<a href="blog.php" class="hover:text-brand-red transition <?= $currentPage === 'blog' ? 'text-brand-red' : '' ?>">Blog</a>
<a href="contact.php" class="hover:text-brand-red transition <?= $currentPage === 'contact' ? 'text-brand-red' : '' ?>">Contact</a>
</nav>
<div class="flex items-center gap-2 sm:gap-3 shrink-0">
<button @click="dark = !dark" class="w-9 h-9 rounded-full flex items-center justify-center border border-gray-300 dark:border-gray-600 hover:border-brand-green transition">
<i class="fa-solid" :class="dark ? 'fa-sun text-brand-gold' : 'fa-moon text-brand-black dark:text-white'"></i>
</button>
<a href="contact.php" class="hidden md:inline-flex gradient-btn text-white font-semibold text-sm px-5 py-2.5 rounded-full">Free Counselling</a>
<button @click="mobileMenu = !mobileMenu" class="lg:hidden w-9 h-9 flex items-center justify-center">
<i class="fa-solid fa-bars text-xl"></i>
</button>
</div>
</div>
<div x-show="mobileMenu" x-cloak x-transition class="lg:hidden bg-white dark:bg-brand-black border-t dark:border-gray-800 px-6 py-4 space-y-3 text-sm font-medium">
<a href="index.php" class="block">Home</a>
<a href="about.php" class="block">About Us</a>
<a href="study-abroad.php" class="block">Study Abroad</a>
<a href="test-preparation.php" class="block">Test Preparation</a>
<a href="gallery.php" class="block">Gallery</a>
<a href="blog.php" class="block">Blog</a>
<a href="contact.php" class="block">Contact</a>
</div>
</header>