class CustomNavbar extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .navbar {
          transition: all 0.3s ease;
        }
        .navbar.scrolled {
          background-color: white;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        .nav-link {
          position: relative;
          transition: all 0.3s ease;
          padding: 0.5rem 0;
        }
        .nav-link:hover {
          color: #81c784;
        }
        .nav-link::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          width: 0;
          height: 2px;
          background-color: #81c784;
          transition: width 0.3s ease;
        }
        .nav-link:hover::after {
          width: 100%;
        }
        .active-link {
          color: #81c784;
          font-weight: 500;
        }
        .active-link::after {
          width: 100%;
          background-color: #81c784;
        }
.mobile-menu {
          max-height: 0;
          overflow: hidden;
          transition: max-height 0.3s ease-out, padding 0.3s ease;
        }
        .mobile-menu.open {
          max-height: 500px;
          padding-bottom: 1rem;
        }
</style>
      <nav class="navbar fixed w-full z-50 bg-primary text-white">
        <div class="container mx-auto px-6 py-4">
            <div class="flex justify-between items-center">
              <a href="index.html" class="text-2xl font-bold flex items-center text-white hover:text-secondary transition-colors duration-300">
                <i data-feather="shopping-bag" class="mr-2 w-6 h-6"></i>
                WasteLess
              </a>
              
              <!-- Desktop Navigation -->
              <div class="hidden md:flex items-center space-x-8">
                <a href="index.html" class="nav-link text-white hover:text-secondary transition-colors duration-300">Home</a>
                <a href="features.html" class="nav-link text-white hover:text-secondary transition-colors duration-300">Features</a>
                <a href="about.html" class="nav-link text-white hover:text-secondary transition-colors duration-300">About</a>
                <a href="#" class="bg-white text-primary px-6 py-2 rounded-full font-medium hover:bg-gray-100 transition-all duration-300 shadow-md hover:shadow-lg">
                  Get App
                </a>
              </div>
              
              <!-- Mobile menu button -->
              <button class="md:hidden focus:outline-none p-2 rounded-full hover:bg-white/20 transition-colors duration-300" id="mobile-menu-button">
                <i data-feather="menu" class="w-6 h-6 text-white"></i>
              </button>
            </div>
          <!-- Mobile Navigation -->
          <div class="mobile-menu md:hidden" id="mobile-menu">
            <div class="px-2 pt-2 pb-4 space-y-2">
              <a href="index.html" class="block px-3 py-3 rounded-lg text-base font-medium text-white hover:bg-white/20 transition-colors duration-300">Home</a>
              <a href="features.html" class="block px-3 py-3 rounded-lg text-base font-medium text-white hover:bg-white/20 transition-colors duration-300">Features</a>
              <a href="about.html" class="block px-3 py-3 rounded-lg text-base font-medium text-white hover:bg-white/20 transition-colors duration-300">About</a>
              <a href="#" class="block w-full text-center bg-white text-primary px-4 py-3 rounded-full font-medium mt-2 hover:bg-gray-100 transition-all duration-300 shadow-md">
                Get App
              </a>
            </div>
          </div>
</div>
      </nav>
    `;

    // Add scroll effect
    const navbar = this.shadowRoot.querySelector('.navbar');
    window.addEventListener('scroll', () => {
      if (window.scrollY > 50) {
        navbar.classList.add('scrolled');
      } else {
        navbar.classList.remove('scrolled');
      }
    });

    // Mobile menu toggle
    const mobileMenuButton = this.shadowRoot.getElementById('mobile-menu-button');
    const mobileMenu = this.shadowRoot.getElementById('mobile-menu');
    
    mobileMenuButton.addEventListener('click', () => {
      mobileMenu.classList.toggle('open');
      const icon = mobileMenuButton.querySelector('i');
      if (mobileMenu.classList.contains('open')) {
        icon.setAttribute('data-feather', 'x');
      } else {
        icon.setAttribute('data-feather', 'menu');
      }
      feather.replace();
    });

    // Highlight active link
    const currentPath = window.location.pathname.split('/').pop() || 'index.html';
    const links = this.shadowRoot.querySelectorAll('.nav-link');
    
    links.forEach(link => {
      const linkPath = link.getAttribute('href');
      if (currentPath === linkPath) {
        link.classList.add('active-link');
      }
    });
  }
}

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