components/footer.js

class CustomFooter extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          background: var(--bg-panel-dark);
          border-radius: var(--radius);
          padding: 16px;
          border: 1px solid var(--border);
          box-shadow: var(--shadow);
          margin-top: auto;
        }
        
        .footer-content {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 10px 8px 6px;
          color: var(--text-muted);
          font-size: 12px;
        }
        
        .badge {
          border: 1px solid var(--border);
          border-radius: 999px;
          padding: 6px 10px;
          background: rgba(0, 0, 0, 0.12);
        }
        
        .profile-link {
          color: var(--text-muted);
          text-decoration: none;
        }
        
        .profile-link:hover {
          color: var(--text-light);
        }
      </style>
      
      <div class="footer-content">
        <span class="badge">Made with DeepSite</span>
        <a href="/profile.html" class="profile-link">Profil</a>
      </div>
    `;
  }
}

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