components/footer.js

class CustomFooter extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                @import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&family=Assistant:wght@300;400;600;700&display=swap');
                
                :host {
                    --deep-cocoa: #3E2723;
                    --milk-chocolate: #795548;
                    --creamy-white: #FDFBF7;
                    --luxury-gold: #C5A063;
                }
                
                footer {
                    background-color: var(--deep-cocoa);
                    color: #EFEBE9;
                }
                
                .social-icon {
                    transition: transform 0.3s ease;
                }
                
                .social-icon:hover {
                    transform: scale(1.1);
                }
                
                .newsletter-btn {
                    background-color: var(--luxury-gold);
                    transition: background-color 0.3s ease;
                }
                
                .newsletter-btn:hover {
                    background-color: var(--milk-chocolate);
                }
            </style>
            
            <footer class="py-12">
                <div class="container mx-auto px-4">
                    <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                        <!-- Quick Links -->
                        <div>
                            <h3 class="font-semibold text-lg mb-4 text-creamy-white">Quick Links</h3>
                            <ul class="space-y-2">
                                <li><a href="#shop" class="hover:text-luxury-gold transition duration-300">Shop</a></li>
                                <li><a href="#about" class="hover:text-luxury-gold transition duration-300">About</a></li>
                                <li><a href="#contact" class="hover:text-luxury-gold transition duration-300">Contact</a></li>
                                <li><a href="#shipping" class="hover:text-luxury-gold transition duration-300">Shipping</a></li>
                            </ul>
                        </div>
                        
                        <!-- Legal -->
                        <div>
                            <h3 class="font-semibold text-lg mb-4 text-creamy-white">Legal</h3>
                            <ul class="space-y-2">
                                <li><a href="#privacy" class="hover:text-luxury-gold transition duration-300">Privacy Policy</a></li>
                                <li><a href="#terms" class="hover:text-luxury-gold transition duration-300">Terms of Service</a></li>
                                <li><a href="#cookies" class="hover:text-luxury-gold transition duration-300">Cookie Policy</a></li>
                            </ul>
                        </div>
                        
                        <!-- Newsletter -->
                        <div class="md:col-span-2">
                            <h3 class="font-semibold text-lg mb-4 text-creamy-white">Stay Connected</h3>
                            <p class="mb-4">Sign up for exclusive offers and chocolate inspiration</p>
                            <form id="newsletter-form" class="flex flex-col sm:flex-row gap-2">
                                <input type="email" placeholder="Your email address" class="flex-1 px-4 py-2 rounded-lg text-deep-cocoa">
                                <button type="submit" class="newsletter-btn text-white px-6 py-2 rounded-lg font-semibold">
                                Subscribe
                            </button>
                            </form>
                            
                            <!-- Social Media -->
                            <div class="flex space-x-4 mt-6">
                                <a href="#" class="social-icon text-creamy-white">
                                    <i data-feather="facebook"></i>
                                </a>
                                <a href="#" class="social-icon text-creamy-white">
                                    <i data-feather="instagram"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Bottom Bar -->
                    <div class="border-t border-milk-chocolate mt-8 pt-8 text-center">
                        <p class="mb-4">© 2025 Melters Chocolate. Handmade in Northern Ireland</p>
                        <div class="flex justify-center space-x-4">
                            <i data-feather="credit-card" class="text-creamy-white"></i>
                            <i data-feather="credit-card" class="text-creamy-white"></i>
                            <i data-feather="credit-card" class="text-creamy-white"></i>
                        </div>
                    </div>
                </div>
            </footer>
        `;
        
        // Initialize feather icons
        if (typeof feather !== 'undefined') {
            feather.replace();
        }
    }
}

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