class CustomHeader extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .header {
          height: 64px;
          background: rgba(255, 255, 255, 0.95);
          backdrop-filter: blur(10px);
          border-bottom: 1px solid rgba(229, 231, 235, 0.5);
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 24px;
          position: sticky;
          top: 0;
          z-index: 20;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
        }
.search-bar {
          flex: 1;
          max-width: 500px;
          margin: 0 24px;
        }
        
        .search-input {
          width: 100%;
          padding: 8px 16px;
          border-radius: 6px;
          border: 1px solid #e5e7eb;
          background-color: #f9fafb;
          transition: all 0.2s;
        }
        
        .search-input:focus {
          outline: none;
          border-color: #a5b4fc;
          background-color: white;
          box-shadow: 0 0 0 3px rgba(199, 210, 254, 0.5);
        }
        
        .header-actions {
          display: flex;
          align-items: center;
        }
        
        .action-btn {
          width: 36px;
          height: 36px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-left: 12px;
          color: #4b5563;
          background: none;
          border: none;
          cursor: pointer;
          transition: all 0.2s;
        }
        
        .action-btn:hover {
          background-color: #f3f4f6;
          color: #111827;
        }
        
        .notification-badge {
          position: absolute;
          top: -2px;
          right: -2px;
          width: 16px;
          height: 16px;
          background-color: #ef4444;
          color: white;
          border-radius: 50%;
          font-size: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        
        .user-menu {
          position: relative;
          margin-left: 16px;
        }
        
        .user-avatar {
          width: 36px;
          height: 36px;
          border-radius: 50%;
          background-color: #e5e7eb;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          overflow: hidden;
        }
        
        @media (max-width: 768px) {
          .search-bar {
            display: none;
          }
          
          .header {
            padding: 0 16px;
          }
        }
      </style>
      
      <header class="header">
        <div class="flex items-center">
          <button class="action-btn md:hidden">
            <i class="fas fa-bars"></i>
</button>
          <h1 class="text-xl font-bold ml-4 hidden md:block">EduPulse</h1>
        </div>
        
        <div class="search-bar">
          <input type="text" class="search-input" placeholder="Search resources, projects...">
        </div>
        <div class="header-actions">
          <button class="action-btn relative">
            <i class="fas fa-bell"></i>
            <span class="notification-badge">3</span>
          </button>
          <button id="dark-mode-toggle" class="action-btn">
            <i class="fas fa-moon"></i>
          </button>
          <button class="action-btn">
            <i class="fas fa-question-circle"></i>
          </button>
          <div class="user-menu">
            <div class="user-avatar">
              <i class="fas fa-user"></i>
            </div>
          </div>
        </div>
</header>
    `;
    
    // Mobile menu toggle functionality
    this.shadowRoot.querySelector('.action-btn').addEventListener('click', () => {
      const sidebar = document.querySelector('custom-sidebar').shadowRoot.querySelector('.sidebar');
      sidebar.classList.toggle('collapsed');
    });
  }
}

customElements.define('custom-header', CustomHeader);