class LcarsNavbar extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          background-color: #000000;
          height: 80px;
          border-bottom: 5px solid #FF9966;
        }
        
        .lcars-nav-container {
          display: flex;
          height: 100%;
          align-items: center;
          padding: 0 20px;
        }
        .lcars-logo {
          font-family: 'Arial', sans-serif;
          font-weight: bold;
          font-size: 28px;
          color: #FFCC00; /* LCARS gold */
          margin-right: 30px;
          text-transform: uppercase;
          letter-spacing: 2px;
          text-shadow: 0 0 5px rgba(255, 204, 0, 0.7);
        }
.lcars-nav-items {
          display: flex;
          gap: 15px;
          height: 100%;
        }
        
        .lcars-nav-item {
          font-family: 'Arial', sans-serif;
          color: #FFFFFF;
          text-decoration: none;
          font-size: 18px;
          padding: 0 15px;
          display: flex;
          align-items: center;
          position: relative;
          height: 100%;
        }
        
        .lcars-nav-item::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 4px;
          background-color: #9999FF;
          transform: scaleX(0);
          transition: transform 0.3s ease;
        }
        
        .lcars-nav-item:hover::after {
          transform: scaleX(1);
        }
        
        .lcars-nav-item:hover {
          color: #FFCC99;
        }
        
        .lcars-nav-item.active {
          color: #FF9966;
          font-weight: bold;
        }
        
        .lcars-nav-item.active::after {
          transform: scaleX(1);
          background-color: #FF9966;
        }
      </style>
      
      <div class="lcars-nav-container">
        <div class="lcars-logo">EvE 2 D Syre</div>
        <div class="lcars-nav-items">
          <a href="/" class="lcars-nav-item active">Home</a>
          <a href="/models.html" class="lcars-nav-item">Models</a>
          <a href="/settings.html" class="lcars-nav-item">Settings</a>
          <a href="/api.html" class="lcars-nav-item">API</a>
          <a href="/login.html" class="lcars-nav-item">Login</a>
</div>
      </div>
    `;
  }
}

customElements.define('lcars-navbar', LcarsNavbar);