<?php
if ( apply_filters( 'pawfect_is_pro_active', false ) ) {
?>
<?php
$footer_bg_color = get_theme_mod('pawfect_footer_background_color', '#313134');
$footer_widgets_enabled = get_theme_mod('pawfect_footer_widgets_enabled', true);
$footer_feature_columns = get_theme_mod('pawfect_footer_feature_columns', '4');
$footer_links_columns = get_theme_mod('pawfect_footer_links_columns', '4');
$footer_logo_enabled = get_theme_mod('pawfect_footer_logo_enabled', true);
$footer_logo_size = get_theme_mod('pawfect_footer_logo_size', json_encode(array(
    'desktop' => 64,
    'tablet' => 56,
    'mobile' => 48,
)));
?>
<footer class="pawfect-relative pawfect-text-white pawfect-pt-48 pawfect-pb-10 pawfect-footer" style="background-color: <?php echo esc_attr($footer_bg_color); ?>">
        <div class="pawfect-relative pawfect-z-10 pawfect-container-narrow pawfect-mx-auto pawfect-px-4 pawfect-overflow-hidden pawfect-footer-paw">

            <?php if ($footer_widgets_enabled): ?>
                <!-- Footer Top Feature Row - Dynamic columns -->
                <div class="pawfect-footer-features-heading pawfect-grid pawfect-grid-cols-2 md:pawfect-grid-cols-<?php echo esc_attr($footer_feature_columns); ?> pawfect-gap-8 pawfect-mb-16 pawfect-text-center">
                    <?php for ($i = 1; $i <= (int)$footer_feature_columns; $i++): ?>
                        <?php if (is_active_sidebar('footer-feature-' . $i)): ?>
                            <div class="pawfect-footer-feature-area pawfect-flex pawfect-flex-col pawfect-items-center pawfect-text-center">
                                <?php dynamic_sidebar('footer-feature-' . $i); ?>
                            </div>
                        <?php endif; ?>
                    <?php endfor; ?>
                </div>

                <!-- Footer Grid Columns - Dynamic columns -->
                <div class="pawfect-footer-widgets-heading pawfect-footer-widgets pawfect-text-center pawfect-mb-16">
                    <div class="pawfect-grid pawfect-grid-cols-2 md:pawfect-grid-cols-<?php echo esc_attr($footer_links_columns); ?> pawfect-gap-10 pawfect-mb-10 pawfect-text-center">
                        <?php for ($i = 1; $i <= (int)$footer_links_columns; $i++): ?>
                            <?php if (is_active_sidebar('footer-widget-' . $i)): ?>
                                <div class="pawfect-footer-widget-area">
                                    <?php dynamic_sidebar('footer-widget-' . $i); ?>
                                </div>
                            <?php endif; ?>
                        <?php endfor; ?>
                    </div>
                </div>
            <?php endif; ?>

            <?php if ($footer_logo_enabled): ?>
                <!-- Logo Section -->
                <div class="pawfect-text-center pawfect-mb-8 pawfect-footer-logo-container">
                    <?php
                    // Get site logo or fallback to default
                    $site_logo = get_theme_mod('custom_logo');
                    if ($site_logo) {
                        $logo_url = wp_get_attachment_image_url($site_logo, 'full');
                        $logo_alt = get_bloginfo('name') . ' Logo';
                    } else {
                        // Fallback to theme default logo
                        $logo_url = get_template_directory_uri() . '/assets/images/logo-white.webp';
                        $logo_alt = get_bloginfo('name') . ' Logo';
                    }
                    ?>
                    <img src="<?php echo esc_url($logo_url); ?>"
                         alt="<?php echo esc_attr($logo_alt); ?>"
                         class="pawfect-mx-auto pawfect-footer-logo">
                </div>
            <?php endif; ?>
            <?php
            // Payment cards settings
            $show_payment_cards = get_theme_mod('pawfect_show_payment_cards', true);
            $show_visa = get_theme_mod('pawfect_show_visa', true);
            $show_mastercard = get_theme_mod('pawfect_show_mastercard', true);
            $show_amex = get_theme_mod('pawfect_show_amex', true);
            $show_paypal = get_theme_mod('pawfect_show_paypal', true);

            if ($show_payment_cards): ?>
                <div class="pawfect-flex pawfect-justify-center pawfect-gap-4 pawfect-mb-4">
                    <?php if ($show_visa): ?>
                        <img src="<?php echo esc_url(get_template_directory_uri()); ?>/assets/images/payment/visa-svgrepo-com.svg" width="38" height="24" alt="Visa" />
                    <?php endif; ?>
                    <?php if ($show_mastercard): ?>
                        <img src="<?php echo esc_url(get_template_directory_uri()); ?>/assets/images/payment/mastercard-svgrepo-com.svg" width="38" height="24" alt="Mastercard" />
                    <?php endif; ?>
                    <?php if ($show_amex): ?>
                        <img src="<?php echo esc_url(get_template_directory_uri()); ?>/assets/images/payment/amex-svgrepo-com.svg" width="38" height="24" alt="Amex" />
                    <?php endif; ?>
                    <?php if ($show_paypal): ?>
                        <img src="<?php echo esc_url(get_template_directory_uri()); ?>/assets/images/payment/paypal-svgrepo-com.svg" width="38" height="24" alt="PayPal" />
                    <?php endif; ?>
                </div>
            <?php endif; ?>

            <!-- Footer Copyright Section -->
            <?php
            $footer_copyright_text = get_theme_mod('pawfect_footer_copyright_text', '&copy; ' . date('Y') . ' ' . get_bloginfo('name') . '. Made with 🐾 WordPress.');
            ?>
            <div class="pawfect-border-t pawfect-pt-4 pawfect-text-center pawfect-text-sm pawfect-text-gray-500 pawfect-mt-4 pawfect-footer-copyright" style="border-top-color: rgba(128, 128, 128, 0.15);">
                <p><?php echo wp_kses_post($footer_copyright_text); ?></p>
            </div>
        </div>
    </footer>
    <div id="pawfect-mobile-drawer" class="pawfect-fixed pawfect-top-0 pawfect-left-0 pawfect-h-full pawfect-w-full sm:pawfect-w-80 md:pawfect-w-96 pawfect-bg-pawfect-dark pawfect-text-white pawfect-p-6 pawfect-z-50 pawfect-transform pawfect--translate-x-full pawfect-transition-transform pawfect-duration-300 lg:pawfect-hidden">
        <div class="pawfect-flex pawfect-justify-between pawfect-items-center pawfect-mb-6">
            <h2 class="pawfect-text-2xl pawfect-font-bold"><?php bloginfo('name'); ?></h2>
            <?php
            $primary_color = get_theme_mod('pawfect_primary_color', '#F4A259');
            ?>
            <button id="pawfect-menu-close" class="pawfect-text-white pawfect-transition-colors pawfect-p-2 pawfect-rounded-full"
                    style="background-color: <?php echo esc_attr($primary_color); ?>;">
                <svg class="pawfect-w-4 pawfect-h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </button>
        </div>
        <nav class="pawfect-mobile-nav pawfect-flex pawfect-flex-col pawfect-gap-4 pawfect-text-sm pawfect-font-medium">
            <?php
            // Use WordPress primary menu for mobile drawer
            if (has_nav_menu('primary')) {
                wp_nav_menu([
                    'theme_location' => 'primary',
                    'container' => false,
                    'menu_class' => 'pawfect-mobile-menu-list',
                    'walker' => new Pawfect_Mobile_Nav_Walker(),
                    'fallback_cb' => false,
                ]);
            } else {
                // Fallback menu if no primary menu is set
                echo '<div class="pawfect-mobile-menu-fallback">';
                echo '<a href="' . esc_url(home_url('/')) . '" class="pawfect-mobile-menu-link">Home</a>';
                echo '<a href="' . esc_url(home_url('/shop/')) . '" class="pawfect-mobile-menu-link">Shop</a>';
                echo '<a href="' . esc_url(home_url('/blog/')) . '" class="pawfect-mobile-menu-link">Blog</a>';
                echo '<a href="' . esc_url(home_url('/contact/')) . '" class="pawfect-mobile-menu-link">Contact</a>';
                echo '</div>';
            }
            ?>
            <hr class="pawfect-my-4 pawfect-border-gray-700" />
            <div class="pawfect-mobile-menu-extras pawfect-flex pawfect-flex-col pawfect-gap-3">
                <?php if (class_exists('WooCommerce')): ?>
                    <a href="<?php echo wc_get_page_permalink('myaccount'); ?>" class="pawfect-mobile-menu-link">
                        <svg class="pawfect-w-4 pawfect-h-4 pawfect-inline pawfect-mr-2" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
                        </svg>
                        My Account
                    </a>
                    <a href="<?php echo wc_get_cart_url(); ?>" class="pawfect-mobile-menu-link">
                        <svg class="pawfect-w-4 pawfect-h-4 pawfect-inline pawfect-mr-2" fill="currentColor" viewBox="0 0 20 20">
                            <path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
                        </svg>
                        Cart
                    </a>
                <?php endif; ?>
                <a href="<?php echo esc_url(home_url('/?s=')); ?>" class="pawfect-mobile-menu-link">
                    <svg class="pawfect-w-4 pawfect-h-4 pawfect-inline pawfect-mr-2" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path>
                    </svg>
                    Search
                </a>
            </div>
        </nav>
    </div>

    <!-- Promotional Popup Modal - Two Column Layout with Image -->
    <?php
    // Always show the modal HTML, JavaScript will control visibility
    // This ensures the modal is available for testing
    ?>
    <div id="pawfect-promo-modal" class="pawfect-fixed pawfect-inset-0 pawfect-bg-black pawfect-bg-opacity-50 pawfect-z-50 pawfect-opacity-0 pawfect-invisible pawfect-pointer-events-none pawfect-transition-all pawfect-duration-300" style="display: none;">
        <div class="pawfect-flex pawfect-items-center pawfect-justify-center pawfect-min-h-screen pawfect-p-4">
            <div class="pawfect-bg-white pawfect-rounded-2xl pawfect-shadow-2xl pawfect-w-full pawfect-max-w-4xl pawfect-transform pawfect-scale-95 pawfect-transition-transform pawfect-duration-300 pawfect-relative pawfect-overflow-hidden" id="pawfect-promo-modal-content">
                <!-- Close button - matching search modal style -->
             
                <button id="pawfect-promo-close" class="pawfect-absolute pawfect-top-4 pawfect-right-4 pawfect-z-10 pawfect-text-gray-400 pawfect-text-gray-600 pawfect-transition-colors pawfect-p-2 pawfect-rounded-full pawfect-bg-gray-100">
                    <svg class="pawfect-w-4 pawfect-h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>

                <!-- Two Column Layout -->
                <div class="pawfect-flex pawfect-flex-col md:pawfect-flex-row pawfect-min-h-[400px]">
                    <!-- Left Side - Image -->
                    <div class="pawfect-w-full md:pawfect-w-1/2 pawfect-relative" style="background-color: <?php echo esc_attr(get_theme_mod('pawfect_popup_bg_color', '#f3e8ff')); ?>;">
                        <?php
                        $popup_image = get_theme_mod('pawfect_popup_image', '');
                        if (!empty($popup_image)) : ?>
                            <img src="<?php echo esc_url($popup_image); ?>" alt="<?php esc_attr_e('Promotional Image', 'pawfect'); ?>" class="pawfect-w-full pawfect-h-full pawfect-object-cover">
                        <?php else : ?>
                            <div class="pawfect-absolute pawfect-inset-0 pawfect-flex pawfect-items-center pawfect-justify-center pawfect-p-8">
                                <div class="pawfect-text-center">
                                    <div class="pawfect-w-32 pawfect-h-32 pawfect-mx-auto pawfect-mb-4 pawfect-bg-gradient-to-r pawfect-from-pawfect-primary pawfect-to-orange-400 pawfect-rounded-full pawfect-flex pawfect-items-center pawfect-justify-center pawfect-shadow-xl">
                                        <svg class="pawfect-w-16 pawfect-h-16 pawfect-text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7"></path>
                                        </svg>
                                    </div>
                                    <h3 class="pawfect-text-xl pawfect-font-semibold pawfect-text-gray-700 pawfect-mb-2"><?php echo esc_html(get_theme_mod('pawfect_popup_title', 'Get 10% Off')); ?></h3>
                                    <p class="pawfect-text-gray-600"><?php echo esc_html(get_theme_mod('pawfect_popup_subtitle', 'Be in the know')); ?></p>
                                </div>
                            </div>
                        <?php endif; ?>
                    </div>

                    <!-- Right Side - Content -->
                    <div class="pawfect-w-full md:pawfect-w-1/2 pawfect-p-8 pawfect-flex pawfect-flex-col pawfect-justify-center">
                        <!-- Promotional Title -->
                        <h2 class="pawfect-text-3xl pawfect-font-bold pawfect-text-gray-900 pawfect-mb-4">
                            <?php echo esc_html(get_theme_mod('pawfect_popup_title', 'Get 10% Off')); ?><br>
                            <span class="pawfect-text-2xl pawfect-font-normal"><?php echo esc_html(get_theme_mod('pawfect_popup_subtitle', 'Be in the know')); ?></span>
                        </h2>

                        <!-- Promotional Description -->
                        <p class="pawfect-text-gray-600 pawfect-mb-6 pawfect-leading-relaxed">
                            <?php echo esc_html(get_theme_mod('pawfect_popup_description', 'Sexy and sustainable goodies? Sign me up')); ?>
                        </p>

                        <!-- Email Form -->
                        <form id="pawfect-popup-form" class="pawfect-mb-6">
                            <!-- Email Input -->
                            <div class="pawfect-mb-4">
                                <input type="email" id="pawfect-promo-email" name="email" placeholder="<?php echo esc_attr(get_theme_mod('pawfect_popup_email_placeholder', 'Enter your email')); ?>" required
                                       class="pawfect-w-full pawfect-px-4 pawfect-py-3 pawfect-border pawfect-border-gray-300 pawfect-rounded-lg pawfect-text-gray-900 pawfect-placeholder-gray-500 pawfect-transition-all pawfect-duration-200 focus:pawfect-border-pawfect-primary focus:pawfect-ring-2 focus:pawfect-ring-pawfect-primary focus:pawfect-ring-opacity-20 focus:pawfect-outline-none">
                            </div>

                            <!-- Action Button -->
                            <div class="pawfect-mb-4">
                                <button type="submit" id="pawfect-promo-subscribe"
                                        class="pawfect-w-full pawfect-py-3 pawfect-px-6 pawfect-rounded-lg pawfect-font-semibold pawfect-transition-all pawfect-duration-200 focus:pawfect-outline-none focus:pawfect-ring-2 focus:pawfect-ring-opacity-50"
                                        style="background-color: <?php echo esc_attr(get_theme_mod('pawfect_popup_button_bg', '#1f2937')); ?>; color: <?php echo esc_attr(get_theme_mod('pawfect_popup_button_text_color', '#ffffff')); ?>;">
                                    <?php echo esc_html(get_theme_mod('pawfect_popup_button_text', 'GET 10% OFF')); ?>
                                </button>
                            </div>
                        </form>

                        <!-- Social Icons -->
                        <?php if (get_theme_mod('pawfect_popup_show_social', true)) : ?>
                        <div class="pawfect-flex pawfect-justify-center pawfect-space-x-4 pawfect-mb-4">
                            <?php
                            // Add customizer edit shortcut for social media icons
                            if (is_customize_preview()) {
                                echo '<div data-customize-partial-id="pawfect_social_media_icons" data-customize-partial-type="widget" data-customize-partial-placement-context="footer">';
                            }

                            // Use dynamic social media icons from customizer
                            $social_icons_html = pawfect_get_social_media_icons(array(
                                'container_class' => '',
                                'icon_class' => 'pawfect-text-gray-400 hover:pawfect-text-gray-600 pawfect-transition-colors pawfect-text-lg',
                                'color' => '#9CA3AF',
                                'hover_color' => '#6B7280'
                            ));

                            if (!empty($social_icons_html)) {
                                // Remove the container div from the function output and just show the icons
                                $social_icons_html = preg_replace('/<div[^>]*>/', '', $social_icons_html);
                                $social_icons_html = str_replace('</div>', '', $social_icons_html);
                                echo $social_icons_html;
                            } else {
                                // Fallback to default icons if no custom icons are set
                                ?>
                                <a href="#" class="pawfect-text-gray-400 hover:pawfect-text-gray-600 pawfect-transition-colors">
                                    <i class="fab fa-facebook-f pawfect-text-lg"></i>
                                </a>
                                <a href="#" class="pawfect-text-gray-400 hover:pawfect-text-gray-600 pawfect-transition-colors">
                                    <i class="fab fa-twitter pawfect-text-lg"></i>
                                </a>
                                <a href="#" class="pawfect-text-gray-400 hover:pawfect-text-gray-600 pawfect-transition-colors">
                                    <i class="fab fa-instagram pawfect-text-lg"></i>
                                </a>
                                <a href="#" class="pawfect-text-gray-400 hover:pawfect-text-gray-600 pawfect-transition-colors">
                                    <i class="fab fa-pinterest pawfect-text-lg"></i>
                                </a>
                                <?php
                            }

                            if (is_customize_preview()) {
                                echo '</div>';
                            }
                            ?>
                        </div>
                        <?php endif; ?>

                        <!-- Dismiss Link -->
                        <div class="pawfect-text-center">
                            <button id="pawfect-promo-dismiss" class="pawfect-text-gray-500 pawfect-text-sm pawfect-underline pawfect-transition-colors hover:pawfect-text-gray-700">
                                <?php echo esc_html(get_theme_mod('pawfect_popup_dismiss_text', 'No thanks, continue browsing')); ?>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <?php if (class_exists('WooCommerce')): ?>
        <!-- Quick View Modal - Matching Search Modal Style -->
        <div id="pawfect-quick-view-modal" class="pawfect-fixed pawfect-inset-0 pawfect-bg-black pawfect-bg-opacity-50 pawfect-z-50 pawfect-opacity-0 pawfect-invisible pawfect-pointer-events-none pawfect-transition-all pawfect-duration-300" style="display: none;">
            <div class="pawfect-flex pawfect-items-center pawfect-justify-center pawfect-min-h-screen pawfect-p-4">
                <div class="pawfect-bg-white pawfect-rounded-2xl pawfect-shadow-2xl pawfect-w-full pawfect-max-w-4xl pawfect-transform pawfect-scale-95 pawfect-transition-transform pawfect-duration-300 pawfect-max-h-[90vh] pawfect-overflow-hidden pawfect-relative" id="pawfect-quick-view-modal-content">
                    <!-- Absolute positioned close button - matching search modal style -->
                    <button id="pawfect-quick-view-close" class="pawfect-absolute pawfect-top-4 pawfect-right-4 pawfect-z-10 pawfect-text-gray-400 pawfect-text-gray-600 pawfect-p-2 pawfect-rounded-full pawfect-bg-gray-100">
                        <svg class="pawfect-w-4 pawfect-h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                    </button>

                    <!-- Quick View Header -->
                    <div class="pawfect-flex pawfect-items-center pawfect-justify-between pawfect-p-6 pawfect-border-b pawfect-border-gray-100">
                        <h3 class="pawfect-text-xl pawfect-font-semibold pawfect-text-gray-900">Quick View</h3>
                        <!-- Empty space for balance since close button is now absolute -->
                        <div class="pawfect-w-9 pawfect-h-9"></div>
                    </div>

                    <!-- Modal Content -->
                    <div id="pawfect-quick-view-content" class="pawfect-p-6 pawfect-overflow-y-auto pawfect-max-h-[calc(90vh-80px)]">
                        <!-- Content will be loaded here via AJAX -->
                        <div class="pawfect-text-center pawfect-py-12">
                            <svg class="pawfect-w-8 pawfect-h-8 pawfect-mx-auto pawfect-mb-4 pawfect-text-gray-400 pawfect-animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
                            </svg>
                            <p class="pawfect-text-gray-600"><?php _e('Loading product...', 'pawfect'); ?></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <?php endif; ?>

    <?php wp_footer(); // IMPORTANT: WordPress hook for scripts, admin bar, etc. ?>
</body>
</html>
<?php } else { ?>
<?php

// Exit if accessed directly.
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}
$footer_bg_color = get_theme_mod('pawfect_footer_background_color', '#313134');
$footer_widgets_enabled = get_theme_mod('pawfect_footer_widgets_enabled', true);
$footer_feature_columns = get_theme_mod('pawfect_footer_feature_columns', '4');
$footer_links_columns = get_theme_mod('pawfect_footer_links_columns', '4');
$footer_logo_enabled = get_theme_mod('pawfect_footer_logo_enabled', true);
$footer_logo_size = get_theme_mod('pawfect_footer_logo_size', json_encode(array(
    'desktop' => 64,
    'tablet' => 56,
    'mobile' => 48,
)));
?>
<footer class="pawfect-relative pawfect-text-white pawfect-pt-48 pawfect-pb-10 pawfect-footer" style="background-color: <?php echo esc_attr($footer_bg_color); ?>">
        <div class="pawfect-relative pawfect-z-10 pawfect-container-narrow pawfect-mx-auto pawfect-px-4 pawfect-overflow-hidden pawfect-footer-paw">

            <?php if ($footer_widgets_enabled): ?>
                <!-- Footer Top Feature Row - Dynamic columns -->
                <div class="pawfect-footer-features-heading pawfect-grid pawfect-grid-cols-2 md:pawfect-grid-cols-<?php echo esc_attr($footer_feature_columns); ?> pawfect-gap-8 pawfect-mb-16 pawfect-text-center">
                    <?php for ($i = 1; $i <= (int)$footer_feature_columns; $i++): ?>
                        <?php if (is_active_sidebar('footer-feature-' . $i)): ?>
                            <div class="pawfect-footer-feature-area pawfect-flex pawfect-flex-col pawfect-items-center pawfect-text-center">
                                <?php dynamic_sidebar('footer-feature-' . $i); ?>
                            </div>
                        <?php
        endif; ?>
                    <?php
    endfor; ?>
                </div>

                <!-- Footer Grid Columns - Dynamic columns -->
                <div class="pawfect-footer-widgets-heading pawfect-footer-widgets pawfect-text-center pawfect-mb-16">
                    <div class="pawfect-grid pawfect-grid-cols-2 md:pawfect-grid-cols-<?php echo esc_attr($footer_links_columns); ?> pawfect-gap-10 pawfect-mb-10 pawfect-text-center">
                        <?php for ($i = 1; $i <= (int)$footer_links_columns; $i++): ?>
                            <?php if (is_active_sidebar('footer-widget-' . $i)): ?>
                                <div class="pawfect-footer-widget-area">
                                    <?php dynamic_sidebar('footer-widget-' . $i); ?>
                                </div>
                            <?php endif; ?>
                        <?php endfor; ?>
                    </div>
                </div>
            <?php endif; ?>

            <?php if ($footer_logo_enabled): ?>
                <!-- Logo Section -->
                <div class="pawfect-text-center pawfect-mb-8 pawfect-footer-logo-container">
                    <?php
                    // Get site logo or fallback to default
                    $site_logo = get_theme_mod('custom_logo');
                    if ($site_logo) {
                        $logo_url = wp_get_attachment_image_url($site_logo, 'full');
                        $logo_alt = get_bloginfo('name') . ' Logo';
                    } else {
                        // Fallback to theme default logo
                        $logo_url = get_template_directory_uri() . '/assets/images/logo-white.webp';
                        $logo_alt = get_bloginfo('name') . ' Logo';
                    }
                    ?>
                    <img src="<?php echo esc_url($logo_url); ?>"
                         alt="<?php echo esc_attr($logo_alt); ?>"
                         class="pawfect-mx-auto pawfect-footer-logo">
                </div>
            <?php endif; ?>
            <?php
// Payment cards settings
$show_payment_cards = get_theme_mod('pawfect_show_payment_cards', true);
$show_visa = get_theme_mod('pawfect_show_visa', true);
$show_mastercard = get_theme_mod('pawfect_show_mastercard', true);
$show_amex = get_theme_mod('pawfect_show_amex', true);
$show_paypal = get_theme_mod('pawfect_show_paypal', true);

if ($show_payment_cards): ?>
                <div class="pawfect-flex pawfect-justify-center pawfect-gap-4 pawfect-mb-4">
                    <?php if ($show_visa): ?>
                        <img src="<?php echo esc_url(get_template_directory_uri()); ?>/assets/images/payment/visa-svgrepo-com.svg" width="38" height="24" alt="Visa" />
                    <?php
    endif; ?>
                    <?php if ($show_mastercard): ?>
                        <img src="<?php echo esc_url(get_template_directory_uri()); ?>/assets/images/payment/mastercard-svgrepo-com.svg" width="38" height="24" alt="Mastercard" />
                    <?php
    endif; ?>
                    <?php if ($show_amex): ?>
                        <img src="<?php echo esc_url(get_template_directory_uri()); ?>/assets/images/payment/amex-svgrepo-com.svg" width="38" height="24" alt="Amex" />
                    <?php
    endif; ?>
                    <?php if ($show_paypal): ?>
                        <img src="<?php echo esc_url(get_template_directory_uri()); ?>/assets/images/payment/paypal-svgrepo-com.svg" width="38" height="24" alt="PayPal" />
                    <?php
    endif; ?>
                </div>
            <?php
endif; ?>

            <!-- Footer Copyright Section -->
            <?php
$footer_copyright_text = get_theme_mod('pawfect_footer_copyright_text', '&copy; ' . wp_date('Y') . ' ' . get_bloginfo('name') . '. Made with 🐾 WordPress.');
?>
            <div class="pawfect-border-t pawfect-pt-4 pawfect-text-center pawfect-text-sm pawfect-text-gray-500 pawfect-mt-4 pawfect-footer-copyright" style="border-top-color: rgba(128, 128, 128, 0.15);">
                <p><?php echo wp_kses_post($footer_copyright_text); ?></p>
            </div>
        </div>
    </footer>
    <div id="pawfect-mobile-drawer" class="pawfect-fixed pawfect-top-0 pawfect-left-0 pawfect-h-full pawfect-w-full sm:pawfect-w-80 md:pawfect-w-96 pawfect-bg-pawfect-dark pawfect-text-white pawfect-p-6 pawfect-z-50 pawfect-transform pawfect--translate-x-full pawfect-transition-transform pawfect-duration-300 lg:pawfect-hidden">
        <div class="pawfect-flex pawfect-justify-between pawfect-items-center pawfect-mb-6">
            <h2 class="pawfect-text-2xl pawfect-font-bold"><?php bloginfo('name'); ?></h2>
            <?php
$primary_color = get_theme_mod('pawfect_primary_color', '#F4A259');
?>
            <button id="pawfect-menu-close" class="pawfect-text-white pawfect-transition-colors pawfect-p-2 pawfect-rounded-full"
                    style="background-color: <?php echo esc_attr($primary_color); ?>;">
                <svg class="pawfect-w-4 pawfect-h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </button>
        </div>
        <nav class="pawfect-mobile-nav pawfect-flex pawfect-flex-col pawfect-gap-4 pawfect-text-sm pawfect-font-medium">
            <?php
// Use WordPress primary menu for mobile drawer
if (has_nav_menu('primary')) {
    wp_nav_menu([
        'theme_location' => 'primary',
        'container' => false,
        'menu_class' => 'pawfect-mobile-menu-list',
        'walker' => new Pawfect_Mobile_Nav_Walker(),
        'fallback_cb' => false,
    ]);
}
else {
    // Exact styled fallback menu if no primary menu is set
    echo '<ul class="pawfect-mobile-menu-list">';
    
    // Add Home link
    echo '<div class="pawfect-mobile-menu-item pawfect-flex pawfect-items-center pawfect-py-3 pawfect-border-b pawfect-border-gray-700">';
    echo '<a href="' . esc_url(home_url('/')) . '" class="pawfect-mobile-menu-link pawfect-text-white pawfect-no-underline pawfect-flex pawfect-items-center pawfect-flex-1"><span>' . esc_html__('Home', 'pawfect') . '</span></a>';
    echo '</div>';
    
    // Loop top pages
    $pages = get_pages(array('parent' => 0, 'number' => 5, 'sort_column' => 'menu_order, post_title'));
    if (!empty($pages)) {
        foreach ($pages as $p) {
            echo '<div class="pawfect-mobile-menu-item pawfect-flex pawfect-items-center pawfect-py-3 pawfect-border-b pawfect-border-gray-700">';
            echo '<a href="' . esc_url(get_permalink($p->ID)) . '" class="pawfect-mobile-menu-link pawfect-text-white pawfect-no-underline pawfect-flex pawfect-items-center pawfect-flex-1"><span>' . esc_html($p->post_title) . '</span></a>';
            echo '</div>';
        }
    }
    
    echo '</ul>';
}
?>
            <div class="pawfect-mobile-menu-extras pawfect-flex pawfect-flex-col pawfect-gap-3 pawfect-mt-4 pawfect-pt-2">
                <?php if (class_exists('WooCommerce')): ?>
                    <a href="<?php echo esc_url(wc_get_page_permalink('myaccount')); ?>" class="pawfect-mobile-menu-link">
                        <svg class="pawfect-w-4 pawfect-h-4 pawfect-inline pawfect-mr-2" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
                        </svg>
                        <?php esc_html_e('My Account', 'pawfect'); ?>
                    </a>
                    <a href="<?php echo esc_url(wc_get_cart_url()); ?>" class="pawfect-mobile-menu-link">
                        <svg class="pawfect-w-4 pawfect-h-4 pawfect-inline pawfect-mr-2" fill="currentColor" viewBox="0 0 20 20">
                            <path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
                        </svg>
                        <?php esc_html_e('Cart', 'pawfect'); ?>
                    </a>
                <?php
endif; ?>
                <a href="#" class="pawfect-mobile-menu-link pawfect-search-toggle">
                    <svg class="pawfect-w-4 pawfect-h-4 pawfect-inline pawfect-mr-2" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path>
                    </svg>
                    <?php esc_html_e('Search', 'pawfect'); ?>
                </a>
            </div>
        </nav>
    </div>

    <?php if (class_exists('WooCommerce')): ?>
        <!-- Quick View Modal - Matching Search Modal Style -->
        <div id="pawfect-quick-view-modal" class="pawfect-fixed pawfect-inset-0 pawfect-bg-black pawfect-bg-opacity-50 pawfect-z-50 pawfect-opacity-0 pawfect-invisible pawfect-pointer-events-none pawfect-transition-all pawfect-duration-300" style="display: none;">
            <div class="pawfect-flex pawfect-items-center pawfect-justify-center pawfect-min-h-screen pawfect-p-4">
                <div class="pawfect-bg-white pawfect-rounded-2xl pawfect-shadow-2xl pawfect-w-full pawfect-max-w-4xl pawfect-transform pawfect-scale-95 pawfect-transition-transform pawfect-duration-300 pawfect-max-h-[90vh] pawfect-overflow-hidden pawfect-relative" id="pawfect-quick-view-modal-content">
                    <!-- Absolute positioned close button - matching search modal style -->
                    <button id="pawfect-quick-view-close" class="pawfect-absolute pawfect-top-4 pawfect-right-4 pawfect-z-10 pawfect-text-gray-400 pawfect-text-gray-600 pawfect-p-2 pawfect-rounded-full pawfect-bg-gray-100">
                        <svg class="pawfect-w-4 pawfect-h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                    </button>

                    <!-- Quick View Header -->
                    <div class="pawfect-flex pawfect-items-center pawfect-justify-between pawfect-p-6 pawfect-border-b pawfect-border-gray-100">
                        <h3 class="pawfect-text-xl pawfect-font-semibold pawfect-text-gray-900"><?php esc_html_e('Quick View', 'pawfect'); ?></h3>
                        <!-- Empty space for balance since close button is now absolute -->
                        <div class="pawfect-w-9 pawfect-h-9"></div>
                    </div>

                    <!-- Modal Content -->
                    <div id="pawfect-quick-view-content" class="pawfect-p-6 pawfect-overflow-y-auto pawfect-max-h-[calc(90vh-80px)]">
                        <!-- Content will be loaded here via AJAX -->
                        <div class="pawfect-text-center pawfect-py-12">
                            <svg class="pawfect-w-8 pawfect-h-8 pawfect-mx-auto pawfect-mb-4 pawfect-text-gray-400 pawfect-animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
                            </svg>
                            <p class="pawfect-text-gray-600"><?php esc_html_e('Loading product...', 'pawfect'); ?></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <?php
endif; ?>

    <?php wp_footer(); // IMPORTANT: WordPress hook for scripts, admin bar, etc. ?>
</body>
</html>
<?php } ?>



