class AIDashboardNav extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        nav {
          display: flex;
          flex-direction: column;
          gap: 0.25rem;
          padding: 0.5rem;
        }
        a {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          padding: 0.5rem 1rem;
          border-radius: 0.5rem;
          text-decoration: none;
          color: rgba(156, 163, 175, 1);
          font-size: 0.875rem;
          transition: all 0.2s ease;
        }
        a:hover {
          background: rgba(255, 255, 255, 0.05);
          color: white;
        }
        a.active {
          background: rgba(99, 102, 241, 0.1);
          color: rgba(99, 102, 241, 1);
        }
        i {
          width: 1rem;
          height: 1rem;
        }
      </style>
      <nav>
        <a href="#dashboard" class="active">
          <i data-feather="activity"></i>
          Dashboard
        </a>
        <a href="#models">
          <i data-feather="cpu"></i>
          Models
        </a>
        <a href="#training">
          <i data-feather="database"></i>
          Training
        </a>
        <a href="#content">
          <i data-feather="image"></i>
          Generation
        </a>
        <a href="#api">
          <i data-feather="code"></i>
          API
        </a>
        <a href="#settings">
          <i data-feather="settings"></i>
          Settings
        </a>
      </nav>
    `;
    feather.replace();
  }
}
customElements.define('ai-dashboard-nav', AIDashboardNav);