components/navbar.js

class CustomNavbar extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          width: 100%;
          z-index: 50;
          position: relative;
        }
        
        .navbar {
          background: rgba(255, 255, 255, 0.95);
          backdrop-filter: blur(10px);
          border-bottom: 1px solid rgba(30, 64, 175, 0.1);
          transition: all 0.3s ease;
        }
        
        .navbar.scrolled {
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        }
        
        .nav-link {
          position: relative;
          padding: 0.5rem 1rem;
          color: #4B5563;
          transition: color 0.3s ease;
          font-weight: 500;
        }
        
        .nav-link:hover {
          color: #1E40AF;
        }
        
        .nav-link::after {
          content: '';
          position: absolute;
          bottom: 0;
          right: 1rem;
          left: 1rem;
          height: 2px;
          background: #1E40AF;
          transform: scaleX(0);
          transition: transform 0.3s ease;
        }
        
        .nav-link:hover::after {
          transform: scaleX(1);
        }
        
        .mobile-menu {
          max-height: 0;
          overflow: hidden;
          transition: max-height 0.5s ease-out;
        }
        
        .mobile-menu.open {
          max-height: 500px;
        }
        
        .language-switcher {
          border: 1px solid #E5E7EB;
          border-radius: 0.5rem;
          padding: 0.25rem;
        }
        
        .language-option {
          padding: 0.25rem 0.75rem;
          border-radius: 0.375rem;
          cursor: pointer;
          transition: all 0.2s ease;
        }
        
        .language-option.active {
          background: #1E40AF;
          color: white;
        }
        
        .language-option:not(.active):hover {
          background: #F3F4F6;
        }
        
        @media (max-width: 768px) {
          .desktop-menu {
            display: none;
          }
          
          .mobile-menu-btn {
            display: block;
          }
        }
        
        @media (min-width: 769px) {
          .mobile-menu-btn {
            display: none;
          }
          
          .mobile-menu {
            display: none;
          }
        }
      </style>
      
      <nav class="navbar fixed top-0 left-0 right-0 py-4">
        <div class="container mx-auto px-4">
          <div class="flex justify-between items-center">
            <!-- Logo -->
            <a href="/" class="flex items-center space-x-3 space-x-reverse">
              <div class="w-10 h-10 bg-primary rounded-lg flex items-center justify-center">
                <i data-feather="truck" class="text-white w-6 h-6"></i>
              </div>
              <div>
                <div class="text-xl font-bold text-primary">MileTruck</div>
                <div class="text-xs text-gray-500">شحن بري ذكي</div>
              </div>
            </a>
            
            <!-- Desktop Menu -->
            <div class="desktop-menu flex items-center space-x-2 space-x-reverse">
              <a href="/" class="nav-link">الرئيسية</a>
              <a href="#services" class="nav-link">خدماتنا</a>
              <a href="/fleet.html" class="nav-link">أسطولنا</a>
              <a href="/solutions.html" class="nav-link">حلول متكاملة</a>
              <a href="/about.html" class="nav-link">عنّا</a>
              <a href="/contact.html" class="nav-link">اتصل بنا</a>
                <!-- Language Switcher -->
              <div class="language-switcher flex mr-4">
                <div class="language-option active" data-lang="ar">العربية</div>
                <div class="language-option" data-lang="en">English</div>
              </div>
<!-- CTA Buttons -->
              <div class="flex items-center space-x-3 space-x-reverse">
                <a href="/login.html" class="text-primary hover:text-primary-dark font-medium">
                  <i data-feather="log-in" class="ml-1 w-4 h-4 inline"></i>
                  تسجيل الدخول
                </a>
                <a href="/quote.html" class="bg-primary hover:bg-primary-dark text-white font-semibold py-2 px-6 rounded-lg transition-colors duration-300 hover-lift">
                  <i data-feather="clipboard" class="ml-2"></i>
                  طلب عرض سعر
                </a>
              </div>
            </div>
            
            <!-- Mobile Menu Button -->
            <button class="mobile-menu-btn p-2 rounded-lg hover:bg-gray-100">
              <i data-feather="menu" class="w-6 h-6 text-gray-700"></i>
            </button>
          </div>
          
          <!-- Mobile Menu -->
          <div class="mobile-menu mt-4">
            <div class="space-y-2 py-4 border-t">
              <a href="/" class="block py-2 px-4 hover:bg-gray-50 rounded-lg">الرئيسية</a>
              <a href="#services" class="block py-2 px-4 hover:bg-gray-50 rounded-lg">خدماتنا</a>
              <a href="/fleet.html" class="block py-2 px-4 hover:bg-gray-50 rounded-lg">أسطولنا</a>
              <a href="/solutions.html" class="block py-2 px-4 hover:bg-gray-50 rounded-lg">حلول متكاملة</a>
              <a href="/about.html" class="block py-2 px-4 hover:bg-gray-50 rounded-lg">عنّا</a>
              <a href="/contact.html" class="block py-2 px-4 hover:bg-gray-50 rounded-lg">اتصل بنا</a>
              
              <div class="pt-4 border-t">
                <a href="/login.html" class="block py-2 px-4 hover:bg-gray-50 rounded-lg">
                  <i data-feather="log-in" class="ml-2 w-4 h-4 inline"></i>
                  تسجيل الدخول
                </a>
                <a href="/quote.html" class="block py-2 px-4 bg-primary text-white rounded-lg mt-2 text-center">
                  <i data-feather="clipboard" class="ml-2"></i>
                  طلب عرض سعر
                </a>
              </div>
            </div>
          </div>
        </div>
      </nav>
    `;
    
    this.initializeEventListeners();
  }
  
  initializeEventListeners() {
    // Mobile menu toggle
    const mobileMenuBtn = this.shadowRoot.querySelector('.mobile-menu-btn');
    const mobileMenu = this.shadowRoot.querySelector('.mobile-menu');
    
    mobileMenuBtn.addEventListener('click', () => {
      mobileMenu.classList.toggle('open');
    });
    
    // Language switcher
    const langOptions = this.shadowRoot.querySelectorAll('.language-option');
    langOptions.forEach(option => {
      option.addEventListener('click', () => {
        langOptions.forEach(opt => opt.classList.remove('active'));
        option.classList.add('active');
        // In a real app, you would change the language here
      });
    });
    
    // Navbar scroll effect
    let lastScrollTop = 0;
    window.addEventListener('scroll', () => {
      const navbar = this.shadowRoot.querySelector('.navbar');
      const currentScrollTop = window.pageYOffset || document.documentElement.scrollTop;
      
      if (currentScrollTop > 50) {
        navbar.classList.add('scrolled');
      } else {
        navbar.classList.remove('scrolled');
      }
      
      lastScrollTop = currentScrollTop <= 0 ? 0 : currentScrollTop;
    });
    
    // Close mobile menu when clicking on a link
    const mobileLinks = this.shadowRoot.querySelectorAll('.mobile-menu a');
    mobileLinks.forEach(link => {
      link.addEventListener('click', () => {
        mobileMenu.classList.remove('open');
      });
    });
    
    // Initialize feather icons in shadow DOM
    setTimeout(() => {
      const icons = this.shadowRoot.querySelectorAll('[data-feather]');
      if (typeof feather !== 'undefined') {
        feather.replace({}, this.shadowRoot);
      }
    }, 100);
  }
}

customElements.define('custom-navbar', CustomNavbar);