NavMinimal Navigation

---
/**
 * NavMinimal — minimale navigatiebalk: logo links, links + CTA rechts.
 *
 * Props:
 * - logo?: string
 * - logoHref?: string
 * - links?: Array<{ label: string; href: string }>
 * - cta?: { label: string; href: string }
 */
interface Props {
  logo?: string;
  logoHref?: string;
  links?: { label: string; href: string }[];
  cta?: { label: string; href: string };
}

const {
  logo = 'Merk',
  logoHref = '/',
  links = [
    { label: 'Diensten', href: '#' },
    { label: 'Werk', href: '#' },
    { label: 'Contact', href: '#' },
  ],
  cta = { label: 'Offerte', href: '#' },
} = Astro.props;
---

<header class="bl-section nm">
  <nav class="bl-inner nm-inner">
    <a href={logoHref} class="nm-logo">{logo}</a>
    <div class="nm-right">
      {links.map(l => <a href={l.href} class="nm-link">{l.label}</a>)}
      {cta && <a href={cta.href} class="nm-cta">{cta.label}</a>}
    </div>
  </nav>
</header>

<style>
.nm{background:#fff;border-bottom:1px solid #f1f5f9;padding-block:0}
.nm-inner{display:flex;align-items:center;justify-content:space-between;height:60px}
.nm-logo{font-weight:800;font-size:1rem;letter-spacing:-.02em;color:#0a0a0a;text-decoration:none}
.nm-right{display:flex;align-items:center;gap:1.5rem}
.nm-link{font-size:.875rem;color:#6b7280;text-decoration:none;transition:color .15s}
.nm-link:hover{color:#0a0a0a}
.nm-cta{font-size:.875rem;font-weight:600;color:var(--color-accent,#6366f1);text-decoration:none}
</style>