<?php
// /includes/footer.php
?>
    </main>
    
    <!-- Footer -->
    <footer class="bg-brand-900 text-white mt-auto" role="contentinfo">
        <!-- Newsletter Banner -->
        <div class="bg-brand-800 border-b border-brand-700">
            <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8 lg:py-10">
                <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
                    <div class="lg:max-w-lg">
                        <h3 class="text-xl lg:text-2xl font-bold text-white mb-2 flex items-center gap-2">
                            <i data-lucide="mail" class="w-6 h-6 text-accent-400" aria-hidden="true"></i>
                            Stay in the Loop
                        </h3>
                        <p class="text-brand-200 text-sm lg:text-base">Get the latest deals, updates, and exclusive offers delivered straight to your inbox.</p>
                    </div>
                    <form action="#" method="POST" class="w-full lg:w-auto lg:min-w-[400px]" aria-label="Newsletter subscription">
                        <div class="flex flex-col sm:flex-row gap-3">
                            <div class="relative flex-grow">
                                <i data-lucide="mail" class="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" aria-hidden="true"></i>
                                <input type="email" 
                                       name="email" 
                                       placeholder="Enter your email address" 
                                       class="w-full pl-12 pr-4 py-3.5 text-gray-800 bg-white rounded-xl focus:outline-none focus:ring-2 focus:ring-accent-400 focus:ring-offset-2 focus:ring-offset-brand-800 transition-all duration-200"
                                       required
                                       aria-label="Email address for newsletter">
                            </div>
                            <button type="submit" 
                                    class="bg-accent-400 text-gray-900 font-bold px-6 py-3.5 rounded-xl hover:bg-accent-500 transition-all duration-200 flex items-center justify-center gap-2 btn-hover-lift whitespace-nowrap">
                                <span>Subscribe</span>
                                <i data-lucide="arrow-right" class="w-5 h-5" aria-hidden="true"></i>
                            </button>
                        </div>
                        <p class="text-brand-300 text-xs mt-2 flex items-center gap-1">
                            <i data-lucide="shield-check" class="w-3 h-3" aria-hidden="true"></i>
                            We respect your privacy. Unsubscribe anytime.
                        </p>
                    </form>
                </div>
            </div>
        </div>
        
        <!-- Main Footer Content -->
        <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-16">
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-12">
                
                <!-- Brand Column -->
                <div class="sm:col-span-2 lg:col-span-1">
                    <a href="/" class="inline-flex items-center gap-2 text-2xl lg:text-3xl font-bold text-white mb-4 hover:text-brand-200 transition-colors duration-200">
                        <span class="bg-white text-brand-900 rounded-lg px-2 py-1 text-xl lg:text-2xl font-extrabold">F</span>
                        <span>FexZoh</span>
                    </a>
                    <p class="text-brand-200 text-sm leading-relaxed mb-6">
                        Nigeria's premier marketplace for buying and selling anything. Our mission is to create a safe, simple, and efficient platform for local commerce across Nigeria.
                    </p>
                    <!-- Social Links -->
                    <div class="flex items-center gap-3">
                        <a href="#" 
                           class="w-10 h-10 rounded-full bg-brand-800 flex items-center justify-center text-brand-300 hover:bg-brand-600 hover:text-white transition-all duration-200"
                           aria-label="Follow us on Facebook">
                            <i data-lucide="facebook" class="w-5 h-5" aria-hidden="true"></i>
                        </a>
                        <a href="#" 
                           class="w-10 h-10 rounded-full bg-brand-800 flex items-center justify-center text-brand-300 hover:bg-brand-600 hover:text-white transition-all duration-200"
                           aria-label="Follow us on Twitter">
                            <i data-lucide="twitter" class="w-5 h-5" aria-hidden="true"></i>
                        </a>
                        <a href="#" 
                           class="w-10 h-10 rounded-full bg-brand-800 flex items-center justify-center text-brand-300 hover:bg-brand-600 hover:text-white transition-all duration-200"
                           aria-label="Follow us on Instagram">
                            <i data-lucide="instagram" class="w-5 h-5" aria-hidden="true"></i>
                        </a>
                        <a href="#" 
                           class="w-10 h-10 rounded-full bg-brand-800 flex items-center justify-center text-brand-300 hover:bg-brand-600 hover:text-white transition-all duration-200"
                           aria-label="Follow us on LinkedIn">
                            <i data-lucide="linkedin" class="w-5 h-5" aria-hidden="true"></i>
                        </a>
                    </div>
                </div>

                <!-- Navigate Column -->
                <div>
                    <h3 class="text-base font-semibold text-white mb-4 flex items-center gap-2">
                        <i data-lucide="compass" class="w-4 h-4 text-accent-400" aria-hidden="true"></i>
                        Navigate
                    </h3>
                    <nav aria-label="Footer navigation">
                        <ul class="space-y-3">
                            <li>
                                <a href="/listing.php" 
                                   class="group flex items-center text-brand-200 hover:text-white transition-colors duration-200 text-sm">
                                    <i data-lucide="chevron-right" class="w-4 h-4 mr-2 text-brand-600 group-hover:text-accent-400 transition-colors duration-200" aria-hidden="true"></i>
                                    Browse Listings
                                </a>
                            </li>
                            <li>
                                <a href="/categories.php" 
                                   class="group flex items-center text-brand-200 hover:text-white transition-colors duration-200 text-sm">
                                    <i data-lucide="chevron-right" class="w-4 h-4 mr-2 text-brand-600 group-hover:text-accent-400 transition-colors duration-200" aria-hidden="true"></i>
                                    Categories
                                </a>
                            </li>
                            <li>
                                <a href="/about.php" 
                                   class="group flex items-center text-brand-200 hover:text-white transition-colors duration-200 text-sm">
                                    <i data-lucide="chevron-right" class="w-4 h-4 mr-2 text-brand-600 group-hover:text-accent-400 transition-colors duration-200" aria-hidden="true"></i>
                                    About Us
                                </a>
                            </li>
                            <li>
                                <a href="/contact.php" 
                                   class="group flex items-center text-brand-200 hover:text-white transition-colors duration-200 text-sm">
                                    <i data-lucide="chevron-right" class="w-4 h-4 mr-2 text-brand-600 group-hover:text-accent-400 transition-colors duration-200" aria-hidden="true"></i>
                                    Contact Us
                                </a>
                            </li>
                            <li>
                                <a href="/blog.php" 
                                   class="group flex items-center text-brand-200 hover:text-white transition-colors duration-200 text-sm">
                                    <i data-lucide="chevron-right" class="w-4 h-4 mr-2 text-brand-600 group-hover:text-accent-400 transition-colors duration-200" aria-hidden="true"></i>
                                    Blog
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>

                <!-- Support Column -->
                <div>
                    <h3 class="text-base font-semibold text-white mb-4 flex items-center gap-2">
                        <i data-lucide="help-circle" class="w-4 h-4 text-accent-400" aria-hidden="true"></i>
                        Support
                    </h3>
                    <nav aria-label="Support links">
                        <ul class="space-y-3">
                            <li>
                                <a href="/terms.php" 
                                   class="group flex items-center text-brand-200 hover:text-white transition-colors duration-200 text-sm">
                                    <i data-lucide="chevron-right" class="w-4 h-4 mr-2 text-brand-600 group-hover:text-accent-400 transition-colors duration-200" aria-hidden="true"></i>
                                    Terms & Conditions
                                </a>
                            </li>
                            <li>
                                <a href="/privacy.php" 
                                   class="group flex items-center text-brand-200 hover:text-white transition-colors duration-200 text-sm">
                                    <i data-lucide="chevron-right" class="w-4 h-4 mr-2 text-brand-600 group-hover:text-accent-400 transition-colors duration-200" aria-hidden="true"></i>
                                    Privacy Policy
                                </a>
                            </li>
                            <li>
                                <a href="/dmca.php" 
                                   class="group flex items-center text-brand-200 hover:text-white transition-colors duration-200 text-sm">
                                    <i data-lucide="chevron-right" class="w-4 h-4 mr-2 text-brand-600 group-hover:text-accent-400 transition-colors duration-200" aria-hidden="true"></i>
                                    DMCA Policy
                                </a>
                            </li>
                            <li>
                                <a href="/safety.php" 
                                   class="group flex items-center text-brand-200 hover:text-white transition-colors duration-200 text-sm">
                                    <i data-lucide="chevron-right" class="w-4 h-4 mr-2 text-brand-600 group-hover:text-accent-400 transition-colors duration-200" aria-hidden="true"></i>
                                    Safety Tips
                                </a>
                            </li>
                            <li>
                                <a href="/faq.php" 
                                   class="group flex items-center text-brand-200 hover:text-white transition-colors duration-200 text-sm">
                                    <i data-lucide="chevron-right" class="w-4 h-4 mr-2 text-brand-600 group-hover:text-accent-400 transition-colors duration-200" aria-hidden="true"></i>
                                    FAQ
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>

                <!-- Contact Column -->
                <div>
                    <h3 class="text-base font-semibold text-white mb-4 flex items-center gap-2">
                        <i data-lucide="message-square" class="w-4 h-4 text-accent-400" aria-hidden="true"></i>
                        Get in Touch
                    </h3>
                    <ul class="space-y-4">
                        <li class="flex items-start gap-3">
                            <span class="w-9 h-9 rounded-lg bg-brand-800 flex items-center justify-center flex-shrink-0">
                                <i data-lucide="mail" class="w-4 h-4 text-brand-300" aria-hidden="true"></i>
                            </span>
                            <div>
                                <p class="text-brand-300 text-xs uppercase tracking-wide">Email</p>
                                <a href="mailto:support@fexzoh.com" class="text-white hover:text-accent-400 transition-colors duration-200 text-sm">
                                    support@fexzoh.com
                                </a>
                            </div>
                        </li>
                        <li class="flex items-start gap-3">
                            <span class="w-9 h-9 rounded-lg bg-brand-800 flex items-center justify-center flex-shrink-0">
                                <i data-lucide="phone" class="w-4 h-4 text-brand-300" aria-hidden="true"></i>
                            </span>
                            <div>
                                <p class="text-brand-300 text-xs uppercase tracking-wide">Phone</p>
                                <a href="tel:+2348000000000" class="text-white hover:text-accent-400 transition-colors duration-200 text-sm">
                                    +234 800 000 0000
                                </a>
                            </div>
                        </li>
                        <li class="flex items-start gap-3">
                            <span class="w-9 h-9 rounded-lg bg-brand-800 flex items-center justify-center flex-shrink-0">
                                <i data-lucide="map-pin" class="w-4 h-4 text-brand-300" aria-hidden="true"></i>
                            </span>
                            <div>
                                <p class="text-brand-300 text-xs uppercase tracking-wide">Location</p>
                                <p class="text-white text-sm">Lagos, Nigeria</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        
        <!-- Bottom Bar -->
        <div class="border-t border-brand-800">
            <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-6">
                <div class="flex flex-col md:flex-row justify-between items-center gap-4">
                    <p class="text-brand-300 text-sm text-center md:text-left">
                        
                    </p>
                    <div class="flex items-center gap-6 text-sm">
                        <a href="/sitemap.xml" class="text-brand-300 hover:text-white transition-colors duration-200">Sitemap</a>
                        <span class="text-brand-700">|</span>
                        <a href="/rss.xml" class="text-brand-300 hover:text-white transition-colors duration-200">RSS Feed</a>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <!-- Floating Action Button (FAB) Styles -->
    <style>
        /* Base styles for the sub-buttons for a staggered animation */
        .sub-button {
            opacity: 0;
            transform: translateY(20px) scale(0.8);
            transition: opacity 0.3s ease-out, transform 0.3s ease-out, box-shadow 0.2s ease;
            pointer-events: none;
        }

        /* When the menu is active, we make the sub-buttons visible */
        .fab-container.active .sub-button {
            opacity: 1;
            transform: translateY(0) scale(1);
            pointer-events: auto;
        }
        
        /* Stagger the animation for each button */
        .fab-container.active .sub-button:nth-child(1) { transition-delay: 0.08s; }
        .fab-container.active .sub-button:nth-child(2) { transition-delay: 0.16s; }
        .fab-container.active .sub-button:nth-child(3) { transition-delay: 0.24s; }

        /* Sub-button hover effects */
        .sub-button:hover {
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
            transform: translateY(-2px) scale(1.05) !important;
        }

        /* Style for the main button icon's rotation */
        .main-fab-icon {
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .fab-container.active .main-fab-icon {
            transform: rotate(135deg);
        }
        
        /* Main FAB hover and focus states */
        #mainFab {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        #mainFab:hover {
            transform: scale(1.05);
            box-shadow: 0 8px 30px rgba(37, 99, 235, 0.4);
        }
        #mainFab:active {
            transform: scale(0.95);
        }
        
        /* Tooltip for sub-buttons */
        .sub-button {
            position: relative;
        }
        .sub-button::after {
            content: attr(title);
            position: absolute;
            right: calc(100% + 12px);
            top: 50%;
            transform: translateY(-50%) translateX(10px);
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 500;
            white-space: nowrap;
            opacity: 0;
            visibility: hidden;
            transition: all 0.2s ease;
        }
        .sub-button:hover::after {
            opacity: 1;
            visibility: visible;
            transform: translateY(-50%) translateX(0);
        }
        
        /* Mobile FAB adjustments */
        @media (max-width: 640px) {
            #fabContainer {
                bottom: 1rem;
                right: 1rem;
            }
            #mainFab {
                width: 56px;
                height: 56px;
            }
            .sub-button {
                width: 48px !important;
                height: 48px !important;
            }
            .sub-button::after {
                display: none;
            }
        }
        
        /* Reduced motion preference */
        @media (prefers-reduced-motion: reduce) {
            .sub-button,
            .main-fab-icon,
            #mainFab {
                transition: none;
            }
            .fab-container.active .sub-button {
                transition-delay: 0s;
            }
        }
    </style>

    <!-- Floating Action Button (FAB) Container -->
    <div id="fabContainer" class="fab-container fixed bottom-6 right-6 sm:bottom-8 sm:right-8 z-50" aria-label="Quick actions">
        
        <!-- Sub-buttons Menu -->
        <div id="fabMenu" class="flex flex-col items-center gap-3 mb-4" role="menu" aria-label="Quick action menu">
            <!-- Post an Ad -->
            <a href="/user/create_ad.php" 
               class="sub-button w-14 h-14 rounded-full bg-white text-brand-600 flex items-center justify-center shadow-lg hover:bg-brand-50 focus:outline-none focus:ring-2 focus:ring-brand-400"
               role="menuitem"
               title="Post an Ad"
               aria-label="Post a new advertisement">
                <i data-lucide="plus-square" class="w-6 h-6" aria-hidden="true"></i>
            </a>
            <!-- Messages -->
            <a href="/user/messages.php" 
               class="sub-button w-14 h-14 rounded-full bg-white text-purple-600 flex items-center justify-center shadow-lg hover:bg-purple-50 focus:outline-none focus:ring-2 focus:ring-purple-400"
               role="menuitem"
               title="Messages"
               aria-label="View messages">
                <i data-lucide="message-circle" class="w-6 h-6" aria-hidden="true"></i>
            </a>
            <!-- Listings -->
            <a href="/listing.php" 
               class="sub-button w-14 h-14 rounded-full bg-white text-green-600 flex items-center justify-center shadow-lg hover:bg-green-50 focus:outline-none focus:ring-2 focus:ring-green-400"
               role="menuitem"
               title="Browse Listings"
               aria-label="Browse all listings">
                <i data-lucide="list" class="w-6 h-6" aria-hidden="true"></i>
            </a>
        </div>

        <!-- Main FAB Button -->
        <button id="mainFab" 
                class="w-14 h-14 sm:w-16 sm:h-16 bg-brand-600 rounded-2xl flex items-center justify-center text-white shadow-xl hover:bg-brand-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-600"
                aria-expanded="false"
                aria-controls="fabMenu"
                aria-label="Toggle quick actions menu">
            <i data-lucide="plus" class="main-fab-icon w-6 h-6 sm:w-8 sm:h-8" aria-hidden="true"></i>
        </button>
    </div>
    <!-- End Floating Action Button -->

    <!-- Initialize Lucide Icons -->
    <script>
        // Initialize all lucide icons on the page
        if (typeof lucide !== 'undefined') {
            lucide.createIcons();
        }
    </script>
    
    <!-- Floating Action Button Logic -->
    <script>
        (function() {
            const fabContainer = document.getElementById('fabContainer');
            const mainFab = document.getElementById('mainFab');
            const fabMenu = document.getElementById('fabMenu');

            if (!fabContainer || !mainFab || !fabMenu) return;

            const mainFabIcon = mainFab.querySelector('i');
            let isActive = false;

            function toggleMenu() {
                isActive = !isActive;
                fabContainer.classList.toggle('active', isActive);
                mainFab.setAttribute('aria-expanded', isActive.toString());
                
                // Change icon
                mainFabIcon.setAttribute('data-lucide', isActive ? 'x' : 'plus');
                
                // Re-render icon
                if (typeof lucide !== 'undefined') {
                    lucide.createIcons({
                        nodes: [mainFabIcon]
                    });
                }
            }

            function closeMenu() {
                if (isActive) {
                    isActive = false;
                    fabContainer.classList.remove('active');
                    mainFab.setAttribute('aria-expanded', 'false');
                    mainFabIcon.setAttribute('data-lucide', 'plus');
                    
                    if (typeof lucide !== 'undefined') {
                        lucide.createIcons({
                            nodes: [mainFabIcon]
                        });
                    }
                }
            }

            // Toggle on main button click
            mainFab.addEventListener('click', function(event) {
                event.stopPropagation();
                toggleMenu();
            });

            // Close menu when clicking outside
            document.addEventListener('click', function(event) {
                if (!fabContainer.contains(event.target)) {
                    closeMenu();
                }
            });

            // Close menu on escape key
            document.addEventListener('keydown', function(event) {
                if (event.key === 'Escape' && isActive) {
                    closeMenu();
                    mainFab.focus();
                }
            });

            // Handle sub-button clicks
            const subButtons = fabMenu.querySelectorAll('.sub-button');
            subButtons.forEach(function(button) {
                button.addEventListener('click', function() {
                    // Small delay to allow navigation before closing
                    setTimeout(closeMenu, 150);
                });
            });

            // Hide FAB on scroll down, show on scroll up (optional enhancement)
            let lastScrollY = window.scrollY;
            let ticking = false;

            function updateFabVisibility() {
                const currentScrollY = window.scrollY;
                
                // Only hide/show after scrolling 100px
                if (Math.abs(currentScrollY - lastScrollY) > 100) {
                    if (currentScrollY > lastScrollY && currentScrollY > 300) {
                        // Scrolling down - hide FAB slightly
                        fabContainer.style.transform = 'translateY(20px)';
                        fabContainer.style.opacity = '0.7';
                    } else {
                        // Scrolling up - show FAB
                        fabContainer.style.transform = 'translateY(0)';
                        fabContainer.style.opacity = '1';
                    }
                    lastScrollY = currentScrollY;
                }
                ticking = false;
            }

            window.addEventListener('scroll', function() {
                if (!ticking) {
                    window.requestAnimationFrame(updateFabVisibility);
                    ticking = true;
                }
            }, { passive: true });
        })();
    </script>
    </body>
</html>