class CustomFooter extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
            display: block;
            background-color: #0f172a;
            padding: 2rem 1rem;
            text-align: center;
            color: #64748b;
            border-top: 1px solid #1e293b;
            margin-top: auto;
        }
        .content {
            max-width: 1280px;
            margin: 0 auto;
        }
        p {
            margin: 0.5rem 0;
            font-size: 0.9rem;
        }
        .heart {
            color: #ef4444;
            fill: currentColor;
        }
        .socials {
            display: flex;
            justify-content: center;
            gap: 1rem;
            margin-bottom: 1rem;
        }
        .social-link {
            color: #94a3b8;
            text-decoration: none;
            transition: color 0.2s;
        }
        .social-link:hover {
            color: #10b981;
        }
      </style>
      <div class="content">
        <div class="socials">
            <a href="#" class="social-link">Twitter</a>
            <a href="#" class="social-link">Discord</a>
            <a href="#" class="social-link">Instagram</a>
        </div>
        <p>&copy; 2023 Checkmate Nexus. All rights reserved.</p>
        <p>Made with <svg class="heart heart-icon" style="width:14px; display:inline-block; vertical-align:middle;" viewBox="0 0 24 24"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg> by AI.</p>
      </div>
    `;
  }
}
customElements.define('custom-footer', CustomFooter);