NavWithDropdown Navigation

---
/**
 * NavWithDropdown — sticky nav met hover-dropdown op één menu-item.
 *
 * Props:
 * - logo?: string
 * - logoHref?: string
 * - dropdownLabel?: string         (label van het item met dropdown)
 * - dropdownItems?: Array<{ label: string; desc: string; href: string }>
 * - links?: Array<{ label: string; href: string }>   (overige top-level links)
 * - cta?: { label: string; href: string }
 */
interface Props {
  logo?: string;
  logoHref?: string;
  dropdownLabel?: string;
  dropdownItems?: { label: string; desc: string; href: string }[];
  links?: { label: string; href: string }[];
  cta?: { label: string; href: string };
}

const {
  logo = 'Merk',
  logoHref = '/',
  dropdownLabel = 'Diensten',
  dropdownItems = [
    { label: 'Item één', desc: 'Korte omschrijving van de dienst', href: '#' },
    { label: 'Item twee', desc: 'Korte omschrijving van de dienst', href: '#' },
    { label: 'Item drie', desc: 'Korte omschrijving van de dienst', href: '#' },
  ],
  links = [
    { label: 'Werk', href: '#' },
    { label: 'Blog', href: '#' },
    { label: 'Contact', href: '#' },
  ],
  cta = { label: 'Gratis gesprek', href: '#' },
} = Astro.props;
---

<header class="bl-section nwd">
  <nav class="bl-inner nwd-inner">
    <a href={logoHref} class="nwd-logo">{logo}</a>
    <ul class="nwd-links">
      <li class="nwd-item nwd-item--has-drop">
        <a href="#" class="nwd-link">
          {dropdownLabel}
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="m6 9 6 6 6-6"></path></svg>
        </a>
        <ul class="nwd-dropdown">
          {dropdownItems.map(item => (
            <li>
              <a href={item.href} class="nwd-drop-link">
                <span class="nwd-drop-label">{item.label}</span>
                <span class="nwd-drop-desc" set:html={item.desc}></span>
              </a>
            </li>
          ))}
        </ul>
      </li>
      {links.map(l => (
        <li class="nwd-item">
          <a href={l.href} class="nwd-link">{l.label}</a>
        </li>
      ))}
    </ul>
    {cta && <a href={cta.href} class="nwd-cta">{cta.label}</a>}
  </nav>
</header>

<style>
.nwd{background:#fff;border-bottom:1px solid #e5e7eb;position:sticky;top:0;z-index:100;padding-block:0}
.nwd-inner{display:flex;align-items:center;height:64px;gap:2rem}
.nwd-logo{font-weight:800;font-size:1.0625rem;color:#0a0a0a;text-decoration:none;letter-spacing:-.02em}
.nwd-links{list-style:none;padding:0;margin:0;display:flex;flex:1;gap:0}
.nwd-item{position:relative}
.nwd-link{display:flex;align-items:center;gap:.25rem;font-size:.875rem;font-weight:500;color:#374151;text-decoration:none;padding:.375rem .875rem;border-radius:.375rem;transition:background-color .15s,color .15s;white-space:nowrap}
.nwd-link:hover,.nwd-link--active{color:var(--color-accent,#6366f1);background:#6366f112}
.nwd-dropdown{display:none;position:absolute;top:100%;left:0;min-width:220px;background:#fff;border:1px solid #e5e7eb;border-radius:.75rem;box-shadow:0 8px 32px #0000001a;list-style:none;padding:.5rem;padding-top:calc(.5rem + .625rem);z-index:200}
/* WHY: hover-bridge — removes gap between trigger and dropdown so hover-state stays active while mouse travels. */
.nwd-dropdown::before{content:'';position:absolute;top:-.625rem;left:0;right:0;height:.625rem}
.nwd-item--has-drop:hover .nwd-dropdown{display:block}
.nwd-drop-link{display:block;padding:.625rem .875rem;border-radius:.5rem;text-decoration:none;transition:background .15s}
.nwd-drop-link:hover{background:#f8fafc}
.nwd-drop-label{display:block;font-size:.875rem;font-weight:500;color:#0a0a0a}
.nwd-drop-desc{display:block;font-size:.75rem;color:#6b7280;margin-top:.125rem}
.nwd-cta{margin-left:auto;font-size:.875rem;font-weight:600;padding:.5rem 1.25rem;background:var(--color-accent,#6366f1);color:#fff;border-radius:.5rem;text-decoration:none;transition:opacity .2s;white-space:nowrap}
.nwd-cta:hover{opacity:.88}
@media (max-width: 768px) { .nwd-links { display: none; } }
</style>