class MobileMenu extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: none;
        }
        
        .mobile-menu {
          position: fixed;
          top: 0;
          right: 0;
          width: 80%;
          max-width: 300px;
          height: 100vh;
          background: rgba(10, 10, 15, 0.98);
          backdrop-filter: blur(10px);
          z-index: 100;
          transform: translateX(100%);
          transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
          padding: 2rem;
          border-left: 1px solid rgba(0, 217, 255, 0.1);
        }
        
        .mobile-menu.open {
          transform: translateX(0);
        }
        
        .close-btn {
          position: absolute;
          top: 1rem;
          left: 1rem;
          background: none;
          border: none;
          color: #00D9FF;
          font-size: 1.5rem;
        }
        
        .menu-links {
          display: flex;
          flex-direction: column;
          margin-top: 3rem;
        }
        
        .menu-link {
          padding: 1rem 0;
          color: rgba(226, 232, 240, 0.8);
          font-size: 1.2rem;
          border-bottom: 1px solid rgba(255, 255, 255, 0.05);
          transition: color 0.3s ease;
        }
        
        .menu-link:hover {
          color: #00D9FF;
        }
        
        .menu-link.active {
          color: #00D9FF;
        }
        
        .social-links {
          display: flex;
          justify-content: center;
          margin-top: 2rem;
          gap: 1rem;
        }
        
        .social-link {
          color: rgba(226, 232, 240, 0.6);
          transition: color 0.3s ease;
        }
        
        .social-link:hover {
          color: #00D9FF;
        }
        
        @media (max-width: 768px) {
          :host {
            display: block;
          }
        }
      </style>
      
      <div class="mobile-menu">
        <button class="close-btn">
          <i data-feather="x"></i>
        </button>
        <div class="menu-links">
          <a href="#" class="menu-link active">صفحه اصلی</a>
          <a href="templates.html" class="menu-link">قالب‌ها</a>
          <a href="portfolio.html" class="menu-link">نمونه کارها</a>
          <a href="about.html" class="menu-link">درباره ما</a>
          <a href="contact.html" class="menu-link">تماس با ما</a>
        </div>
        <div class="social-links">
          <a href="#" class="social-link"><i data-feather="instagram"></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="github"></i></a>
        </div>
      </div>
    `;
    
    this.closeBtn = this.shadowRoot.querySelector('.close-btn');
    this.menu = this.shadowRoot.querySelector('.mobile-menu');
    
    this.closeBtn.addEventListener('click', () => this.closeMenu());
  }
  
  openMenu() {
    this.menu.classList.add('open');
    document.body.style.overflow = 'hidden';
    feather.replace({ 'stroke-width': 1.5 });
  }
  
  closeMenu() {
    this.menu.classList.remove('open');
    document.body.style.overflow = '';
  }
}

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