class CustomSidebar extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
        }
        
        .sidebar {
          position: fixed;
          top: 0;
          left: 0;
          height: 100vh;
          width: 280px;
          background: white;
          box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
          z-index: 1000;
          transform: translateX(-100%);
          transition: transform 0.3s ease;
          overflow-y: auto;
        }
        
        .sidebar.open {
          transform: translateX(0);
        }
        
        .sidebar-header {
          padding: 1.5rem;
          border-bottom: 1px solid #e5e7eb;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        
        .logo {
          font-weight: 700;
          font-size: 1.5rem;
          color: #3b82f6;
          text-decoration: none;
          display: flex;
          align-items: center;
        }
        
        .close-btn {
          background: none;
          border: none;
          font-size: 1.5rem;
          cursor: pointer;
          color: #6b7280;
        }
        
        .nav-links {
          padding: 1rem 0;
          list-style: none;
        }
        
        .nav-links li {
          padding: 0.5rem 1.5rem;
        }
        
        .nav-links a {
          text-decoration: none;
          color: #374151;
          font-weight: 500;
          display: flex;
          align-items: center;
          padding: 0.75rem;
          border-radius: 0.5rem;
          transition: background-color 0.3s ease;
        }
        
        .nav-links a:hover {
          background-color: #f3f4f6;
          color: #3b82f6;
        }
        
        .nav-links i {
          margin-right: 0.75rem;
          width: 20px;
          text-align: center;
        }
        
        .auth-buttons {
          padding: 1.5rem;
          display: flex;
          flex-direction: column;
          gap: 0.75rem;
        }
        
        .btn {
          padding: 0.75rem;
          border-radius: 0.5rem;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.3s ease;
          text-decoration: none;
          display: inline-block;
          text-align: center;
        }
        
        .btn-outline {
          border: 2px solid #3b82f6;
          color: #3b82f6;
          background: transparent;
        }
        
        .btn-primary {
          background: #3b82f6;
          color: white;
          border: 2px solid #3b82f6;
        }
        
        .btn-outline:hover {
          background: #3b82f6;
          color: white;
        }
        
        .btn-primary:hover {
          background: #2563eb;
          border-color: #2563eb;
        }
        
        .overlay {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.5);
          z-index: 999;
          opacity: 0;
          visibility: hidden;
          transition: opacity 0.3s ease, visibility 0.3s ease;
        }
        
        .overlay.open {
          opacity: 1;
          visibility: visible;
        }
      </style>
      
      <div class="overlay" id="overlay"></div>
      
      <div class="sidebar" id="sidebar">
        <div class="sidebar-header">
          <a href="/" class="logo">
            <i data-feather="heart"></i>
            MediHelp
          </a>
          <button class="close-btn" id="closeBtn">&times;</button>
        </div>
        
        <ul class="nav-links">
          <li><a href="/"><i data-feather="home"></i> Home</a></li>
          <li><a href="/symptom-checker.html"><i data-feather="activity"></i> Symptom Checker</a></li>
          <li><a href="/appointments.html"><i data-feather="calendar"></i> Appointments</a></li>
          <li><a href="/medical-records.html"><i data-feather="file-text"></i> Medical Records</a></li>
          <li><a href="/medication.html"><i data-feather="pill"></i> Medication</a></li>
          <li><a href="/community.html"><i data-feather="users"></i> Health Community</a></li>
          <li><a href="/teleconsultation.html"><i data-feather="video"></i> Teleconsultation</a></li>
          <li><a href="/health-tips.html"><i data-feather="book"></i> Health Tips</a></li>
          <li><a href="/apk-download.html"><i data-feather="download"></i> Download APK</a></li>
        </ul>
<div class="auth-buttons">
          <a href="/login.html" class="btn btn-outline">Log In</a>
          <a href="/signup.html" class="btn btn-primary">Sign Up</a>
        </div>
      </div>
    `;
    
    // Add event listeners after content is rendered
    setTimeout(() => {
      this.setupEventListeners();
      feather.replace();
    }, 0);
  }
  
  setupEventListeners() {
    const sidebar = this.shadowRoot.getElementById('sidebar');
    const overlay = this.shadowRoot.getElementById('overlay');
    const closeBtn = this.shadowRoot.getElementById('closeBtn');
    
    // Close sidebar when clicking overlay or close button
    overlay.addEventListener('click', () => this.closeSidebar());
    closeBtn.addEventListener('click', () => this.closeSidebar());
    
    // Close sidebar when clicking on navigation links
    const navLinks = this.shadowRoot.querySelectorAll('.nav-links a');
    navLinks.forEach(link => {
      link.addEventListener('click', () => this.closeSidebar());
    });
  }
  
  openSidebar() {
    const sidebar = this.shadowRoot.getElementById('sidebar');
    const overlay = this.shadowRoot.getElementById('overlay');
    
    sidebar.classList.add('open');
    overlay.classList.add('open');
    document.body.style.overflow = 'hidden';
  }
  
  closeSidebar() {
    const sidebar = this.shadowRoot.getElementById('sidebar');
    const overlay = this.shadowRoot.getElementById('overlay');
    
    sidebar.classList.remove('open');
    overlay.classList.remove('open');
    document.body.style.overflow = '';
  }
}

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