class MobileMenu extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: none;
          position: fixed;
          top: 0;
          right: 0;
          width: 100%;
          height: 100vh;
          background: rgba(0, 0, 0, 0.8);
          backdrop-filter: blur(8px);
          z-index: 1000;
          opacity: 0;
          pointer-events: none;
          transition: opacity 0.3s ease;
        }

        :host([open]) {
          display: block;
          opacity: 1;
          pointer-events: all;
        }

        .menu-container {
          position: absolute;
          top: 0;
          right: 0;
          width: min(90vw, 400px);
          height: 100vh;
          background: white;
          padding: 2rem;
          box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
          transform: translateX(100%);
          transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        :host([open]) .menu-container {
          transform: translateX(0);
        }

        .menu-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 3rem;
        }

        .close-btn {
          border: none;
          background: none;
          padding: 0.5rem;
          cursor: pointer;
          border-radius: 0.25rem;
        }

        .close-btn:hover {
          background: rgba(0, 0, 0, 0.05);
        }

        .menu-links {
          display: flex;
          flex-direction: column;
          gap: 1rem;
        }

        .menu-link {
          padding: 1rem;
          font-size: 1.1rem;
          color: var(--color-dark);
          text-decoration: none;
          border-radius: 0.5rem;
          transition: all 0.2s ease;
        }

        .menu-link:hover {
          background: rgba(79, 70, 229, 0.1);
          color: var(--color-primary);
        }

        .mobile-cta {
          margin-top: 2rem;
          width: 100%;
        }
      </style>

      <div class="menu-container">
        <div class="menu-header">
          <h3>Menu</h3>
          <button class="close-btn">
            <i data-feather="x"></i>
          </button>
        </div>
        
        <div class="menu-links">
          <a href="#cursos" class="menu-link">Cursos</a>
          <a href="#sobre" class="menu-link">Sobre</a>
          <a href="#" class="menu-link">Mentores</a>
          <a href="#" class="menu-link">Contato</a>
        </div>
        
        <a href="#" class="cta-button mobile-cta">
          Inscreva-se
          <i data-feather="arrow-right"></i>
        </a>
      </div>
    `;

    this.shadowRoot.querySelector('.close-btn').addEventListener('click', () => {
      this.removeAttribute('open');
    });
  }
}

customElements.define('mobile-menu', MobileMenu);