<style>
    /* Desktop Footer Styles */
    .dark-footer { background-color: #171a21; color: #cbd5e1; padding: 70px 0 30px; margin-top: 60px; font-family: 'Inter', sans-serif; }
    .footer-grid { display: grid; grid-template-columns: 1fr; gap: 40px; margin-bottom: 40px; }
    @media(min-width: 992px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; gap: 60px; } }

    .footer-logo { max-height: 60px; margin-bottom: 20px; display: block; filter: brightness(0) invert(1); }
    .footer-brand { font-size: 2.2rem; font-weight: 800; color: #ffffff; margin-bottom: 20px; letter-spacing: -1px; }
    .footer-desc { font-size: 0.95rem; line-height: 1.8; margin-bottom: 25px; font-weight: 500; color: #94a3b8; max-width: 95%; }
    
    .footer-socials { display: flex; gap: 15px; }
    .footer-socials a { display: flex; align-items: center; justify-content: center; width: 35px; height: 35px; background: #ffffff; color: #171a21; border-radius: 50%; transition: 0.3s; }
    .footer-socials a:hover { background: #3b82f6; color: #ffffff; transform: translateY(-3px); }
    .footer-socials svg { width: 18px; height: 18px; fill: currentColor; }

    .footer-heading { font-size: 1.4rem; font-weight: 700; color: #ffffff; margin-bottom: 25px; }
    .footer-links { list-style: none; padding: 0; margin: 0; }
    .footer-links li { margin-bottom: 15px; }
    .footer-links a { color: #cbd5e1; text-decoration: none; font-size: 0.95rem; font-weight: 500; display: flex; align-items: center; gap: 10px; transition: 0.3s; }
    .footer-links a:hover { color: #ffffff; transform: translateX(5px); }
    .footer-arrow { font-size: 1.2rem; color: #ffffff; line-height: 1; }

    .footer-bottom { border-top: 1px solid #334155; padding-top: 30px; text-align: center; }
    .footer-copyright { font-size: 0.95rem; font-weight: 500; color: #94a3b8; }
</style>

<footer class="dark-footer">
    <div class="container">
        <div class="footer-grid">
            
            <div>
                <?php if(!empty($site_settings['site_logo'])): ?>
                    <img src="<?php echo get_image_url('logo', $site_settings['site_logo']); ?>" alt="Logo" class="footer-logo">
                <?php else: ?>
                    <h2 class="footer-brand"><?php echo htmlspecialchars($site_settings['site_name'] ?? 'eCommerce'); ?></h2>
                <?php endif; ?>
                <p class="footer-desc">
                    Our Main Goal Is To Provide Essential Digital Products & Services At Affordable Prices. Totally Transparent & Guaranteed Service.
                </p>
                <div class="footer-socials">
                    <a href="#"><svg viewBox="0 0 24 24"><path d="M12 2C6.477 2 2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.879V14.89h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.989C18.343 21.129 22 16.99 22 12c0-5.523-4.477-10-10-10z"/></svg></a>
                    <a href="#"><svg viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg></a>
                </div>
            </div>

            <div>
                <h3 class="footer-heading">Information</h3>
                <ul class="footer-links">
                    <li><a href="page.php?slug=about-us"><span class="footer-arrow">&#9656;</span> About Us</a></li>
                    <li><a href="page.php?slug=contact-us"><span class="footer-arrow">&#9656;</span> Contact Us</a></li>
                    <li><a href="products.php"><span class="footer-arrow">&#9656;</span> All Products</a></li>
                    <li><a href="account.php?tab=orders"><span class="footer-arrow">&#9656;</span> Order History</a></li>
                </ul>
            </div>

            <div>
                <h3 class="footer-heading">Useful Links</h3>
                <ul class="footer-links">
                    <li><a href="page.php?slug=faq"><span class="footer-arrow">&#9656;</span> FAQ</a></li>
                    <li><a href="page.php?slug=privacy-policy"><span class="footer-arrow">&#9656;</span> Privacy Policy</a></li>
                    <li><a href="page.php?slug=refund-policy"><span class="footer-arrow">&#9656;</span> Refund Policy</a></li>
                    <li><a href="page.php?slug=terms-conditions"><span class="footer-arrow">&#9656;</span> Terms & Conditions</a></li>
                </ul>
            </div>

        </div>

        <div class="footer-bottom">
            <div class="footer-copyright">
                &copy; <?php echo date('Y'); ?> All Rights Reserved By <?php echo htmlspecialchars($site_settings['site_name'] ?? 'Your Brand'); ?>
            </div>
        </div>
    </div>
</footer>

<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
<script>
    // Swiper configurations
    if(document.querySelector('.bannerSwiper')) {
        new Swiper(".bannerSwiper", { loop: true, autoplay: { delay: 3500 }, pagination: { el: ".swiper-pagination", clickable: true }, effect: "fade" });
    }
    document.querySelectorAll('.productSwiper').forEach(function(slider) {
        new Swiper(slider, { slidesPerView: 2, spaceBetween: 10, breakpoints: { 768: { slidesPerView: 3 }, 1024: { slidesPerView: 4 } } });
    });
</script>
</body>
</html>
