components/navbar.js

class CustomNavbar extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
        }
        
        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
        
        .navbar {
          background-color: white;
          box-shadow: 0 2px 4px rgba(0,0,0,0.05);
          padding: 0.75rem 1rem;
          position: sticky;
          top: 0;
          z-index: 50;
        }
        
        .container {
          max-width: 1280px;
          margin: 0 auto;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        
        .logo {
          display: flex;
          align-items: center;
          gap: 0.75rem;
          font-weight: 700;
          font-size: 1.25rem;
          color: #0088CC;
          text-decoration: none;
        }
        
        .nav-links {
          display: flex;
          gap: 1.5rem;
          align-items: center;
        }
        
        .nav-link {
          color: #4b5563;
          text-decoration: none;
          font-weight: 500;
          font-size: 0.875rem;
          transition: color 0.2s;
        }
        
        .nav-link:hover {
          color: #0088CC;
        }
        
        .nav-actions {
          display: flex;
          gap: 1rem;
          align-items: center;
        }
        
        .search-bar {
          display: flex;
          align-items: center;
          background-color: #f9fafb;
          border-radius: 0.5rem;
          padding: 0.5rem 0.75rem;
          width: 240px;
        }
        
        .search-bar input {
          background: transparent;
          border: none;
          outline: none;
          width: 100%;
          font-size: 0.875rem;
          color: #374151;
        }
        
        .search-bar input::placeholder {
          color: #9ca3af;
        }
        
        .btn {
          padding: 0.5rem 1rem;
          border-radius: 0.5rem;
          font-weight: 500;
          font-size: 0.875rem;
          cursor: pointer;
          transition: all 0.2s;
          border: none;
        }
        
        .btn-primary {
          background-color: #0088CC;
          color: white;
        }
        
        .btn-primary:hover {
          background-color: #0077b3;
        }
        
        .btn-outline {
          background-color: transparent;
          border: 1px solid #d1d5db;
          color: #374151;
        }
        
        .btn-outline:hover {
          background-color: #f9fafb;
        }
        
        .user-menu {
          display: flex;
          align-items: center;
          gap: 0.75rem;
          cursor: pointer;
        }
        
        .avatar {
          width: 32px;
          height: 32px;
          border-radius: 50%;
          background-color: #e5e7eb;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 600;
          color: #4b5563;
        }
        
        @media (max-width: 768px) {
          .nav-links {
            display: none;
          }
          
          .search-bar {
            width: 160px;
          }
        }
      </style>
      
      <nav class="navbar">
        <div class="container">
          <a href="#" class="logo">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="#0088CC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M2 17L12 22L22 17" stroke="#0088CC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M2 12L12 17L22 12" stroke="#0088CC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            Replit
          </a>
          
          <div class="nav-links">
            <a href="#" class="nav-link">Templates</a>
            <a href="#" class="nav-link">Community</a>
            <a href="#" class="nav-link">Blog</a>
            <a href="#" class="nav-link">Pricing</a>
          </div>
          
          <div class="nav-actions">
            <div class="search-bar">
              <i data-feather="search" style="width: 16px; height: 16px; color: #9ca3af;"></i>
              <input type="text" placeholder="Search...">
            </div>
            <button class="btn btn-outline">
              <i data-feather="book" style="width: 16px; height: 16px;"></i>
              Docs
            </button>
                            <button class="btn btn-primary">
                                <i data-feather="plus" style="width: 16px; height: 16px;"></i>
                                Create
                            </button>
                            <button class="btn btn-outline" onclick="window.dispatchEvent(new CustomEvent('toggleAIChat'))">
                                <i data-feather="message-square" style="width: 16px; height: 16px;"></i>
                                AI Chat
                            </button>
                            <div class="user-menu">
                                <div class="avatar">U</div>
                            </div>
</div>
        </div>
      </nav>
    `;
    
    // Initialize feather icons in shadow DOM
    import('https://unpkg.com/feather-icons').then(() => {
      feather.replace();
    });
  }
}

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