export function renderHeader() {
  return `
    <header class="site-header">
      <div class="container header-inner">
        <a href="/" class="logo">Carlos Lugo</a>
        <nav class="nav">
          <a href="#experience" class="nav-link">experience</a>
          <a href="#expertise" class="nav-link">expertise</a>
          <a href="#projects" class="nav-link">projects</a>
          <a href="#tools" class="nav-link">tools</a>
          <a href="#articles" class="nav-link">articles</a>
          <a href="#contact" class="nav-link nav-link--cta">get in touch</a>
        </nav>
      </div>
    </header>

    <style>
      .site-header {
        position: sticky;
        top: 0;
        z-index: 100;
        padding: 16px 0;
        border-bottom: 2px solid var(--border-strong);
        background: var(--bg);
        overflow-x: auto;
      }
      .header-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        flex-wrap: nowrap;
      }
      .logo {
        text-decoration: none;
        font-family: var(--font-sans);
        font-weight: 800;
        font-size: 1.1rem;
        letter-spacing: -0.02em;
        color: var(--text);
        white-space: nowrap;
      }
      .nav { display: flex; align-items: center; gap: 24px; margin-left: auto; }
      .nav-link {
        font-size: 0.85rem;
        color: var(--text);
        text-decoration: none;
        letter-spacing: 0.01em;
        white-space: nowrap;
        transition: color 0.2s;
      }
      .nav-link:hover { color: var(--accent); }
      .nav-link--cta {
        font-family: var(--font-sans);
        font-weight: 800;
        background: var(--accent);
        color: var(--bg);
        padding: 8px 16px;
      }
      .nav-link--cta:hover { background: var(--accent-600); color: var(--bg); }
    </style>
  `
}