/**
 * Footer Component
 * Dynamically loads the Kelly Green footer across all pages
 */

(function() {
    const footerHTML = `
    <footer class="bg-[#0E503F] text-white pb-6 pt-[34px]">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid md:grid-cols-3 gap-6 mb-6">
                <div>
                    <h4 class="text-lg font-semibold mb-3">Contact Info</h4>
                    <ul class="space-y-1 text-white">
                        <li><i class="fas fa-phone mr-2"></i> (206) 466-3669</li>
                        <li><i class="fas fa-envelope mr-2"></i> hello@kellygreenplants.com</li>
                        <li><i class="fas fa-map-marker-alt mr-2"></i> Seattle, WA</li>
                    </ul>
                </div>

                <div>
                    <h4 class="text-lg font-semibold mb-3">Quick Links</h4>
                    <ul class="space-y-1">
                        <li><a href="services.html" class="text-white hover:text-white transition-colors">Services</a></li>
                        <li><a href="pricing.html" class="text-white hover:text-white transition-colors">Pricing</a></li>
                        <li><a href="about.html" class="text-white hover:text-white transition-colors">About</a></li>
                        <li><a href="index.html#contact" class="text-white hover:text-white transition-colors">Contact</a></li>
                    </ul>
                </div>

                <div>
                    <h4 class="text-lg font-semibold mb-3">Accreditations</h4>
                    <div class="mt-2" id="bbb-seal-container">
                        <a href="https://www.bbb.org/us/wa/seattle/profile/interior-design-plants-and-maintenance/kelly-green-1296-1000190107/#sealclick" id="bbblink" class="rbvtbam" target="_blank" rel="nofollow"><img src="https://seal-alaskaoregonwesternwashington.bbb.org/logo/rbvtbam/bbb-1000190107.png" style="border: 0;" alt="Kelly Green BBB Business Review" /></a>
                    </div>
                </div>
            </div>

            <div class="mt-4 text-center">
                <div class="mt-[17px] flex items-center justify-center">
                    <div class="flex-1 border-t border-white"></div>
                    <div class="px-4 flex space-x-4">
                        <a href="https://www.facebook.com/profile.php?id=61578243431083" target="_blank" class="text-white hover:text-white transition-colors">
                            <i class="fab fa-facebook-f text-lg"></i>
                        </a>
                        <a href="https://www.instagram.com/kellygreenplants/" target="_blank" class="text-white hover:text-white transition-colors">
                            <i class="fab fa-instagram text-lg"></i>
                        </a>
                        <a href="https://www.linkedin.com/company/kelly-green-plants/?viewAsMember=true" target="_blank" class="text-white hover:text-white transition-colors">
                            <i class="fab fa-linkedin-in text-lg"></i>
                        </a>
                    </div>
                    <div class="flex-1 border-t border-white"></div>
                </div>

                <img src="Website_pics/LogoLight.png" alt="Kelly Green Logo" class="h-8 mb-2 mx-auto mt-3">
                <p class="text-white mt-2">&copy; 2025 Kelly Green. All rights reserved.</p>
                <div class="mt-1 flex justify-center space-x-6">
                    <a href="terms-of-service.html" class="text-white hover:text-white transition-colors font-bold underline">Legal Stuff</a>
                    <a href="privacy-policy.html" class="text-white hover:text-white transition-colors font-bold underline">Your Privacy</a>
                </div>
            </div>
        </div>
    </footer>
    `;

    // Wait for DOM to be ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', insertFooter);
    } else {
        insertFooter();
    }

    function insertFooter() {
        const footerContainer = document.getElementById('footer-container');
        if (footerContainer) {
            footerContainer.innerHTML = footerHTML;

            // Load BBB script after footer HTML is inserted
            // Scripts in innerHTML don't execute, so we need to load it manually
            loadBBBScript();
        }
    }

    function loadBBBScript() {
        // Check if script already exists
        if (document.querySelector('script[src*="legacy.js"]')) {
            return;
        }

        // Create and insert the BBB script
        const script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'https://seal-alaskaoregonwesternwashington.bbb.org/inc/legacy.js';

        // Insert script before the BBB link so it can find and style it
        const bbbContainer = document.getElementById('bbb-seal-container');
        if (bbbContainer) {
            bbbContainer.insertBefore(script, bbbContainer.firstChild);
        }
    }
})();