components/footer.js

class CustomFooter extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                footer {
                    background: #0f172a;
                    border-top: 1px solid rgba(255,255,255,0.05);
                    padding: 4rem 0;
                    text-align: center;
                }

                .content {
                    max-width: 1280px;
                    margin: 0 auto;
                    padding: 0 1.5rem;
                }

                .social-links {
                    display: flex;
                    justify-content: center;
                    gap: 1.5rem;
                    margin-bottom: 2rem;
                }

                .social-icon {
                    color: #64748b;
                    transition: color 0.3s, transform 0.2s;
                    text-decoration: none;
                }

                .social-icon:hover {
                    color: #4f46e5;
                    transform: translateY(-3px);
                }

                p {
                    color: #64748b;
                    font-size: 0.875rem;
                    margin-bottom: 0.5rem;
                }

                .heart {
                    color: #ef4444;
                }
            </style>
            <footer>
                <div class="content">
                    <div class="social-links">
                        <a href="https://www.instagram.com/" target="_blank" class="social-icon">
                            <i data-feather="instagram"></i>
                        </a>
                        <a href="https://www.linkedin.com/" target="_blank" class="social-icon">
                            <i data-feather="linkedin"></i>
                        </a>
                        <a href="https://vimeo.com/" target="_blank" class="social-icon">
                            <i data-feather="video"></i>
                        </a>
                    </div>
                    <p>&copy; 2023 Jeronimo Cruz. Todos os direitos reservados.</p>
                    <p>Desenvolvido com <span class="heart">❤</span> e Som.</p>
                </div>
            </footer>
        `;
    }
}

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