class CustomFooter extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .footer-link:hover {
                    color: #6366f1;
                }
                .social-icon {
                    transition: all 0.3s ease;
                }
                .social-icon:hover {
                    transform: translateY(-3px);
                }
            </style>
            <footer class="bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700">
                <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
                    <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                        <div class="md:col-span-2">
                            <div class="flex items-center mb-4">
                                <span class="text-xl font-bold text-primary-500">PixelPulse</span>
                                <span class="text-xl font-bold text-secondary-500">Pro</span>
                            </div>
                            <p class="text-gray-600 dark:text-gray-300 mb-4">
                                Crafting beautiful, responsive digital experiences that captivate and convert.
                            </p>
                            <div class="flex space-x-4">
                                <a href="#" class="social-icon text-gray-500 dark:text-gray-400 hover:text-primary-500">
                                    <i data-feather="twitter"></i>
                                </a>
                                <a href="#" class="social-icon text-gray-500 dark:text-gray-400 hover:text-primary-500">
                                    <i data-feather="instagram"></i>
                                </a>
                                <a href="#" class="social-icon text-gray-500 dark:text-gray-400 hover:text-primary-500">
                                    <i data-feather="github"></i>
                                </a>
                                <a href="#" class="social-icon text-gray-500 dark:text-gray-400 hover:text-primary-500">
                                    <i data-feather="linkedin"></i>
                                </a>
                            </div>
                        </div>
                        
                        <div>
                            <h3 class="text-sm font-semibold text-gray-900 dark:text-white uppercase tracking-wider mb-4">Company</h3>
                            <ul class="space-y-2">
                                <li><a href="#" class="footer-link text-gray-600 dark:text-gray-300 hover:text-primary-500">About</a></li>
                                <li><a href="#" class="footer-link text-gray-600 dark:text-gray-300 hover:text-primary-500">Careers</a></li>
                                <li><a href="#" class="footer-link text-gray-600 dark:text-gray-300 hover:text-primary-500">Blog</a></li>
                            </ul>
                        </div>
                        
                        <div>
                            <h3 class="text-sm font-semibold text-gray-900 dark:text-white uppercase tracking-wider mb-4">Legal</h3>
                            <ul class="space-y-2">
                                <li><a href="#" class="footer-link text-gray-600 dark:text-gray-300 hover:text-primary-500">Privacy</a></li>
                                <li><a href="#" class="footer-link text-gray-600 dark:text-gray-300 hover:text-primary-500">Terms</a></li>
                                <li><a href="#" class="footer-link text-gray-600 dark:text-gray-300 hover:text-primary-500">Cookie Policy</a></li>
                            </ul>
                        </div>
                    </div>
                    
                    <div class="mt-12 pt-8 border-t border-gray-200 dark:border-gray-700 flex flex-col md:flex-row justify-between items-center">
                        <p class="text-gray-500 dark:text-gray-400 text-sm">
                            &copy; ${new Date().getFullYear()} PixelPulse Pro. All rights reserved.
                        </p>
                        <div class="mt-4 md:mt-0">
                            <button id="theme-toggle-footer" class="text-gray-500 dark:text-gray-400 hover:text-primary-500 p-2 rounded-full">
                                <i data-feather="moon"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </footer>
        `;

        // Theme toggle in footer
        const themeToggleFooter = this.shadowRoot.getElementById('theme-toggle-footer');
        if (themeToggleFooter) {
            themeToggleFooter.addEventListener('click', () => {
                const isDark = document.documentElement.classList.toggle('dark');
                localStorage.setItem('theme', isDark ? 'dark' : 'light');
                themeToggleFooter.innerHTML = isDark ? 
                    '<i data-feather="sun"></i>' : 
                    '<i data-feather="moon"></i>';
                feather.replace();
            });
            
            // Set initial icon
            const savedTheme = localStorage.getItem('theme') || 
                              (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
            themeToggleFooter.innerHTML = savedTheme === 'dark' ? 
                '<i data-feather="sun"></i>' : 
                '<i data-feather="moon"></i>';
            feather.replace();
        }
    }
}

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