class CustomSidebar extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          position: fixed;
          top: 0;
          left: 0;
          width: 280px;
          height: 100vh;
          background: #ffffff;
          box-shadow: 2px 0 15px rgba(0, 0, 0, 0.1);
          z-index: 1000;
          transform: translateX(-100%);
          transition: transform 0.3s ease;
        }
        
        .sidebar-container {
          padding: 1.5rem;
          height: 100%;
          display: flex;
          flex-direction: column;
        }
        
        .sidebar-header {
          display: flex;
          align-items: center;
          gap: 0.75rem;
          margin-bottom: 2rem;
          padding-bottom: 1rem;
          border-bottom: 1px solid #e5e7eb;
        }
        
        .logo-icon {
          font-size: 1.75rem;
          color: #2563eb;
        }
        
        .logo-text {
          font-family: 'Plus Jakarta Sans', sans-serif;
          font-weight: 700;
          font-size: 1.25rem;
          color: #2563eb;
        }
        
        .nav-menu {
          flex: 1;
          list-style: none;
          padding: 0;
          margin: 0;
          display: flex;
          flex-direction: column;
          gap: 0.5rem;
        }
        
        .nav-item {
          margin: 0;
        }
        
        .nav-link {
          display: flex;
          align-items: center;
          gap: 0.75rem;
          padding: 0.75rem 1rem;
          border-radius: 0.5rem;
          color: #4b5563;
          font-weight: 500;
          transition: all 0.2s ease;
        }
        
        .nav-link:hover {
          background: #f3f4f6;
          color: #2563eb;
        }
        
        .nav-link i {
          font-size: 1.25rem;
          width: 24px;
          text-align: center;
        }
        
        .nav-link.active {
          background: #eff6ff;
          color: #2563eb;
        }
        
        .sidebar-footer {
          margin-top: auto;
          padding-top: 1rem;
          border-top: 1px solid #e5e7eb;
        }
        
        .user-profile {
          display: flex;
          align-items: center;
          gap: 0.75rem;
        }
        
        .user-avatar {
          width: 36px;
          height: 36px;
          border-radius: 50%;
          background: #e5e7eb;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        
        .user-name {
          font-weight: 500;
          font-size: 0.875rem;
        }
        
        .user-role {
          font-size: 0.75rem;
          color: #6b7280;
        }
        
        @media (max-width: 768px) {
          :host {
            width: 100%;
            transform: translateX(-100%);
          }
          
          :host([open]) {
            transform: translateX(0);
          }
        }
      </style>
      
      <div class="sidebar-container">
        <div class="sidebar-header">
          <i class="fas fa-graduation-cap logo-icon"></i>
          <span class="logo-text">EduBridge</span>
        </div>
        
        <ul class="nav-menu">
          <li class="nav-item">
            <a href="#about" class="nav-link">
              <i class="fas fa-info-circle"></i>
              <span>About</span>
            </a>
          </li>
          <li class="nav-item">
            <a href="#eligibility" class="nav-link">
              <i class="fas fa-user-check"></i>
              <span>Eligibility</span>
            </a>
          </li>
          <li class="nav-item">
            <a href="#impact" class="nav-link">
              <i class="fas fa-chart-line"></i>
              <span>Impact</span>
            </a>
          </li>
          <li class="nav-item">
            <a href="#stories" class="nav-link">
              <i class="fas fa-book-open"></i>
              <span>Stories</span>
            </a>
          </li>
          <li class="nav-item">
            <a href="#process" class="nav-link">
              <i class="fas fa-cogs"></i>
              <span>How It Works</span>
            </a>
          </li>
          <li class="nav-item">
            <a href="#cta" class="nav-link active">
              <i class="fas fa-paper-plane"></i>
              <span>Apply Now</span>
            </a>
          </li>
        </ul>
        
        <div class="sidebar-footer">
          <div class="user-profile">
            <div class="user-avatar">
              <i class="fas fa-user"></i>
            </div>
            <div>
              <div class="user-name">Guest User</div>
              <div class="user-role">Visitor</div>
            </div>
          </div>
        </div>
      </div>
    `;
  }
  
  static get observedAttributes() {
    return ['open'];
  }
  
  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'open') {
      this.shadowRoot.host.style.transform = newValue !== null ? 'translateX(0)' : 'translateX(-100%)';
    }
  }
}

customElements.define('custom-sidebar', CustomSidebar);