components/footer.js

class CustomFooter extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                footer {
                    margin-top: 4rem;
                    padding: 2rem 1.5rem;
                    text-align: center;
                    border-top: 1px solid #e5e7eb;
                    font-size: 0.875rem;
                    color: #6b7280;
                }
                .dark footer {
                    border-color: #374151;
                    color: #9ca3af;
                }
                .social {
                    display: flex;
                    justify-content: center;
                    gap: 1rem;
                    margin-top: 1rem;
                }
                .social a {
                    color: #ff6a00;
                }
            </style>
            <footer>
                <p>&copy; <span id="year"></span> BistroByte – Made with ❤️ in Smallville</p>
                <div class="social">
                    <a href="#" aria-label="Instagram"><i data-feather="instagram"></i></a>
                    <a href="#" aria-label="Facebook"><i data-feather="facebook"></i></a>
                    <a href="#" aria-label="Phone"><i data-feather="phone"></i></a>
                </div>
            </footer>
        `;
        this.shadowRoot.getElementById('year').textContent = new Date().getFullYear();
    }
}
customElements.define('custom-footer', CustomFooter);