class CustomNavbar extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        nav {
          background: rgba(255, 255, 255, 0.95);
          backdrop-filter: blur(10px);
          padding: 1rem 2rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          z-index: 1000;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
          transition: all 0.3s ease;
        }

        nav.scrolled {
          background: white;
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        }

        .logo {
          font-size: 1.5rem;
          font-weight: 800;
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
          cursor: pointer;
        }

        ul {
          display: flex;
          gap: 2rem;
          list-style: none;
          margin: 0;
          padding: 0;
          align-items: center;
        }

        a {
          color: #4b5563;
          text-decoration: none;
          font-weight: 500;
          transition: all 0.3s ease;
          position: relative;
        }

        a:hover {
          color: #667eea;
        }

        a::after {
          content: '';
          position: absolute;
            width: 0;
            height: 2px;
            bottom: -5px;
            left: 50%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            transition: all 0.3s ease;
            transform: translateX(-50%);
        }

        a:hover::after {
            width: 100%;
        }

        .auth-buttons {
          display: flex;
          gap: 1rem;
          align-items: center;
        }

        .btn-primary {
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          color: white;
          padding: 0.5rem 1.5rem;
          border-radius: 0.5rem;
          border: none;
          cursor: pointer;
          font-weight: 600;
          transition: all 0.3s ease;
        }

        .btn-primary:hover {
          transform: translateY(-2px);
          box-shadow: 0 10px 20px rgba(102, 126, 234, 0.4);
        }

        .mobile-menu-toggle {
          display: none;
          background: none;
          border: none;
          cursor: pointer;
        }

        @media (max-width: 768px) {
          nav {
            padding: 1rem;
          }

          .mobile-menu-toggle {
            display: block;
          }

          ul {
            position: fixed;
            top: 70px;
            left: -100%;
            width: 100%;
            background: white;
            flex-direction: column;
            padding: 2rem;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            transition: left 0.3s ease;
          }

          ul.active {
            left: 0;
          }
        }
      </style>
      <nav id="navbar">
        <div class="logo">CodeCollab Pro</div>
        <ul id="navMenu">
          <li><a href="/">Home</a></li>
          <li><a href="#features">Features</a></li>
          <li><a href="/editor.html">Editor</a></li>
          <li><a href="/agent-builder.html">Agent Builder</a></li>
          <li><a href="/dashboard.html">Dashboard</a></li>
<li>
            <div class="auth-buttons">
              <button class="btn-primary" onclick="window.location.href='/login.html'">Sign In</button>
            </div>
          </li>
        </ul>
        <button class="mobile-menu-toggle" id="mobileMenuToggle">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <line x1="3" y1="6" x2="21" y2="6"></line>
            <line x1="3" y1="12" x2="21" y2="12"></line>
            <line x1="3" y1="18" x2="21" y2="18"></line>
          </svg>
        </button>
      </nav>
    `;

    // Mobile menu toggle
    const mobileMenuToggle = this.shadowRoot.getElementById('mobileMenuToggle');
    const navMenu = this.shadowRoot.getElementById('navMenu');
    const navbar = this.shadowRoot.getElementById('navbar');

    mobileMenuToggle.addEventListener('click', () => {
      navMenu.classList.toggle('active');
    });

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

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