<?php
// ── CY Consultancy Centre — Header Include ──
require_once dirname(__FILE__) . '/config.php';

$title  = isset($page_title)  ? $page_title  : 'CY Consultancy Centre | Study Abroad Bangladesh';
$desc   = isset($page_desc)   ? $page_desc   : "Bangladesh's most trusted study abroad partner since 2008.";
$active = isset($active_page) ? $active_page : 'home';
$B = BASE_PATH; // short alias e.g. /cy-php/
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=5.0">
<meta name="description" content="<?= htmlspecialchars($desc) ?>">
<meta name="theme-color" content="#0F1C2E">
<title><?= htmlspecialchars($title) ?></title>

<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&display=swap" rel="stylesheet">
<!-- Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<!-- Lenis -->
<script src="https://cdn.jsdelivr.net/npm/lenis@1.1.13/dist/lenis.min.js"></script>

<!-- CSS — absolute paths from web root -->
<link rel="stylesheet" href="<?= $B ?>assets/css/style.css">
<link rel="stylesheet" href="<?= $B ?>assets/css/animations.css">
<link rel="stylesheet" href="<?= $B ?>assets/css/fixes.css">
<link rel="stylesheet" href="<?= $B ?>assets/css/mobile.css">
<link rel="stylesheet" href="<?= $B ?>assets/css/threed.css">
<link rel="stylesheet" href="<?= $B ?>assets/css/homepage.css">
<link rel="stylesheet" href="<?= $B ?>assets/css/innerpages.css">

<style>
/* ── FIXED TOP NAV ── */
html { scroll-behavior: auto !important; }
body { overflow-x: hidden; }

.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1002;
  background: var(--n);
  color: rgba(255,255,255,.7);
  font-size: 11px;
  padding: 8px 0;
}
.topbar-in {
  max-width: 1260px; margin: 0 auto; padding: 0 24px;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px;
}
.topbar a { color: var(--g); font-weight: 600; }
.topbar i  { margin-right: 4px; color: var(--g); font-size: 9px; }

.nav {
  position: fixed !important;
  top: 36px; left: 0; right: 0;
  z-index: 1001;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(0,0,0,.06);
  transition: box-shadow .3s, background .3s;
}
.nav.scrolled { box-shadow: 0 4px 30px rgba(0,0,0,.1); background: #fff; }

/* Hero & sections push down below fixed nav */
.hero       { padding-top: 160px !important; }
.page-hero  { padding-top: 140px !important; }

/* ── MOBILE MENU ── */
.mob-btn { display: none; }
.mob-menu {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  background: #fff;
  padding: 104px 0 24px;
  box-shadow: 0 8px 40px rgba(0,0,0,.15);
  transform: translateY(-110%);
  transition: transform .4s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
  overflow-y: auto;
  max-height: 100vh;
}
.mob-menu.open {
  transform: translateY(0);
  pointer-events: auto;
}
.mob-menu a {
  display: block !important;
  padding: 16px 28px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--n) !important;
  border-bottom: 1px solid rgba(0,0,0,.05) !important;
  font-family: 'Montserrat', sans-serif;
  text-decoration: none;
  transition: all .2s;
}
.mob-menu a:hover, .mob-menu a.active-link {
  color: var(--r) !important;
  background: rgba(230,57,70,.04) !important;
  padding-left: 38px !important;
}
.mob-menu a:last-child {
  margin: 16px 20px 0;
  background: var(--r) !important;
  color: #fff !important;
  border-radius: 14px !important;
  border: none !important;
  text-align: center;
}
.mob-menu a:last-child:hover { background: var(--r2) !important; padding-left: 28px !important; }

@media(max-width: 968px) {
  .nav-menu { display: none !important; }
  .mob-btn  {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    border-radius: 10px;
    background: rgba(0,0,0,.05);
    border: 1.5px solid rgba(0,0,0,.07);
    cursor: pointer;
    font-size: 18px;
    color: var(--n);
    transition: all .2s;
    position: relative;
    z-index: 10000;
  }
  .mob-btn.is-open {
    background: var(--r);
    color: #fff;
    border-color: var(--r);
  }
}
@media(max-width: 768px) {
  .topbar { display: none; }
  .nav { top: 0 !important; }
  .hero { padding-top: 110px !important; }
  .page-hero { padding-top: 100px !important; }
}
</style>

<style id="trans-init">
/* Page entry — body starts hidden, revealed by transitions.js */
body { opacity: 1; }
#page-trans {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: linear-gradient(135deg, #0F1C2E, #1B2D45);
  transform: translateY(0);
  pointer-events: none;
  transition: none;
}
</style>
<script>
// Show overlay immediately to prevent flash
(function(){
  var s = document.createElement('style');
  s.textContent = '#page-trans{transform:translateY(0)!important}';
  document.head.appendChild(s);
  window.addEventListener('DOMContentLoaded', function(){
    setTimeout(function(){ s.remove(); }, 50);
  });
})();
</script>
</head>
<body>

<!-- Global elements -->
<div class="sky-bg" aria-hidden="true"></div>
<div class="noise-overlay" aria-hidden="true"></div>
<div class="custom-cursor" aria-hidden="true"></div>
<div class="cursor-dot" aria-hidden="true"></div>
<button id="scroll-top" aria-label="Scroll to top"><i class="fas fa-chevron-up"></i></button>
<div id="prog"></div>

<!-- TOPBAR -->
<div class="topbar">
  <div class="topbar-in">
    <div><i class="fas fa-map-marker-alt"></i>Lift 14, Nahar Plaza, Bir Uttam C.R. Dutta Road, Hatirpool, Dhaka 1205</div>
    <div>
      <i class="fas fa-phone"></i><a href="tel:+8801711351367">+88 01711-351367</a>
      &nbsp;&middot;&nbsp;
      <i class="fas fa-envelope"></i><a href="mailto:info@cyconsultancy.net">info@cyconsultancy.net</a>
      &nbsp;&middot;&nbsp;
      <i class="far fa-clock"></i>SAT&ndash;THU 10:00&ndash;5:30
    </div>
  </div>
</div>

<!-- FIXED NAV -->
<nav class="nav" id="navbar">
  <div class="nav-in">
    <a href="<?= $B ?>index.php" class="nav-logo">
      <img src="<?= $B ?>assets/images/logo.png" alt="CY Consultancy" height="44" onerror="this.style.display='none'">
      <div>
        <div class="nav-logo-t">CY Consultancy</div>
        <span class="nav-logo-s">Centre &mdash; Since 2008</span>
      </div>
    </a>

    <ul class="nav-menu">
      <li><a href="<?= $B ?>index.php"       <?= $active==='home'         ? 'class="active"':'' ?>>Home</a></li>
      <li><a href="<?= $B ?>about.php"        <?= $active==='about'        ? 'class="active"':'' ?>>About</a></li>
      <li><a href="<?= $B ?>services.php"     <?= $active==='services'     ? 'class="active"':'' ?>>Services</a></li>
      <li><a href="<?= $B ?>destinations.php" <?= $active==='destinations' ? 'class="active"':'' ?>>Destinations</a></li>
      <li><a href="<?= $B ?>universities.php" <?= $active==='universities' ? 'class="active"':'' ?>>Universities</a></li>
      <li><a href="<?= $B ?>blog.php"         <?= $active==='blog'         ? 'class="active"':'' ?>>Blog</a></li>
      <li><a href="<?= $B ?>gallery.php"     <?= $active==='gallery' ? 'class="active"':'' ?>>Gallery</a></li>
      <li><a href="<?= $B ?>contact.php" class="nav-cta">Free Consultation</a></li>
    </ul>

    <button class="mob-btn" id="mob-btn" aria-label="Menu" type="button">
      <i class="fas fa-bars" id="mob-icon"></i>
    </button>
  </div>

  <!-- Mobile Slide-Down Menu -->
  <div id="mob-menu" class="mob-menu" role="navigation">
    <a href="<?= $B ?>index.php"       <?= $active==='home'         ? 'class="active-link"':'' ?>><i class="fas fa-home" style="margin-right:10px;color:var(--r)"></i>Home</a>
    <a href="<?= $B ?>about.php"        <?= $active==='about'        ? 'class="active-link"':'' ?>><i class="fas fa-users" style="margin-right:10px;color:var(--r)"></i>About Us</a>
    <a href="<?= $B ?>services.php"     <?= $active==='services'     ? 'class="active-link"':'' ?>><i class="fas fa-cog" style="margin-right:10px;color:var(--r)"></i>Services</a>
    <a href="<?= $B ?>destinations.php" <?= $active==='destinations' ? 'class="active-link"':'' ?>><i class="fas fa-globe" style="margin-right:10px;color:var(--r)"></i>Destinations</a>
    <a href="<?= $B ?>universities.php" <?= $active==='universities' ? 'class="active-link"':'' ?>><i class="fas fa-graduation-cap" style="margin-right:10px;color:var(--r)"></i>Universities</a>
    <a href="<?= $B ?>blog.php"         <?= $active==='blog'         ? 'class="active-link"':'' ?>><i class="fas fa-newspaper" style="margin-right:10px;color:var(--r)"></i>Blog &amp; News</a>
    <a href="<?= $B ?>contact.php"><i class="fas fa-phone-alt" style="margin-right:10px"></i>Free Consultation</a>
  </div>
</nav>
