class CustomFooter extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                    background: #000000;
                    color: #ffffff;
                }
                
                .footer-link {
                    transition: color 0.3s ease;
                }
                
                .footer-link:hover {
                    color: #fb923c;
                }
                
                .social-icon {
                    transition: all 0.3s ease;
                }
                
                .social-icon:hover {
                    transform: translateY(-3px);
                }
                
                .newsletter-input {
                    background: rgba(255, 255, 255, 0.1);
                    border: 1px solid rgba(255, 255, 255, 0.2);
                }
                
                .newsletter-input:focus {
                    outline: none;
                    border-color: #fb923c;
                }
            </style>
            
            <footer class="pt-16 pb-8 px-4 sm:px-6 lg:px-8">
                <div class="max-w-7xl mx-auto">
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-12">
                        <!-- Brand -->
                        <div>
                            <div class="flex items-center space-x-2 mb-6">
                                <div class="w-10 h-10 bg-white rounded-full flex items-center justify-center">
                                    <span class="text-black font-display font-bold text-xl">N</span>
                                </div>
                                <span class="font-display font-bold text-2xl tracking-tight">NOIRWAY</span>
                            </div>
                            <p class="text-gray-400 mb-6">
                                Redefining streetwear for the conscious generation. Where design meets purpose.
                            </p>
                            <div class="flex space-x-4">
                                <a href="https://instagram.com" target="_blank" class="social-icon p-2 bg-gray-800 rounded-full hover:bg-accent-500">
                                    <i data-feather="instagram" class="w-5 h-5"></i>
                                </a>
                                <a href="https://twitter.com" target="_blank" class="social-icon p-2 bg-gray-800 rounded-full hover:bg-accent-500">
                                    <i data-feather="twitter" class="w-5 h-5"></i>
                                </a>
                                <a href="https://tiktok.com" target="_blank" class="social-icon p-2 bg-gray-800 rounded-full hover:bg-accent-500">
                                    <i data-feather="video" class="w-5 h-5"></i>
                                </a>
                                <a href="https://discord.com" target="_blank" class="social-icon p-2 bg-gray-800 rounded-full hover:bg-accent-500">
                                    <i data-feather="message-circle" class="w-5 h-5"></i>
                                </a>
                            </div>
                        </div>
                        
                        <!-- Quick Links -->
                        <div>
                            <h4 class="font-display font-bold text-lg mb-6">EXPLORE</h4>
                            <ul class="space-y-3">
                                <li><a href="/shop.html" class="footer-link text-gray-400 hover:text-white">All Products</a></li>
                                <li><a href="/collections.html" class="footer-link text-gray-400 hover:text-white">New Arrivals</a></li>
                                <li><a href="/collections.html?category=limited" class="footer-link text-gray-400 hover:text-white">Limited Edition</a></li>
                                <li><a href="/about.html" class="footer-link text-gray-400 hover:text-white">Our Story</a></li>
                                <li><a href="/sustainability.html" class="footer-link text-gray-400 hover:text-white">Sustainability</a></li>
                            </ul>
                        </div>
                        
                        <!-- Support -->
                        <div>
                            <h4 class="font-display font-bold text-lg mb-6">SUPPORT</h4>
                            <ul class="space-y-3">
                                <li><a href="/contact.html" class="footer-link text-gray-400 hover:text-white">Contact Us</a></li>
                                <li><a href="/faq.html" class="footer-link text-gray-400 hover:text-white">FAQ</a></li>
                                <li><a href="/shipping.html" class="footer-link text-gray-400 hover:text-white">Shipping & Returns</a></li>
                                <li><a href="/size-guide.html" class="footer-link text-gray-400 hover:text-white">Size Guide</a></li>
                                <li><a href="/privacy.html" class="footer-link text-gray-400 hover:text-white">Privacy Policy</a></li>
                            </ul>
                        </div>
                        
                        <!-- Newsletter -->
                        <div>
                            <h4 class="font-display font-bold text-lg mb-6">JOIN THE TRIBE</h4>
                            <p class="text-gray-400 mb-4">
                                Get early access to drops, exclusive content, and 15% off your first order.
                            </p>
                            <form id="newsletter-form" class="space-y-3">
                                <input type="email" placeholder="your.email@example.com" required
                                       class="newsletter-input w-full px-4 py-3 rounded-lg text-white placeholder-gray-500 focus:outline-none">
                                <button type="submit"
                                        class="w-full bg-accent-500 text-white px-6 py-3 rounded-lg font-medium hover:bg-accent-600 transition-colors duration-300">
                                    Subscribe
                                </button>
                            </form>
                        </div>
                    </div>
                    
                    <!-- Bottom bar -->
                    <div class="border-t border-gray-800 pt-8">
                        <div class="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
                            <p class="text-gray-500 text-sm">
                                © 2024 NOIRWAY. All rights reserved. For the new generation.
                            </p>
                            <div class="flex items-center space-x-6">
                                <span class="text-gray-500 text-sm">Accepting</span>
                                <div class="flex space-x-2">
                                    <div class="w-8 h-5 bg-gray-700 rounded"></div>
                                    <div class="w-8 h-5 bg-gray-700 rounded"></div>
                                    <div class="w-8 h-5 bg-gray-700 rounded"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </footer>
        `;
        
        // Initialize feather icons
        setTimeout(() => {
            if (window.feather) {
                window.feather.replace();
            }
        }, 100);
        
        // Newsletter form submission
        const form = this.shadowRoot.getElementById('newsletter-form');
        form.addEventListener('submit', (e) => {
            e.preventDefault();
            const email = form.querySelector('input[type="email"]').value;
            if (window.subscribeNewsletter) {
                if (window.subscribeNewsletter(email)) {
                    form.reset();
                }
            }
        });
    }
}

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