components/footer.js

class CustomFooter extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                    background: #111827;
                    border-top: 1px solid #374151;
                }
                
                .footer-link {
                    transition: color 0.3s ease;
                }
                
                .footer-link:hover {
                    color: #fca5a5;
                }
            </style>
            <footer class="py-16">
                <div class="container mx-auto px-6">
                    <div class="grid md:grid-cols-4 gap-12">
                        <!-- Company Info -->
                        <div class="md:col-span-2">
                            <div class="flex items-center space-x-3 mb-6">
                                <i data-feather="search" class="text-red-500 w-8 h-8"></i>
                                <span class="text-3xl font-bold text-white">SearchExperts<span class="text-red-500">.ca</span></span>
                            </div>
                            <p class="text-gray-400 mb-8 max-w-lg text-lg leading-relaxed">
                                Premier SEO agency delivering exceptional results through data-driven strategies, 
                                advanced analytics, and unparalleled expertise in digital marketing.
                            </p>
                            <div class="flex space-x-6">
                                <a href="#" class="text-gray-400 hover:text-red-500 transition-colors duration-300">
                                    <i data-feather="twitter" class="w-6 h-6"></i>
                                </a>
                                <a href="#" class="text-gray-400 hover:text-red-500 transition-colors duration-300">
                                    <i data-feather="linkedin" class="w-6 h-6"></i>
                                </a>
                                <a href="#" class="text-gray-400 hover:text-red-500 transition-colors duration-300">
                                    <i data-feather="facebook" class="w-6 h-6"></i>
                                </a>
                                <a href="#" class="text-gray-400 hover:text-red-500 transition-colors duration-300">
                                    <i data-feather="instagram" class="w-6 h-6"></i>
                                </a>
                            </div>
                        </div>
                        
                        <!-- Services -->
                        <div>
                            <h3 class="text-xl font-bold text-white mb-6">Our Services</h3>
                            <div class="space-y-4">
                                <a href="#services" class="block footer-link text-gray-400 hover:text-white text-lg">SEO Optimization</a>
                                <a href="#services" class="block footer-link text-gray-400 hover:text-white text-lg">Performance Analytics</a>
                                <a href="#services" class="block footer-link text-gray-400 hover:text-white text-lg">ROI Optimization</a>
                                <a href="#services" class="block footer-link text-gray-400 hover:text-white text-lg">Content Strategy</a>
                            </div>
                        </div>
                        
                        <!-- Quick Links -->
                        <div>
                            <h3 class="text-xl font-bold text-white mb-6">Company</h3>
                            <div class="space-y-4">
                                <a href="#about" class="block footer-link text-gray-400 hover:text-white text-lg">About Us</a>
                                <a href="#application" class="block footer-link text-gray-400 hover:text-white text-lg">Apply Now</a>
                                <a href="#" class="block footer-link text-gray-400 hover:text-white text-lg">Case Studies</a>
                                <a href="#contact" class="block footer-link text-gray-400 hover:text-white text-lg">Contact</a>
                            </div>
                        </div>
                        
                        <!-- Contact Info -->
                        <div>
                            <h3 class="text-xl font-bold text-white mb-6">Contact Us</h3>
                            <div class="space-y-4 text-gray-400 text-lg">
                                <div class="flex items-center space-x-3">
                                    <i data-feather="mail" class="w-5 h-5"></i>
                                    <span>[email protected]</span>
                                </div>
                                <div class="flex items-center space-x-3">
                                    <i data-feather="phone" class="w-5 h-5"></i>
                                    <span>+1 (877) 734-2723</span>
                                </div>
                                <div class="flex items-center space-x-3">
                                    <i data-feather="map-pin" class="w-5 h-5"></i>
                                    <span>Toronto, ON</span>
                                </div>
                                <div class="flex items-center space-x-3">
                                    <i data-feather="clock" class="w-5 h-5"></i>
                                    <span>Mon-Fri 9AM-6PM EST</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Bottom Bar -->
                    <div class="border-t border-gray-700 mt-12 pt-8">
                        <div class="flex flex-col lg:flex-row justify-between items-center">
                            <div class="mb-4 lg:mb-0">
                                <p class="text-gray-400 text-base">
                                    © 2024 SearchExperts.ca. All rights reserved. | Premier SEO & Digital Marketing Solutions
                                </p>
                            </div>
                            <div class="flex flex-wrap gap-6 text-base text-gray-400">
                                <a href="#" class="hover:text-white transition-colors duration-300">Privacy Policy</a>
                                <a href="#" class="hover:text-white transition-colors duration-300">Terms of Service</a>
                                <a href="#" class="hover:text-white transition-colors duration-300">Cookie Policy</a>
                                <a href="#" class="hover:text-white transition-colors duration-300">Sitemap</a>
                            </div>
                        </div>
                        
                        <!-- Trust Badges -->
                        <div class="mt-8 flex flex-wrap gap-4 justify-center lg:justify-start">
                                <div class="flex items-center space-x-2 bg-gray-800 px-4 py-2 rounded-lg">
                                    <i data-feather="shield" class="w-4 h-4 text-green-400"></i>
                                <span class="text-gray-300 text-sm">Google Partner</span>
                            </div>
                            <div class="flex items-center space-x-2 bg-gray-800 px-4 py-2 rounded-lg">
                                <i data-feather="award" class="w-4 h-4 text-yellow-400"></i>
                                <span class="text-gray-300 text-sm">Certified Experts</span>
                            </div>
                            <div class="flex items-center space-x-2 bg-gray-800 px-4 py-2 rounded-lg">
                                    <i data-feather="star" class="w-4 h-4 text-blue-400"></i>
                                <span class="text-gray-300 text-sm">5-Star Rated</span>
                            </div>
                        </div>
                    </div>
                </div>
            </footer>
        `;
    }
}
customElements.define('custom-footer', CustomFooter);