<?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>
