class CustomFooter extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                    width: 100%;
                    background-color: #f8fafc;
                    border-top: 1px solid #e2e8f0;
                }
                
                footer {
                    max-width: 1200px;
                    margin: 0 auto;
                    padding: 3rem 2rem;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    text-align: center;
                }
                
                .footer-logo {
                    font-size: 1.5rem;
                    font-weight: 700;
                    color: #0ea5e9;
                    margin-bottom: 1.5rem;
                    text-decoration: none;
                }
                
                .footer-links {
                    display: flex;
                    gap: 1.5rem;
                    margin-bottom: 2rem;
                }
                
                .footer-link {
                    color: #475569;
                    text-decoration: none;
                    transition: color 0.2s;
                }
                
                .footer-link:hover {
                    color: #0ea5e9;
                }
                
                .social-links {
                    display: flex;
                    gap: 1.5rem;
                    margin-bottom: 2rem;
                }
                
                .social-link {
                    color: #64748b;
                    transition: color 0.2s;
                }
                
                .social-link:hover {
                    color: #0ea5e9;
                }
                
                .copyright {
                    color: #94a3b8;
                    font-size: 0.875rem;
                }
            </style>
            
            <footer>
                <a href="/" class="footer-logo">CodeCanvas</a>
                
                <div class="footer-links">
                    <a href="#projects" class="footer-link">Projects</a>
                    <a href="#writing" class="footer-link">Writing</a>
                    <a href="#contact" class="footer-link">Contact</a>
                </div>
                
                <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()} CodeCanvas Chronicles. All rights reserved.</p>
            </footer>
        `;
        
        // Initialize Feather icons
        const featherScript = document.createElement('script');
        featherScript.src = 'https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js';
        this.shadowRoot.appendChild(featherScript);
        
        featherScript.onload = () => {
            if (window.feather) {
                window.feather.replace();
            }
        };
    }
}

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