 <footer class="bakla-modern-footer"
        data-aos="fade-up"
        data-aos-duration="1000"
        data-aos-offset="50">

    <div class="wave-svg-layer"
         data-aos="fade-in"
         data-aos-duration="1200"
         data-aos-delay="100">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 40" preserveAspectRatio="none">
            <path d="M0,0 C300,30 600,0 900,25 C1050,40 1150,15 1200,20 L1200,40 L0,40 Z" fill="#0c0c12" opacity="0.85"/>
            <path d="M0,40 L1200,40 L1200,30 C1050,40 900,20 750,30 C600,40 400,20 200,30 C100,35 50,38 0,40 Z" fill="#9e2a27" opacity="0.25"/>
        </svg>
    </div>

    <div class="footer-container">
        <div class="footer-grid">
            <!-- Column 1: Logo & Contact -->
            <div class="footer-col brand-col"
                 data-aos="fade-right"
                 data-aos-duration="800"
                 data-aos-delay="200"
                 data-aos-offset="50">
                <?php
                // DYNAMIC LOGO FROM WORDPRESS SITE IDENTITY (custom_logo)
                $custom_logo_id = get_theme_mod('custom_logo');
                $logo = wp_get_attachment_image_src($custom_logo_id, 'full');
                ?>
                <div class="footer-logo"
                     data-aos="zoom-in"
                     data-aos-duration="600"
                     data-aos-delay="300">
                    <?php if ($logo) : ?>
                        <a href="<?php echo esc_url(home_url('/')); ?>">
                            <img src="<?php echo esc_url($logo[0]); ?>" alt="<?php bloginfo('name'); ?>">
                        </a>
                    <?php else : ?>
                        <a href="<?php echo esc_url(home_url('/')); ?>" class="footer-logo text-logo">
                            <?php bloginfo('name'); ?>
                        </a>
                    <?php endif; ?>
                </div>

                <!-- contact info with reduced gap -->
                <div class="footer-contact">
                    <a href="tel:+256706713232" class="contact-link"
                       data-aos="fade-up"
                       data-aos-duration="500"
                       data-aos-delay="400">
                        <i class="fas fa-phone-alt"></i> +256 706 713 232
                    </a>
                    <a href="tel:+256777305812" class="contact-link"
                       data-aos="fade-up"
                       data-aos-duration="500"
                       data-aos-delay="450">
                        <i class="fas fa-mobile-alt"></i> +256 777 305 812
                    </a>
                    <a href="mailto:info@baklaltd.com" class="contact-link"
                       data-aos="fade-up"
                       data-aos-duration="500"
                       data-aos-delay="500">
                        <i class="fas fa-paper-plane"></i> info@baklaltd.com
                    </a>
                </div>
            </div>

            <!-- Column 2: Pricing -->
            <div class="footer-col links-col"
                 data-aos="fade-up"
                 data-aos-duration="800"
                 data-aos-delay="300"
                 data-aos-offset="50">
                <h4 class="footer-heading"
                    data-aos="fade-up"
                    data-aos-duration="500"
                    data-aos-delay="400">
                    Pricing
                </h4>
                <ul class="footer-links">
                    <li data-aos="fade-up" data-aos-duration="400" data-aos-delay="450">
                        <a href="<?php echo kipya_url_for_path('website-design'); ?>">
                            <i class="fas fa-arrow-right"></i> Website Design
                        </a>
                    </li>
                    <li data-aos="fade-up" data-aos-duration="400" data-aos-delay="500">
                        <a href="<?php echo kipya_url_for_path('website-maintenance'); ?>">
                            <i class="fas fa-arrow-right"></i> Website Maintenance
                        </a>
                    </li>
                    <li data-aos="fade-up" data-aos-duration="400" data-aos-delay="550">
                        <a href="<?php echo kipya_url_for_path('digital-communications-management'); ?>">
                            <i class="fas fa-arrow-right"></i> Digital Communications Management
                        </a>
                    </li>
                    <li data-aos="fade-up" data-aos-duration="400" data-aos-delay="600">
                        <a href="<?php echo kipya_url_for_path('brand-identity-visual-design'); ?>">
                            <i class="fas fa-arrow-right"></i> Brand Identity & Visual Design
                        </a>
                    </li>
                </ul>
            </div>

            <!-- Column 3: Legal -->
            <div class="footer-col links-col"
                 data-aos="fade-up"
                 data-aos-duration="800"
                 data-aos-delay="350"
                 data-aos-offset="50">
                <h4 class="footer-heading"
                    data-aos="fade-up"
                    data-aos-duration="500"
                    data-aos-delay="450">
                    Legal
                </h4>
                <ul class="footer-links">
                    <li data-aos="fade-up" data-aos-duration="400" data-aos-delay="500">
                        <a href="<?php echo kipya_url_for_path('privacy-policy'); ?>">
                            <i class="fas fa-arrow-right"></i> Privacy Policy
                        </a>
                    </li>
                    <li data-aos="fade-up" data-aos-duration="400" data-aos-delay="550">
                        <a href="<?php echo kipya_url_for_path('terms-of-service'); ?>">
                            <i class="fas fa-arrow-right"></i> Terms of Service
                        </a>
                    </li>
                    <li data-aos="fade-up" data-aos-duration="400" data-aos-delay="600">
                        <a href="<?php echo kipya_url_for_path('cookies-policy'); ?>">
                            <i class="fas fa-arrow-right"></i> Cookie Policy
                        </a>
                    </li>
                    <li data-aos="fade-up" data-aos-duration="400" data-aos-delay="650">
                        <a href="<?php echo kipya_url_for_path('billing-policy'); ?>">
                            <i class="fas fa-arrow-right"></i> Billing Policy
                        </a>
                    </li>
                    <li data-aos="fade-up" data-aos-duration="400" data-aos-delay="700">
                        <a href="<?php echo kipya_url_for_path('client-expectation-policy'); ?>">
                            <i class="fas fa-arrow-right"></i> Client Expectation Policy
                        </a>
                    </li>
                </ul>
            </div>
        </div>

        <!-- Footer Bottom -->
        <div class="footer-bottom" >
            <div class="social-icons">
                <a href="https://linkedin.com/in/baklaltd" class="social-link" target="_blank" rel="noopener"
                   >
                    <i class="fab fa-linkedin-in"></i>
                </a>
                <a href="https://x.com/baklaltd" class="social-link" target="_blank" rel="noopener"
                   >
                    <i class="fab fa-x-twitter"></i>
                </a>
                <a href="https://instagram.com/baklaltd" class="social-link" target="_blank" rel="noopener"
                   >
                    <i class="fab fa-instagram"></i>
                </a>
                <a href="https://facebook.com/baklaltd" class="social-link" target="_blank" rel="noopener"
                   >
                    <i class="fab fa-facebook-f"></i>
                </a>
            </div>
            <div class="copyright" >
                <span>© <?php echo date('Y'); ?> Bakla Ltd. All rights reserved. Designed with <i class="fas fa-heart" style="color:#e04e4a; font-size:0.65rem;"></i> in Kampala</span>
            </div>
            <a href="#" class="back-to-top" id="backToTopTrigger">
                <i class="fas fa-chevron-up"></i>
                <span>Top</span>
            </a>
        </div>
    </div>
    
    <!-- WhatsApp Chatbot Button -->
    <a href="https://wa.me/256706713232" 
       class="whatsapp-chatbot" 
       target="_blank" 
       rel="noopener noreferrer"
       aria-label="Chat on WhatsApp">
        <i class="fab fa-whatsapp"></i>
        <span class="tooltip-text">Chat with us</span>
    </a>
</footer>

<script>
    // Smooth back to top
    const topBtn = document.getElementById('backToTopTrigger');
    if (topBtn) {
        topBtn.addEventListener('click', (e) => {
            e.preventDefault();
            window.scrollTo({ top: 0, behavior: 'smooth' });
        });
    }
    
    // Additional: ensure that any dynamically loaded images from WordPress maintain white filter
    // (already handled by CSS, but if logo changes, filter persists)
    console.log('BAKLA footer — dynamic logo from site identity, Quick Links, visible arrows, contact spacing reduced');
</script>

<?php wp_footer(); ?>