NavWithDropdown Navigation

---
/**
 * NavWithDropdown
 * Navigatie met hover-dropdown submenu. CSS-only, geen JS.
 */
interface Props {
  logo: string;
  links: { label: string; href?: string; children?: { label: string; href: string; description?: string }[]; active?: boolean }[];
  cta?: { label: string; href: string };
}
const { logo, links, cta } = Astro.props;
---
<header class="nwd">
  <nav class="nwd-inner">
    <a href="/" class="nwd-logo">{logo}</a>
    <ul class="nwd-links">
      {links.map(l => (
        <li class={`nwd-item${l.children ? ' nwd-item--has-drop' : ''}`}>
          <a href={l.href ?? '#'} class={`nwd-link${l.active ? ' nwd-link--active' : ''}`}>
            {l.label}
            {l.children && <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"/></svg>}
          </a>
          {l.children && (
            <ul class="nwd-dropdown">
              {l.children.map(c => (
                <li>
                  <a href={c.href} class="nwd-drop-link">
                    <span class="nwd-drop-label">{c.label}</span>
                    {c.description && <span class="nwd-drop-desc">{c.description}</span>}
                  </a>
                </li>
              ))}
            </ul>
          )}
        </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; }
  .nwd-inner { max-width: 1280px; margin: 0 auto; padding: 0 2rem; 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: -0.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: 0.25rem; font-size: 0.875rem; font-weight: 500; color: #374151; text-decoration: none; padding: 0.375rem 0.875rem; border-radius: 0.375rem; transition: all 0.15s; white-space: nowrap; }
  .nwd-link:hover, .nwd-link--active { color: var(--color-accent,#6366f1); background: rgba(99,102,241,0.07); }
  .nwd-dropdown { display: none; position: absolute; top: calc(100% + 0.5rem); left: 0; min-width: 220px; background: #fff; border: 1px solid #e5e7eb; border-radius: 0.75rem; box-shadow: 0 8px 32px rgba(0,0,0,0.1); list-style: none; padding: 0.5rem; z-index: 200; }
  .nwd-item--has-drop:hover .nwd-dropdown { display: block; }
  .nwd-drop-link { display: block; padding: 0.625rem 0.875rem; border-radius: 0.5rem; text-decoration: none; transition: background 0.15s; }
  .nwd-drop-link:hover { background: #f8fafc; }
  .nwd-drop-label { display: block; font-size: 0.875rem; font-weight: 500; color: #0a0a0a; }
  .nwd-drop-desc { display: block; font-size: 0.75rem; color: #6b7280; margin-top: 0.125rem; }
  .nwd-cta { margin-left: auto; 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; white-space: nowrap; }
  .nwd-cta:hover { opacity: 0.88; }
  @media (max-width: 768px) { .nwd-links { display: none; } }
</style>