components/footer.js

class CustomFooter extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                    margin-top: auto;
                }
                
                footer {
                    background: var(--surface);
                    border-top: 1px solid rgba(255, 255, 255, 0.1);
                }
                
                .footer-link {
                    transition: all 0.3s ease;
                    color: var(--subtle);
                }
                
                .footer-link:hover {
                    color: var(--accent);
                    transform: translateY(-2px);
                }
                
                .social-icon {
                    width: 40px;
                    height: 40px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 50%;
                    background: rgba(255, 255, 255, 0.05);
                    transition: all 0.3s ease;
                }
                
                .social-icon:hover {
                    background: var(--primary);
                    transform: translateY(-5px) rotate(10deg);
                }
                
                .copyright {
                    font-size: 0.875rem;
                    color: var(--subtle);
                }
                
                .theme-toggle {
                    background: var(--surface);
                    border: 1px solid rgba(255, 255, 255, 0.1);
                    border-radius: 50%;
                    width: 44px;
                    height: 44px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                    transition: all 0.3s ease;
                }
                
                .theme-toggle:hover {
                    transform: rotate(180deg);
                    background: linear-gradient(135deg, var(--primary), var(--secondary));
                }
            </style>
            <footer class="py-8 px-6">
                <div class="container mx-auto">
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
                        <div>
                            <h3 class="text-lg font-bold mb-4 flex items-center gap-2">
                                <i data-feather="zap" class="text-accent"></i>
                            <span>AI Mirror Nebula</span>
                        </h3>
                        <p class="text-subtle text-sm">A neural interface exploring the boundaries of artificial intelligence.</p>
                        </div>
                        
                        <div>
                            <h3 class="text-lg font-bold mb-4">Quick Links</h3>
                        <div class="flex flex-col gap-2">
                            <a href="/home" class="footer-link flex items-center gap-2">
                            <i data-feather="chevron-right" class="w-4 h-4"></i>
                            <span>Home</span>
                        </a>
                            <a href="/features" class="footer-link flex items-center gap-2">
                                <i data-feather="chevron-right" class="w-4 h-4"></i>
                            <span>Features</span>
                        </a>
                            <a href="/api" class="footer-link flex items-center gap-2">
                                    <i data-feather="chevron-right" class="w-4 h-4"></i>
                                <span>API</span>
                            </a>
                            <a href="/docs" class="footer-link flex items-center gap-2">
                                <i data-feather="chevron-right" class="w-4 h-4"></i>
                                <span>Documentation</span>
                            </a>
                        </div>
                    </div>
                    
                    <div>
                        <h3 class="text-lg font-bold mb-4">Connect</h3>
                        <div class="flex gap-4">
                            <a href="https://twitter.com" class="social-icon">
                                <i data-feather="twitter"></i>
                            </a>
                            <a href="https://github.com" class="social-icon">
                                <i data-feather="github"></i>
                            </a>
                            <a href="https://discord.com" class="social-icon">
                                    <i data-feather="discord"></i>
                            </a>
                            <a href="https://telegram.org" class="social-icon">
                                <i data-feather="send"></i>
                            </a>
                        </div>
                    </div>
                </div>
                
                <div class="flex flex-col md:flex-row items-center justify-between gap-4 pt-8 border-t border-white/10">
                    <p class="copyright">© ${new Date().getFullYear()} AI Mirror Nebula. All neural patterns reserved.</p>
                    <div class="flex items-center gap-4">
                        <button onclick="toggleTheme()" class="theme-toggle">
                        <i data-feather="moon" id="theme-icon"></i>
                    </button>
                </div>
            </footer>
        `;
        
        this.initThemeToggle();
    }
    
    initThemeToggle() {
        const themeToggle = this.shadowRoot.querySelector('.theme-toggle');
        const themeIcon = this.shadowRoot.getElementById('theme-icon');
        
        themeToggle.addEventListener('click', () => {
            const isDark = document.documentElement.classList.contains('dark');
            
            if (isDark) {
                document.documentElement.classList.remove('dark');
                localStorage.setItem('theme', 'light');
                themeIcon.setAttribute('data-feather', 'sun');
            } else {
                document.documentElement.classList.add('dark');
                localStorage.setItem('theme', 'dark');
                themeIcon.setAttribute('data-feather', 'moon');
            }
            
            feather.replace();
        });
    }
}

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

// Global theme toggle function
function toggleTheme() {
    const isDark = document.documentElement.classList.contains('dark');
    const themeToggle = document.querySelector('custom-footer')?.shadowRoot?.querySelector('.theme-toggle');
    if (themeToggle) {
        themeToggle.click();
    }
}