components/footer.js

class CustomFooter extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .footer-link {
                    transition: color 0.2s ease;
                }
                .footer-link:hover {
                    color: #0d9488;
                }
            </style>
            <footer class="bg-gray-50 border-t border-gray-200">
                <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
                    <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
                        <div>
                            <h3 class="text-sm font-semibold text-gray-500 tracking-wider uppercase mb-4">Product</h3>
                            <ul class="space-y-2">
                                <li><a href="/features" class="text-gray-600 footer-link">Features</a></li>
                                <li><a href="/pricing" class="text-gray-600 footer-link">Pricing</a></li>
                                <li><a href="/examples" class="text-gray-600 footer-link">Examples</a></li>
                                <li><a href="/updates" class="text-gray-600 footer-link">Updates</a></li>
                            </ul>
                        </div>
                        <div>
                            <h3 class="text-sm font-semibold text-gray-500 tracking-wider uppercase mb-4">Resources</h3>
                            <ul class="space-y-2">
                                <li><a href="/blog" class="text-gray-600 footer-link">Blog</a></li>
                                <li><a href="/guides" class="text-gray-600 footer-link">Guides</a></li>
                                <li><a href="/webinars" class="text-gray-600 footer-link">Webinars</a></li>
                                <li><a href="/api" class="text-gray-600 footer-link">API</a></li>
                            </ul>
                        </div>
                        <div>
                            <h3 class="text-sm font-semibold text-gray-500 tracking-wider uppercase mb-4">Company</h3>
                            <ul class="space-y-2">
                                <li><a href="/about" class="text-gray-600 footer-link">About</a></li>
                                <li><a href="/careers" class="text-gray-600 footer-link">Careers</a></li>
                                <li><a href="/press" class="text-gray-600 footer-link">Press</a></li>
                                <li><a href="/contact" class="text-gray-600 footer-link">Contact</a></li>
                            </ul>
                        </div>
                        <div>
                            <h3 class="text-sm font-semibold text-gray-500 tracking-wider uppercase mb-4">Legal</h3>
                            <ul class="space-y-2">
                                <li><a href="/privacy" class="text-gray-600 footer-link">Privacy</a></li>
                                <li><a href="/terms" class="text-gray-600 footer-link">Terms</a></li>
                                <li><a href="/security" class="text-gray-600 footer-link">Security</a></li>
                                <li><a href="/compliance" class="text-gray-600 footer-link">Compliance</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="mt-12 pt-8 border-t border-gray-200 flex flex-col md:flex-row justify-between items-center">
                        <div class="flex space-x-6 mb-4 md:mb-0">
                            <a href="#" class="text-gray-400 hover:text-gray-500">
                                <span class="sr-only">Facebook</span>
                                <i data-feather="facebook"></i>
                            </a>
                            <a href="#" class="text-gray-400 hover:text-gray-500">
                                <span class="sr-only">Twitter</span>
                                <i data-feather="twitter"></i>
                            </a>
                            <a href="#" class="text-gray-400 hover:text-gray-500">
                                <span class="sr-only">LinkedIn</span>
                                <i data-feather="linkedin"></i>
                            </a>
                            <a href="#" class="text-gray-400 hover:text-gray-500">
                                <span class="sr-only">Instagram</span>
                                <i data-feather="instagram"></i>
                            </a>
                        </div>
                        <p class="text-gray-500 text-sm">© ${new Date().getFullYear()} FacadeForge Pro. All rights reserved.</p>
                    </div>
                </div>
            </footer>
        `;
    }
}
customElements.define('custom-footer', CustomFooter);