NavTabs Navigation

---
/**
 * NavTabs
 * Tab-stijl navigatie. Geschikt voor subpagina's binnen een sectie.
 */
interface Props {
  logo: string;
  tabs: { label: string; href: string; active?: boolean; badge?: string }[];
  cta?: { label: string; href: string };
}
const { logo, tabs, cta } = Astro.props;
---
<header class="ntabs">
  <div class="ntabs-top">
    <div class="ntabs-top-inner">
      <a href="/" class="ntabs-logo">{logo}</a>
      {cta && <a href={cta.href} class="ntabs-cta">{cta.label}</a>}
    </div>
  </div>
  <nav class="ntabs-bar">
    <div class="ntabs-inner">
      <ul class="ntabs-list">
        {tabs.map(t => (
          <li>
            <a href={t.href} class={`ntabs-tab${t.active ? ' ntabs-tab--active' : ''}`}>
              {t.label}
              {t.badge && <span class="ntabs-badge">{t.badge}</span>}
            </a>
          </li>
        ))}
      </ul>
    </div>
  </nav>
</header>
<style>
  .ntabs-top { background: #fff; border-bottom: 1px solid #f1f5f9; }
  .ntabs-top-inner { max-width: 1280px; margin: 0 auto; padding: 0 2rem; display: flex; align-items: center; justify-content: space-between; height: 56px; }
  .ntabs-logo { font-weight: 800; font-size: 1.0625rem; color: #0a0a0a; text-decoration: none; letter-spacing: -0.02em; }
  .ntabs-cta { font-size: 0.875rem; font-weight: 600; padding: 0.5rem 1.25rem; background: var(--color-accent,#6366f1); color: #fff; border-radius: 0.5rem; text-decoration: none; transition: opacity 0.2s; }
  .ntabs-cta:hover { opacity: 0.88; }
  .ntabs-bar { background: #fff; border-bottom: 2px solid #e5e7eb; position: sticky; top: 0; z-index: 100; }
  .ntabs-inner { max-width: 1280px; margin: 0 auto; padding: 0 2rem; }
  .ntabs-list { list-style: none; padding: 0; margin: 0; display: flex; gap: 0; }
  .ntabs-tab { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 500; color: #6b7280; text-decoration: none; padding: 0.875rem 1rem; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.15s; }
  .ntabs-tab:hover { color: #374151; }
  .ntabs-tab--active { color: var(--color-accent,#6366f1); border-bottom-color: var(--color-accent,#6366f1); font-weight: 600; }
  .ntabs-badge { font-size: 0.6875rem; font-weight: 700; background: var(--color-accent,#6366f1); color: #fff; padding: 0.1rem 0.4rem; border-radius: 999px; }
</style>