class CustomNavbar extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        nav {
          background: rgba(17, 24, 39, 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: 50;
          border-bottom: 1px solid rgba(55, 65, 81, 0.5);
        }
        .logo {
          color: white;
          font-weight: bold;
          font-size: 1.25rem;
          display: flex;
          align-items: center;
          gap: 0.5rem;
        }
        .logo-icon {
          width: 24px;
          height: 24px;
        }
        ul {
          display: flex;
          gap: 2rem;
          list-style: none;
          margin: 0;
          padding: 0;
        }
        a {
          color: rgb(209, 213, 219);
          text-decoration: none;
          transition: all 0.2s;
          font-weight: 500;
        }
        a:hover {
          color: rgb(167, 139, 250);
        }
        .nav-actions {
          display: flex;
          gap: 1rem;
          align-items: center;
        }
        .btn-primary {
          background: linear-gradient(135deg, rgb(59, 130, 246) 0%, rgb(147, 51, 234) 100%);
          color: white;
          padding: 0.5rem 1rem;
          border-radius: 0.5rem;
          text-decoration: none;
          font-weight: 600;
          transition: all 0.2s;
        }
        .btn-primary:hover {
          transform: translateY(-1px);
          box-shadow: 0 4px 12px rgba(147, 51, 234, 0.3);
        }
        @media (max-width: 768px) {
          nav {
            padding: 1rem;
          }
          ul {
            gap: 1rem;
            font-size: 0.9rem;
          }
          .nav-actions {
            display: none;
          }
        }
      </style>
      <nav>
        <div class="logo">
          <svg class="logo-icon" fill="currentColor" viewBox="0 0 24 24">
            <path d="M13 9h5.5L13 3.5V9M6 2h8l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4c0-1.11.89-2 2-2m9 16v-2H6v2h9m3-4v-2H6v2h12z"/>
          </svg>
          AI Builder
        </div>
        <ul>
          <li><a href="#hero">Home</a></li>
          <li><a href="#features">Features</a></li>
          <li><a href="#commands">Commands</a></li>
          <li><a href="#installation">Install</a></li>
        </ul>
        <div class="nav-actions">
          <a href="https://github.com" target="_blank" rel="noopener noreferrer">
            <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
              <path d="M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0m6 13.5c-.8 0-1.5-.7-1.5-1.5s.7-1.5 1.5-1.5 1.5.7 1.5 1.5-.7 1.5-1.5 1.5m-6 1c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3-1.3 3-3 3m-6-1c-.8 0-1.5-.7-1.5-1.5S5.2 9 6 9s1.5.7 1.5 1.5S6.8 13.5 6 13.5z"/>
            </svg>
          </a>
          <a href="#hero" class="btn-primary">Get Started</a>
        </div>
      </nav>
    `;
  }
}
customElements.define('custom-navbar', CustomNavbar);