components/footer.js

class CustomFooter extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                    background: #020617;
                    border-top: 1px solid rgba(255, 255, 255, 0.05);
                }

                footer {
                    padding: 3rem 2rem;
                    max-width: 1200px;
                    margin: 0 auto;
                }

                .footer-content {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    flex-wrap: wrap;
                    gap: 2rem;
                }

                .footer-copyright {
                    color: #64748b;
                    font-size: 0.875rem;
                }

                .footer-social {
                    display: flex;
                    gap: 1rem;
                }

                .footer-social a {
                    color: #647