components/footer.js

class CustomFooter extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                footer {
                    padding: 3rem 0;
                    text-align: center;
                    margin-top: 4rem;
                    border-top: 1px solid rgba(255, 255, 255, 0.1);
                }
                
                .social-links {
                    display: flex;
                    justify-content: center;
                    gap: 1.5rem;
                    margin-bottom: 1.5rem;
                }
                
                .social-link {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                    background: rgba(255, 255, 255, 0.05);
                    transition: all 0.3s ease;
                }
                
                .social-link:hover {
                    background: var(--primary);
                    transform: translateY(-3px);
                }
                
                .copyright {
                    color: rgba(255, 255, 255, 0.6);
                    font-size: 0.875rem;
                }
            </style>
            <footer>
                <div class="social-links">
                    <a href="#" class="social-link">
                        <i data-feather="github"></i>
                    </a>
                    <a href="#" class="social-link">
                        <i data-feather="twitter"></i>
                    </a>
                    <a href="#" class="social-link">
                        <i data-feather="linkedin"></i>
                    </a>
                    <a href="#" class="social-link">
                        <i data-feather="mail"></i>
                    </a>
                </div>
                <p class="copyright">© ${new Date().getFullYear()} CodeCraft Studio. All rights reserved.</p>
            </footer>
        `;
    }
}
customElements.define('custom-footer', CustomFooter);