/* Shared header/footer partials + common page init for Excellent Education reference site */
const SITE_HEADER_HTML = `
<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> Wed, 15 July 2026</span>
<span><i class="fa-solid fa-location-dot text-brand-red mr-1"></i> Putalisadak, Kathmandu, Nepal</span>
</div>
<div class="flex items-center gap-6">
<a href="tel:+9779800000000" class="hover:text-brand-gold"><i class="fa-solid fa-phone text-brand-green mr-1"></i> +977 980-0000000</a>
<a href="mailto:info@excellenteducation.edu.np" class="hover:text-brand-gold"><i class="fa-solid fa-envelope text-brand-green mr-1"></i> info@excellenteducation.edu.np</a>
<div class="flex items-center gap-3">
<a href="#" class="hover:text-brand-red"><i class="fa-brands fa-facebook-f"></i></a>
<a href="#" class="hover:text-brand-red"><i class="fa-brands fa-instagram"></i></a>
<a href="#" class="hover:text-brand-red"><i class="fa-brands fa-youtube"></i></a>
<a href="#" 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.html" class="flex items-center min-w-0 shrink">
<img src="assets/img/logo-full.png" alt="Excellent Education & Counselling Services Pvt. Ltd." 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.html" class="hover:text-brand-red transition">Home</a>
<a href="about.html" class="hover:text-brand-red transition">About Us</a>
<div class="relative group">
<a href="study-abroad.html" 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">
<a href="study-abroad-australia.html" class="block px-4 py-2 text-sm hover:bg-brand-green/10">Australia</a>
<a href="study-abroad-uk.html" class="block px-4 py-2 text-sm hover:bg-brand-green/10">United Kingdom</a>
<a href="study-abroad-usa.html" class="block px-4 py-2 text-sm hover:bg-brand-green/10">USA</a>
<a href="study-abroad-canada.html" class="block px-4 py-2 text-sm hover:bg-brand-green/10">Canada</a>
<a href="study-abroad-newzealand.html" class="block px-4 py-2 text-sm hover:bg-brand-green/10">New Zealand</a>
<a href="study-abroad-europe.html" class="block px-4 py-2 text-sm hover:bg-brand-green/10">Europe</a>
<a href="study-abroad-other.html" class="block px-4 py-2 text-sm hover:bg-brand-green/10">Other Countries</a>
</div>
</div>
</div>
<div class="relative group">
<a href="test-preparation.html" 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">
<a href="test-preparation-ielts.html" class="block px-4 py-2 text-sm hover:bg-brand-green/10">IELTS</a>
<a href="test-preparation-toefl.html" class="block px-4 py-2 text-sm hover:bg-brand-green/10">TOEFL</a>
<a href="test-preparation-sat.html" class="block px-4 py-2 text-sm hover:bg-brand-green/10">SAT</a>
<a href="test-preparation-pte.html" class="block px-4 py-2 text-sm hover:bg-brand-green/10">PTE</a>
<a href="test-preparation-gre.html" class="block px-4 py-2 text-sm hover:bg-brand-green/10">GRE</a>
<a href="test-preparation-gmat.html" class="block px-4 py-2 text-sm hover:bg-brand-green/10">GMAT</a>
</div>
</div>
</div>
<a href="gallery.html" class="hover:text-brand-red transition">Gallery</a>
<a href="blog.html" class="hover:text-brand-red transition">Blog</a>
<a href="contact.html" class="hover:text-brand-red transition">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.html" 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.html" class="block">Home</a>
<a href="about.html" class="block">About Us</a>
<a href="study-abroad.html" class="block">Study Abroad</a>
<a href="test-preparation.html" class="block">Test Preparation</a>
<a href="gallery.html" class="block">Gallery</a>
<a href="blog.html" class="block">Blog</a>
<a href="contact.html" class="block">Contact</a>
</div>
</header>
`;
const SITE_FOOTER_HTML = `
<footer class="bg-brand-black text-gray-300 pt-16 pb-8">
<div class="max-w-7xl mx-auto px-6 grid md:grid-cols-4 gap-10 mb-12">
<div>
<img src="assets/img/logo-full.png" alt="Excellent Education & Counselling Services Pvt. Ltd." class="h-14 w-auto mb-4">
<p class="text-sm text-gray-400 mb-5">Pride in Excellence — your trusted partner for study abroad, test preparation, and visa counselling.</p>
<div class="flex gap-3">
<a href="#" class="w-9 h-9 rounded-full bg-white/10 flex items-center justify-center hover:bg-brand-red transition"><i class="fa-brands fa-facebook-f"></i></a>
<a href="#" class="w-9 h-9 rounded-full bg-white/10 flex items-center justify-center hover:bg-brand-red transition"><i class="fa-brands fa-instagram"></i></a>
<a href="#" class="w-9 h-9 rounded-full bg-white/10 flex items-center justify-center hover:bg-brand-red transition"><i class="fa-brands fa-youtube"></i></a>
<a href="#" class="w-9 h-9 rounded-full bg-white/10 flex items-center justify-center hover:bg-brand-red transition"><i class="fa-brands fa-linkedin-in"></i></a>
</div>
</div>
<div>
<p class="font-heading font-bold text-white mb-4">Quick Links</p>
<ul class="space-y-2 text-sm">
<li><a href="about.html" class="hover:text-brand-gold">About Us</a></li>
<li><a href="study-abroad.html" class="hover:text-brand-gold">Study Abroad</a></li>
<li><a href="test-preparation.html" class="hover:text-brand-gold">Test Preparation</a></li>
<li><a href="gallery.html" class="hover:text-brand-gold">Gallery</a></li>
<li><a href="blog.html" class="hover:text-brand-gold">Blog</a></li>
</ul>
</div>
<div>
<p class="font-heading font-bold text-white mb-4">Study Destinations</p>
<ul class="space-y-2 text-sm">
<li><a href="study-abroad-australia.html" class="hover:text-brand-gold">Australia</a></li>
<li><a href="study-abroad-uk.html" class="hover:text-brand-gold">United Kingdom</a></li>
<li><a href="study-abroad-usa.html" class="hover:text-brand-gold">USA</a></li>
<li><a href="study-abroad-canada.html" class="hover:text-brand-gold">Canada</a></li>
<li><a href="study-abroad-newzealand.html" class="hover:text-brand-gold">New Zealand</a></li>
<li><a href="study-abroad-europe.html" class="hover:text-brand-gold">Europe</a></li>
</ul>
</div>
<div>
<p class="font-heading font-bold text-white mb-4">Contact Us</p>
<ul class="space-y-3 text-sm">
<li class="flex items-start gap-2"><i class="fa-solid fa-location-dot text-brand-red mt-1"></i> Putalisadak, Kathmandu, Nepal</li>
<li class="flex items-center gap-2"><i class="fa-solid fa-phone text-brand-green"></i> +977 980-0000000</li>
<li class="flex items-center gap-2"><i class="fa-solid fa-envelope text-brand-gold"></i> info@excellenteducation.edu.np</li>
</ul>
</div>
</div>
<div class="top-accent-line h-[2px] w-full"></div>
<p class="text-center text-xs text-gray-500 pt-6">© 2026 Excellent Education & Counselling Services Pvt. Ltd. All Rights Reserved.</p>
</footer>
<!-- Chat with Excellent Support launcher -->
<button @click="chatOpen = !chatOpen" class="fixed bottom-6 right-6 z-50 w-14 h-14 rounded-full gradient-btn text-white flex items-center justify-center text-2xl shadow-2xl float-anim">
<i class="fa-solid" :class="chatOpen ? 'fa-xmark' : 'fa-comment-dots'"></i>
</button>
<!-- Chat with Excellent Support panel -->
<div x-show="chatOpen" x-cloak x-transition
class="fixed bottom-24 right-6 z-50 w-[90vw] max-w-sm rounded-2xl shadow-2xl overflow-hidden border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900">
<div class="top-accent-line h-[3px] w-full"></div>
<div class="bg-brand-black px-5 py-4 flex items-center gap-3">
<img src="assets/img/logo-icon.png" alt="Excellent Education" class="h-10 w-10 rounded-full bg-white p-1">
<div class="flex-1 min-w-0">
<p class="text-white font-heading font-bold text-sm leading-tight">Chat with Excellent Support</p>
<p class="text-gray-300 text-xs flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-brand-green inline-block"></span> Online now</p>
</div>
<button @click="chatOpen = false" class="text-gray-400 hover:text-white"><i class="fa-solid fa-xmark"></i></button>
</div>
<div class="p-5 space-y-3 max-h-72 overflow-y-auto bg-gray-50 dark:bg-gray-800/60">
<div class="flex items-start gap-2">
<img src="assets/img/logo-icon.png" alt="" class="h-7 w-7 rounded-full bg-white p-1 shrink-0">
<div class="bg-white dark:bg-gray-800 rounded-2xl rounded-tl-sm px-4 py-2.5 text-sm shadow-sm max-w-[80%]">
Hi 👋 Welcome to Excellent Education & Counselling Services! How can we help you today?
</div>
</div>
<div class="flex flex-wrap gap-2 pl-9">
<a href="study-abroad.html" class="text-xs font-medium px-3 py-1.5 rounded-full border border-brand-green text-brand-green hover:bg-brand-green hover:text-white transition">Study Abroad</a>
<a href="test-preparation.html" class="text-xs font-medium px-3 py-1.5 rounded-full border border-brand-red text-brand-red hover:bg-brand-red hover:text-white transition">Test Preparation</a>
<a href="contact.html" class="text-xs font-medium px-3 py-1.5 rounded-full border border-brand-gold text-brand-gold hover:bg-brand-gold hover:text-brand-black transition">Book Counselling</a>
</div>
</div>
<div class="p-4 border-t dark:border-gray-700 space-y-3">
<a href="https://wa.me/9779800000000" target="_blank"
class="flex items-center justify-center gap-2 w-full bg-[#25D366] hover:brightness-105 text-white font-semibold text-sm py-3 rounded-xl transition">
<i class="fa-brands fa-whatsapp text-lg"></i> Chat on WhatsApp
</a>
<form class="flex items-center gap-2">
<input type="text" placeholder="Type your message..." class="flex-1 rounded-full border border-gray-300 dark:border-gray-600 bg-transparent px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-brand-green">
<button type="submit" class="w-10 h-10 shrink-0 rounded-full gradient-btn text-white flex items-center justify-center"><i class="fa-solid fa-paper-plane text-sm"></i></button>
</form>
</div>
</div>
<button @click="popup = true" class="fixed bottom-6 left-6 z-50 hidden md:flex items-center gap-2 gradient-btn text-white font-semibold px-5 py-3 rounded-full shadow-2xl">
<i class="fa-solid fa-comment-dots"></i> Free Counselling
</button>
<div x-show="popup" x-cloak x-transition class="fixed inset-0 z-[60] flex items-center justify-center bg-black/60 p-6">
<div @click.outside="popup = false" class="bg-white dark:bg-gray-900 rounded-2xl max-w-md w-full p-8 relative">
<button @click="popup = false" class="absolute top-4 right-4 text-gray-400 hover:text-brand-red"><i class="fa-solid fa-xmark text-xl"></i></button>
<h3 class="font-heading font-extrabold text-2xl mb-2">Free <span class="gradient-text">Counselling</span></h3>
<p class="text-sm text-gray-500 dark:text-gray-400 mb-6">Leave your details and our counsellor will call you back shortly.</p>
<form class="space-y-4">
<input type="text" placeholder="Full Name" class="w-full rounded-xl border border-gray-300 dark:border-gray-600 px-4 py-3 bg-transparent focus:outline-none focus:ring-2 focus:ring-brand-green">
<input type="tel" placeholder="Phone Number" class="w-full rounded-xl border border-gray-300 dark:border-gray-600 px-4 py-3 bg-transparent focus:outline-none focus:ring-2 focus:ring-brand-green">
<button type="submit" class="w-full gradient-btn text-white font-semibold py-3 rounded-xl">Request a Call Back</button>
</form>
</div>
</div>
`;
function mountPartials() {
const headerMount = document.getElementById('site-header');
const footerMount = document.getElementById('site-footer');
if (headerMount) headerMount.innerHTML = SITE_HEADER_HTML;
i