  </main>

  <!-- Modern Startup Footer -->
  <footer class="bg-brandDark text-gray-300 pt-20 pb-8 border-t border-white/5 relative overflow-hidden">
    <!-- Decorative Ambient Glows -->
    <div class="absolute top-0 right-0 w-96 h-96 bg-brandPurple/5 rounded-full blur-3xl pointer-events-none"></div>
    <div class="absolute bottom-0 left-0 w-96 h-96 bg-brandBlue/5 rounded-full blur-3xl pointer-events-none"></div>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
      <div class="grid grid-cols-1 md:grid-cols-4 gap-12 pb-16 border-b border-white/5">
        <div class="md:col-span-1 space-y-6">
          <a href="/" class="flex items-center">
            <img src="/img/logo.png" alt="Dadofy Logo" class="h-14 w-auto brightness-0 invert">
          </a>
          <p class="text-sm leading-relaxed text-gray-400">
            <%= settings.meta_description || 'Jasa pembuatan website profesional, cepat, aman dan responsif, lengkap dengan hosting dan VPS siap pakai.' %>
          </p>
          <!-- Social icons list -->
          <div class="flex items-center gap-3">
            <% if (settings.instagram) { %>
              <a href="<%= settings.instagram %>" target="_blank" rel="noopener noreferrer" class="w-10 h-10 rounded-xl bg-white/5 hover:bg-gradient-to-tr hover:from-pink-500 hover:to-purple-500 hover:text-white flex items-center justify-center text-gray-400 transition" aria-label="Instagram">
                <i class="fa-brands fa-instagram text-lg"></i>
              </a>
            <% } %>
            <% if (settings.facebook) { %>
              <a href="<%= settings.facebook %>" target="_blank" rel="noopener noreferrer" class="w-10 h-10 rounded-xl bg-white/5 hover:bg-blue-600 hover:text-white flex items-center justify-center text-gray-400 transition" aria-label="Facebook">
                <i class="fa-brands fa-facebook-f text-lg"></i>
              </a>
            <% } %>
            <% if (settings.tiktok) { %>
              <a href="<%= settings.tiktok %>" target="_blank" rel="noopener noreferrer" class="w-10 h-10 rounded-xl bg-white/5 hover:bg-black hover:text-white flex items-center justify-center text-gray-400 transition" aria-label="TikTok">
                <i class="fa-brands fa-tiktok text-lg"></i>
              </a>
            <% } %>
          </div>
        </div>

        <!-- Sitemap Quick Links -->
        <div class="space-y-4">
          <h4 class="font-display font-bold text-white text-base">Navigator Layanan</h4>
          <ul class="space-y-3 text-sm">
            <li><a href="/#services" class="hover:text-brandBlue transition">Jasa Website Custom</a></li>
            <li><a href="/#services" class="hover:text-brandBlue transition">Sistem E-Commerce</a></li>
            <li><a href="/#hosting" class="hover:text-brandBlue transition">Hosting Siap Pakai</a></li>
            <li><a href="/#hosting" class="hover:text-brandBlue transition">VPS Hosting Server</a></li>
            <li><a href="/#packages" class="hover:text-brandBlue transition">Rincian Paket Harga</a></li>
          </ul>
        </div>

        <!-- Corporate Links -->
        <div class="space-y-4">
          <h4 class="font-display font-bold text-white text-base">Perusahaan</h4>
          <ul class="space-y-3 text-sm">
            <li><a href="/#why-us" class="hover:text-brandBlue transition">Mengapa Dadofy</a></li>
            <li><a href="/#portfolio" class="hover:text-brandBlue transition">Karya Portfolio</a></li>
            <li><a href="/#testimonials" class="hover:text-brandBlue transition">Ulasan Klien</a></li>
            <li><a href="/admin/login" class="hover:text-brandBlue transition flex items-center gap-1.5"><i class="fa-solid fa-lock text-xs"></i> Portal Administrator</a></li>
          </ul>
        </div>

        <!-- Dynamic Official Contact details -->
        <div class="space-y-4">
          <h4 class="font-display font-bold text-white text-base">Hubungi Kami</h4>
          <ul class="space-y-3 text-sm text-gray-400">
            <li class="flex items-start gap-2">
              <i class="fa-solid fa-map-marker-alt text-brandBlue mt-1 flex-shrink-0"></i>
              <span class="leading-relaxed text-xs"><%= settings.address || 'Gedung Cyber, Jakarta Selatan, Indonesia' %></span>
            </li>
            <li class="flex items-center gap-2">
              <i class="fa-solid fa-envelope text-brandPurple flex-shrink-0"></i>
              <a href="mailto:<%= settings.email %>" class="hover:text-white transition"><%= settings.email || 'halo@dadofy.id' %></a>
            </li>
            <li class="flex items-center gap-2">
              <i class="fa-solid fa-phone text-emerald-500 flex-shrink-0"></i>
              <a href="https://wa.me/<%= settings.whatsapp %>" target="_blank" rel="noopener noreferrer" class="hover:text-white transition"><%= settings.whatsapp || '081234567890' %></a>
            </li>
          </ul>
        </div>
      </div>

      <!-- Copyright Area -->
      <div class="pt-8 flex flex-col md:flex-row justify-between items-center gap-4 text-xs text-gray-500">
        <div>
          &copy; <%= new Date().getFullYear(); %> <strong><%= settings.brand_name || 'Dadofy' %></strong>. Hak Cipta Dilindungi.
        </div>
        <div class="flex items-center gap-4">
          <span>Premium Web Development and Server Services</span>
          <span class="text-gray-700">|</span>
          <a href="/admin/login" class="hover:text-gray-400 transition flex items-center gap-1"><i class="fa-solid fa-gear"></i> Kelola</a>
        </div>
      </div>
    </div>
  </footer>

  <!-- Vanilla JS Script Mounting -->
  <script src="/js/main.js"></script>
</body>
</html>
