components/footer.js

class CustomFooter extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .footer-link:hover {
                    color: #3B82F6;
                }
            </style>
            <footer class="bg-gray-800 text-gray-300 py-12 px-4 md:px-8">
                <div class="container mx-auto">
                    <div class="grid md:grid-cols-4 gap-8">
                        <div>
                            <h3 class="text-xl font-bold text-white mb-4">ProFusion</h3>
                            <p class="mb-4">Custom digital solutions for professionals who demand excellence.</p>
                            <div class="flex space-x-4">
                                <a href="#" class="text-gray-400 hover:text-primary-500 transition"><i data-feather="twitter"></i></a>
                                <a href="#" class="text-gray-400 hover:text-primary-500 transition"><i data-feather="linkedin"></i></a>
                                <a href="#" class="text-gray-400 hover:text-primary-500 transition"><i data-feather="facebook"></i></a>
                            </div>
                        </div>
                        
                        <div>
                            <h4 class="text-lg font-semibold text-white mb-4">Solutions</h4>
                            <ul class="space-y-2">
                                <li><a href="#" class="footer-link transition">Medical Practice</a></li>
                                <li><a href="#" class="footer-link transition">Legal Professionals</a></li>
                                <li><a href="#" class="footer-link transition">Accounting Firms</a></li>
                                <li><a href="#" class="footer-link transition">Consulting</a></li>
                            </ul>
                        </div>
                        
                        <div>
                            <h4 class="text-lg font-semibold text-white mb-4">Company</h4>
                            <ul class="space-y-2">
                                <li><a href="#" class="footer-link transition">About Us</a></li>
                                <li><a href="#" class="footer-link transition">Case Studies</a></li>
                                <li><a href="#" class="footer-link transition">Careers</a></li>
                                <li><a href="#" class="footer-link transition">Blog</a></li>
                            </ul>
                        </div>
                        
                        <div>
                            <h4 class="text-lg font-semibold text-white mb-4">Contact</h4>
                            <ul class="space-y-2">
                                <li class="flex items-center"><i data-feather="mail" class="mr-2 w-4 h-4"></i> contact@profusion.com</li>
                                <li class="flex items-center"><i data-feather="phone" class="mr-2 w-4 h-4"></i> (555) 123-4567</li>
                                <li class="flex items-center"><i data-feather="map-pin" class="mr-2 w-4 h-4"></i> 123 Business Ave, Suite 400</li>
                            </ul>
                        </div>
                    </div>
                    
                    <div class="border-t border-gray-700 mt-12 pt-8 text-center text-sm text-gray-400">
                        <p>© ${new Date().getFullYear()} ProFusion Digital Solutions. All rights reserved.</p>
                    </div>
                </div>
            </footer>
            <script>feather.replace();</script>
        `;
    }
}

customElements.define('custom-footer', CustomFooter);