<?php
$s = get_settings();
$footerCountries = db()->query("SELECT name, slug FROM countries WHERE status = 'active' ORDER BY sort_order LIMIT 6")->fetchAll();
$whatsapp = preg_replace('/\D/', '', $s['whatsapp_number'] ?? '');
?>
<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="<?= e(resolve_image($s['logo_full'] ?? '')) ?>" alt="<?= e($s['site_name'] ?? '') ?>" class="h-14 w-auto mb-4">
      <p class="text-sm text-gray-400 mb-5"><?= $s['footer_text'] ?? '' ?></p>
      <div class="flex gap-3">
        <a href="<?= e($s['facebook_url'] ?? '#') ?>" 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="<?= e($s['instagram_url'] ?? '#') ?>" 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="<?= e($s['youtube_url'] ?? '#') ?>" 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="<?= e($s['linkedin_url'] ?? '#') ?>" 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.php" class="hover:text-brand-gold">About Us</a></li>
        <li><a href="study-abroad.php" class="hover:text-brand-gold">Study Abroad</a></li>
        <li><a href="test-preparation.php" class="hover:text-brand-gold">Test Preparation</a></li>
        <li><a href="gallery.php" class="hover:text-brand-gold">Gallery</a></li>
        <li><a href="blog.php" 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">
        <?php foreach ($footerCountries as $c): ?>
          <li><a href="study-abroad-<?= e($c['slug']) ?>.php" class="hover:text-brand-gold"><?= e($c['name']) ?></a></li>
        <?php endforeach; ?>
      </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> <?= e($s['address'] ?? '') ?></li>
        <li class="flex items-center gap-2"><i class="fa-solid fa-phone text-brand-green"></i> <?= e($s['phone'] ?? '') ?></li>
        <li class="flex items-center gap-2"><i class="fa-solid fa-envelope text-brand-gold"></i> <?= e($s['email'] ?? '') ?></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"><?= $s['copyright_text'] ?? '' ?></p>
</footer>

<!-- Chat with Excellent Support -->
<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>

<div x-show="chatOpen" x-cloak x-transition x-data="{ activeFaq: null }"
     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="<?= e(resolve_image($s['logo_icon'] ?? '')) ?>" alt="<?= e($s['site_name'] ?? '') ?>" 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-96 overflow-y-auto bg-gray-50 dark:bg-gray-800/60">
    <div class="flex items-start gap-2">
      <img src="<?= e(resolve_image($s['logo_icon'] ?? '')) ?>" 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 <?= e($s['site_name'] ?? '') ?>! How can we help you today?
      </div>
    </div>
    <div class="flex flex-wrap gap-2 pl-9">
      <a href="study-abroad.php" 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.php" 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="index.php#services" class="text-xs font-medium px-3 py-1.5 rounded-full border border-brand-black dark:border-white text-brand-black dark:text-white hover:bg-brand-black hover:text-white transition">Our Services</a>
      <a href="contact.php" 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>

    <!-- Quick Questions -->
    <div class="pl-9 pt-2">
      <p class="text-[11px] uppercase tracking-wider text-gray-400 font-semibold mb-2">Quick Questions</p>
      <div class="flex flex-wrap gap-2">
        <button type="button" @click="activeFaq = (activeFaq === 'apply' ? null : 'apply')"
          class="text-xs font-medium px-3 py-1.5 rounded-full transition"
          :class="activeFaq === 'apply' ? 'bg-brand-green text-white' : 'bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-600 dark:text-gray-300 hover:border-brand-green hover:text-brand-green'">
          How can I apply?
        </button>
        <button type="button" @click="activeFaq = (activeFaq === 'docs' ? null : 'docs')"
          class="text-xs font-medium px-3 py-1.5 rounded-full transition"
          :class="activeFaq === 'docs' ? 'bg-brand-green text-white' : 'bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-600 dark:text-gray-300 hover:border-brand-green hover:text-brand-green'">
          What documents do I need?
        </button>
        <button type="button" @click="activeFaq = (activeFaq === 'cost' ? null : 'cost')"
          class="text-xs font-medium px-3 py-1.5 rounded-full transition"
          :class="activeFaq === 'cost' ? 'bg-brand-green text-white' : 'bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-600 dark:text-gray-300 hover:border-brand-green hover:text-brand-green'">
          How much does it cost?
        </button>
      </div>

      <div x-show="activeFaq === 'apply'" x-cloak x-transition class="mt-3 flex items-start gap-2">
        <img src="<?= e(resolve_image($s['logo_icon'] ?? '')) ?>" 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-[85%]">
          Applying is simple: book a free counselling session, our counsellors assess your profile, shortlist universities, and guide you through documentation, application, and visa filing end-to-end. Tap "Book Counselling" above, or message us directly on WhatsApp to get started today.
        </div>
      </div>

      <div x-show="activeFaq === 'docs'" x-cloak x-transition class="mt-3 flex items-start gap-2">
        <img src="<?= e(resolve_image($s['logo_icon'] ?? '')) ?>" 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-[85%]">
          You'll typically need academic transcripts and certificates, a valid passport, English test scores (IELTS/PTE/TOEFL), an SOP, letters of recommendation, and financial documents. Exact requirements vary by country and university — message us on WhatsApp for a checklist tailored to your case.
        </div>
      </div>

      <div x-show="activeFaq === 'cost'" x-cloak x-transition class="mt-3 flex items-start gap-2">
        <img src="<?= e(resolve_image($s['logo_icon'] ?? '')) ?>" 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-[85%]">
          Initial counselling is completely free. Fees for test preparation, documentation, and visa filing vary by service and destination. Call or WhatsApp us for exact pricing for your chosen program.
        </div>
      </div>
    </div>
  </div>

  <div class="p-4 border-t dark:border-gray-700 grid grid-cols-2 gap-2">
    <a href="https://wa.me/<?= e($whatsapp) ?>?text=<?= e(rawurlencode('Hi ' . ($s['site_name'] ?? '') . ', I would like to know more about your services.')) ?>" 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> WhatsApp
    </a>
    <a href="tel:<?= e(preg_replace('/\s+/', '', $s['phone'] ?? '')) ?>"
       class="flex items-center justify-center gap-2 w-full bg-brand-black hover:brightness-125 text-white font-semibold text-sm py-3 rounded-xl transition">
      <i class="fa-solid fa-phone text-lg"></i> Call Us
    </a>
  </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 method="post" action="lead_submit.php" class="space-y-4">
      <?= csrf_field() ?>
      <input type="hidden" name="source_page" value="<?= e($currentPage ?? 'popup') ?>">
      <input type="text" name="name" placeholder="Full Name" required 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" name="phone" placeholder="Phone Number" required 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="text" name="hp_field" class="hidden" tabindex="-1" autocomplete="off">
      <button type="submit" class="w-full gradient-btn text-white font-semibold py-3 rounded-xl">Request a Call Back</button>
    </form>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', () => { if (window.AOS) AOS.init({ duration: 800, once: true }); });
</script>
</body>
</html>
