class CustomNavbar extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .nav-link {
          transition: all 0.2s ease;
        }
        .nav-link:hover {
          color: #4f46e5;
        }
        .nav-link.active {
          color: #4f46e5;
          border-bottom: 2px solid #4f46e5;
        }
      </style>
      <nav class="bg-white shadow-sm">
        <div class="container mx-auto px-4 py-3">
          <div class="flex items-center justify-between">
            <div class="flex items-center space-x-4 space-x-reverse">
              <a href="index.html" class="flex items-center">
                <i data-feather="shield" class="text-primary-500 w-6 h-6"></i>
                <span class="mr-2 font-bold text-lg">VPN فارسی</span>
              </a>
            </div>
            
            <div class="hidden md:flex items-center space-x-6 space-x-reverse">
              <a href="index.html" class="nav-link active py-2 text-sm font-medium">
                <i data-feather="home" class="w-4 h-4 inline ml-1"></i>
                خانه
              </a>
              <a href="subscriptions.html" class="nav-link py-2 text-sm font-medium">
                <i data-feather="shield" class="w-4 h-4 inline ml-1"></i>
                اشتراک‌ها
              </a>
              <a href="payments.html" class="nav-link py-2 text-sm font-medium">
                <i data-feather="credit-card" class="w-4 h-4 inline ml-1"></i>
                پرداخت‌ها
              </a>
              <a href="support.html" class="nav-link py-2 text-sm font-medium">
                <i data-feather="message-square" class="w-4 h-4 inline ml-1"></i>
                پشتیبانی
              </a>
            </div>
            
            <div class="flex items-center space-x-3 space-x-reverse">
              <button class="md:hidden text-gray-500 hover:text-gray-700">
                <i data-feather="menu" class="w-5 h-5"></i>
              </button>
              <a href="profile.html" class="text-gray-500 hover:text-primary-500">
                <i data-feather="user" class="w-5 h-5"></i>
              </a>
            </div>
          </div>
        </div>
      </nav>
    `;
  }
}
customElements.define('custom-navbar', CustomNavbar);