class CustomFooter extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                footer {
                    background: linear-gradient(to right, #0c4a6e, #4c1d95);
                }
                .social-icon {
                    transition: all 0.3s ease;
                }
                .social-icon:hover {
                    transform: translateY(-3px) scale(1.1);
                }
                .footer-link {
                    position: relative;
                }
                .footer-link::after {
                    content: '';
                    position: absolute;
                    width: 0;
                    height: 2px;
                    bottom: 0;
                    left: 0;
                    background-color: currentColor;
                    transition: width 0.3s ease;
                }
                .footer-link:hover::after {
                    width: 100%;
                }
            </style>
            <footer class="text-white py-12 px-4 sm:px-6 lg:px-8">
                <div class="max-w-7xl mx-auto">
                    <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                        <div class="md:col-span-2">
                            <h3 class="text-2xl font-bold mb-4">PixelPulse Gallery</h3>
                            <p class="text-white/80 mb-6">Creating digital art that inspires and captivates. Let's bring your vision to life.</p>
                            <div class="flex space-x-4">
                                <a href="#" class="social-icon text-white hover:text-primary-300">
                                    <i data-feather="instagram"></i>
                                </a>
                                <a href="#" class="social-icon text-white hover:text-primary-300">
                                    <i data-feather="twitter"></i>
                                </a>
                                <a href="#" class="social-icon text-white hover:text-primary-300">
                                    <i data-feather="dribbble"></i>
                                </a>
                                <a href="#" class="social-icon text-white hover:text-primary-300">
                                    <i data-feather="youtube"></i>
                                </a>
                            </div>
                        </div>
                        <div>
                            <h4 class="text-lg font-semibold mb-4">Quick Links</h4>
                            <ul class="space-y-2">
                                <li><a href="#gallery" class="footer-link text-white/80 hover:text-white transition-colors">Gallery</a></li>
                                <li><a href="#about" class="footer-link text-white/80 hover:text-white transition-colors">About</a></li>
                                <li><a href="#testimonials" class="footer-link text-white/80 hover:text-white transition-colors">Testimonials</a></li>
                                <li><a href="#contact" class="footer-link text-white/80 hover:text-white transition-colors">Contact</a></li>
                            </ul>
                        </div>
                        <div>
                            <h4 class="text-lg font-semibold mb-4">Legal</h4>
                            <ul class="space-y-2">
                                <li><a href="#" class="footer-link text-white/80 hover:text-white transition-colors">Privacy Policy</a></li>
                                <li><a href="#" class="footer-link text-white/80 hover:text-white transition-colors">Terms of Service</a></li>
                                <li><a href="#" class="footer-link text-white/80 hover:text-white transition-colors">Cookie Policy</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="border-t border-white/20 mt-12 pt-6 flex flex-col md:flex-row justify-between items-center">
                        <p class="text-white/60">© 2023 PixelPulse Gallery. All rights reserved.</p>
                        <p class="text-white/60 mt-4 md:mt-0">Made with <i data-feather="heart" class="w-4 h-4 inline text-red-400"></i> for digital art</p>
                    </div>
                </div>
            </footer>
        `;

        // Initialize feather icons
        feather.replace();
    }
}

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