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: #3b82f6;
                }
            </style>
            <footer class="bg-gray-800 text-white py-12 px-4">
                <div class="max-w-6xl mx-auto">
                    <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                        <div>
                            <h3 class="text-xl font-bold mb-4">FixMyRights</h3>
                            <p class="text-gray-400">Empowering you with simple legal knowledge for everyday situations.</p>
                        </div>
                        <div>
                            <h4 class="text-lg font-semibold mb-4">Quick Links</h4>
                            <ul class="space-y-2">
                                <li><a href="index.html" class="text-gray-400 footer-link">Home</a></li>
                                <li><a href="about.html" class="text-gray-400 footer-link">About Us</a></li>
                                <li><a href="lawyers.html" class="text-gray-400 footer-link">Find a Lawyer</a></li>
                                <li><a href="pro.html" class="text-gray-400 footer-link">Pro Version</a></li>
                            </ul>
                        </div>
                        <div>
                            <h4 class="text-lg font-semibold mb-4">Legal</h4>
                            <ul class="space-y-2">
                                <li><a href="privacy.html" class="text-gray-400 footer-link">Privacy Policy</a></li>
                                <li><a href="terms.html" class="text-gray-400 footer-link">Terms of Use</a></li>
                                <li><a href="disclaimer.html" class="text-gray-400 footer-link">Disclaimer</a></li>
                            </ul>
                        </div>
                        <div>
                            <h4 class="text-lg font-semibold mb-4">Contact</h4>
                            <ul class="space-y-2">
                                <li class="flex items-center text-gray-400">
                                    <i data-feather="mail" class="mr-2"></i> help@fixmyrights.com
                                </li>
                                <li class="flex items-center text-gray-400">
                                    <i data-feather="phone" class="mr-2"></i> +91 98765 43210
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
                        <p>&copy; <span id="current-year"></span> FixMyRights. All rights reserved.</p>
                    </div>
                </div>
            </footer>
            <script>
                document.addEventListener('DOMContentLoaded', function() {
                    const yearElement = this.shadowRoot.getElementById('current-year');
                    if (yearElement) {
                        yearElement.textContent = new Date().getFullYear();
                    }
                    feather.replace();
                });
            </script>
        `;
    }
}
customElements.define('custom-footer', CustomFooter);