components/navbar.js

class CustomNavbar extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        nav {
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          padding: 1rem 2rem;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
          position: sticky;
          top: 0;
          z-index: 1000;
        }
        .container {
          max-width: 1200px;
          margin: 0 auto;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
        .logo {
          font-size: 1.8rem;
          font-weight: 800;
          color: white;
          text-decoration: none;
          display: flex;
          align-items: center;
          gap: 0.5rem;
        }
        .logo-icon {
          width: 32px;
          height: 32px;
          background: white;
          border-radius: 50%;
          display: inline-block;
        }
        .nav-links {
          display: flex;
          gap: 2rem;
          align-items: center;
        }
        .nav-links a {
          color: rgba(255, 255, 255, 0.9);
          text-decoration: none;
          font-weight: 600;
          font-size: 1rem;
          transition: color 0.3s;
          padding: 0.5rem 0.8rem;
          border-radius: 6px;
        }
        .nav-links a:hover {
          color: white;
          background: rgba(255, 255, 255, 0.1);
        }
        .nav-links a.active {
          color: white;
          background: rgba(255, 255, 255, 0.2);
        }
        .github-link {
          background: rgba(255, 255, 255, 0.15);
          padding: 0.5rem 1rem;
          border-radius: 20px;
          display: flex;
          align-items: center;
          gap: 0.5rem;
        }
        .github-link:hover {
          background: rgba(255, 255, 255, 0.25);
        }
        @media (max-width: 768px) {
          .container {
            flex-direction: column;
            gap: 1rem;
          }
          .nav-links {
            flex-wrap: wrap;
            justify-content: center;
            gap: 1rem;
          }
        }
      </style>
      <nav>
        <div class="container">
          <a href="index.html" class="logo">
            <span class="logo-icon"></span>
            <span>GraphicsLab</span>
          </a>
          <div class="nav-links">
            <a href="index.html" class="active">Home</a>
            <a href="benchmarks.html">Benchmarks</a>
            <a href="visualizer.html">Visualizer</a>
            <a href="compare.html">Compare</a>
            <a href="about.html">About</a>
            <a href="https://github.com/public-apis/public-apis" target="_blank" class="github-link">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="white">
                <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
              </svg>
              API
            </a>
          </div>
        </div>
      </nav>
    `;
  }
}
customElements.define('custom-navbar', CustomNavbar);