class CustomFooter extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .footer {
                    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
                }
                
                .link {
                    transition: all 0.2s ease-in-out;
                }
                
                .link:hover {
                    transform: translateY(-1px);
                }
            </style>
            <footer class="footer mt-12">
                <div class="container mx-auto px-4 py-8">
                    <div class="flex flex-col md:flex-row items-center justify-between gap-4">
                        <div class="text-gray-400 text-sm">
                            © ${new Date().getFullYear()} ScreenStream Studio. All streams preserved.
                        </div>
                        <div class="flex items-center gap-6">
                            <a href="#" class="link text-gray-400 hover:text-white transition-colors">
                                <i data-feather="help-circle"></i>
                            </a>
                            <a href="#" class="link text-gray-400 hover:text-white transition-colors">
                                <i data-feather="github"></i>
                            </a>
                            <a href="#" class="link text-gray-400 hover:text-white transition-colors">
                                <i data-feather="settings"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </footer>
        `;
        
        // Ensure feather icons are replaced in shadow DOM
        setTimeout(() => {
            if (this.shadowRoot.querySelector('[data-feather]')) {
                feather.replace(this.shadowRoot);
            }
        }, 100);
    }
}

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