<!-- Footer Section -->
<footer class="stripe-footer bg-black py-4 mt-5">
    <div class="container">
        <!-- Secure Checkout & Payment Badges Stripe -->
        <div class="d-flex flex-wrap gap-2 justify-content-center align-items-center mb-3">
            <span class="text-muted small me-2" style="font-size: 0.72rem; color: var(--text-gray) !important;">Secure Checkout:</span>
            <span class="badge payment-badge-outline" title="Cash on Delivery">COD</span>
            <span class="badge payment-badge-outline" style="color: var(--accent-gold) !important;" title="PayHere Gateway">PayHere</span>
            <span class="badge payment-badge-outline" title="Bank Transfer"><i class="fa-solid fa-building-columns text-info me-1"></i> Bank Wire</span>
            <span class="badge payment-badge-outline" title="Koko"><span class="text-success fw-bold">koko</span></span>
            <span class="badge payment-badge-outline" title="Mintpay"><span class="text-danger fw-bold">mint</span>pay</span>
            <span class="badge payment-badge-outline" title="PayPal"><i class="fa-brands fa-paypal text-primary me-1"></i>PayPal</span>
        </div>

        <hr class="border-secondary opacity-25 my-3" style="border-color: rgba(var(--accent-gold-rgb), 0.15) !important;">

        <!-- Main Stripe Row -->
        <div class="row align-items-center justify-content-between g-3">
            <!-- Left: Copyright & Contact -->
            <div class="col-lg-4 text-center text-lg-start">
                <p class="text-muted mb-1 small" style="font-size: 0.75rem; color: var(--text-gray) !important;">
                    &copy; <?php echo date('Y'); ?> MARTLUX. All rights reserved. Wear Your Confidence.
                </p>
                <p class="text-muted mb-0 small" style="font-size: 0.70rem; color: var(--text-gray) !important;">
                    <i class="fa-solid fa-location-dot me-1"></i> No.10/4, Menikhinna, Kandy <span class="mx-1">|</span> <i class="fa-solid fa-phone me-1"></i> 076 414 6054
                </p>
            </div>

            <!-- Center: Flat Navigation Links -->
            <div class="col-lg-5 text-center">
                <div class="d-flex flex-wrap justify-content-center gap-4 small" style="font-size: 0.8rem; font-family: var(--font-heading); letter-spacing: 1.5px;">
                    <a href="index.php" class="text-muted text-decoration-none hover-gold text-uppercase">Home</a>
                    <a href="shop.php" class="text-muted text-decoration-none hover-gold text-uppercase">Shop</a>
                    <a href="about.php" class="text-muted text-decoration-none hover-gold text-uppercase">About</a>
                    <a href="contact.php" class="text-muted text-decoration-none hover-gold text-uppercase">Contact</a>
                </div>
            </div>

            <!-- Right: Outlined Social Media Links -->
            <div class="col-lg-3 text-center text-lg-end">
                <div class="d-flex justify-content-center justify-content-lg-end gap-2">
                    <a href="#" class="social-icon-circle" title="Instagram"><i class="fa-brands fa-instagram"></i></a>
                    <a href="#" class="social-icon-circle" title="Facebook"><i class="fa-brands fa-facebook-f"></i></a>
                    <a href="#" class="social-icon-circle" title="Pinterest"><i class="fa-brands fa-pinterest-p"></i></a>
                    <a href="#" class="social-icon-circle" title="TikTok"><i class="fa-brands fa-tiktok"></i></a>
                </div>
            </div>
        </div>
    </div>
</footer>

<!-- Bootstrap 5 JS Bundle -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- Main Javascript -->
<script src="assets/js/main.js"></script>

<!-- Global Wishlist Helper -->
<script>
function addToWishlist(productId) {
    fetch('wishlist_action.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `action=add&product_id=${productId}`
    })
    .then(response => response.json())
    .then(data => {
        if (data.status === 'success') {
            if (window.showToast) {
                window.showToast(data.message);
            } else {
                alert(data.message);
            }
            
            // Dynamic update of wishlist badge
            let badge = document.querySelector('.wishlist-badge');
            if (badge) {
                badge.textContent = data.wishlist_count;
                badge.style.display = 'inline-block';
            } else {
                let heartBtn = document.querySelector('a[href="wishlist.php"]');
                if (heartBtn) {
                    let newBadge = document.createElement('span');
                    newBadge.className = 'position-absolute top-0 start-100 translate-middle badge bg-warning text-black rounded-circle wishlist-badge';
                    newBadge.style.fontSize = '0.55rem';
                    newBadge.style.padding = '2px 5px';
                    newBadge.style.marginLeft = '2px';
                    newBadge.style.marginTop = '-2px';
                    newBadge.textContent = data.wishlist_count;
                    heartBtn.appendChild(newBadge);
                }
            }
        } else {
            if (window.showToast) {
                window.showToast(data.message, 'error');
            } else {
                alert(data.message);
            }
        }
    })
    .catch(error => {
        console.error('Wishlist error:', error);
        if (window.showToast) {
            window.showToast('Could not save to wishlist. Please try again.', 'error');
        }
    });
}
</script>

<style>
    /* Premium Redesigned Footer Styles */
    footer.luxury-footer {
        background: linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-black) 100%) !important;
        border-top: 1px solid rgba(var(--accent-gold-rgb), 0.2) !important;
        position: relative;
        overflow: hidden;
    }
    
    footer.luxury-footer::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 50%;
        height: 1px;
        background: radial-gradient(circle, var(--accent-gold) 0%, transparent 100%);
        box-shadow: 0 0 15px var(--accent-gold);
        pointer-events: none;
    }

    .footer-watermark {
        position: absolute;
        bottom: -30px;
        right: -20px;
        font-size: 8.5rem;
        font-family: var(--font-heading);
        font-weight: 900;
        color: rgba(255, 255, 255, 0.012);
        pointer-events: none;
        user-select: none;
        line-height: 1;
        text-transform: uppercase;
        letter-spacing: 5px;
    }

    .social-icon-circle {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        border: 1px solid rgba(var(--accent-gold-rgb), 0.25);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--text-gray);
        transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
        text-decoration: none !important;
        font-size: 0.85rem;
    }
    
    .social-icon-circle:hover {
        background: var(--accent-gold);
        color: var(--bg-black) !important;
        border-color: var(--accent-gold);
        transform: translateY(-3px) scale(1.05);
        box-shadow: 0 5px 15px rgba(var(--accent-gold-rgb), 0.25);
    }

    .footer-newsletter-input {
        background: transparent !important;
        border: none !important;
        border-bottom: 2px solid var(--border-gray) !important;
        border-radius: 0 !important;
        color: var(--text-white) !important;
        padding: 0.6rem 0.2rem !important;
        transition: all 0.4s ease !important;
        box-shadow: none !important;
        font-size: 0.85rem !important;
    }
    
    .footer-newsletter-input:focus {
        border-bottom-color: var(--accent-gold) !important;
    }
    
    .footer-newsletter-btn {
        background: transparent !important;
        border: 1px solid var(--accent-gold) !important;
        color: var(--accent-gold) !important;
        border-radius: 30px !important;
        padding: 0.5rem 1.8rem !important;
        text-transform: uppercase;
        font-size: 0.72rem !important;
        letter-spacing: 1.5px;
        font-weight: 700;
        transition: all 0.3s ease !important;
    }
    
    .footer-newsletter-btn:hover {
        background: var(--accent-gold) !important;
        color: var(--bg-black) !important;
        box-shadow: 0 5px 15px rgba(var(--accent-gold-rgb), 0.2);
    }

    .payment-badge-outline {
        background: rgba(10, 17, 30, 0.45) !important;
        border: 1px solid rgba(var(--accent-gold-rgb), 0.2) !important;
        color: var(--text-gray) !important;
        font-size: 0.65rem !important;
        padding: 0.45rem 0.85rem !important;
        border-radius: 6px !important;
        font-weight: 600 !important;
    }

    .hover-gold:hover {
        color: var(--accent-gold) !important;
        transition: color 0.2s ease-in-out;
    }
    .text-gray {
        color: var(--text-gray);
    }
    .dropdown-item:hover {
        background-color: var(--accent-gold) !important;
        color: black !important;
    }
    footer a {
        transition: all 0.3s ease;
    }
</style>

</body>
</html>
