ListLinks list

---
/**
 * ListLinks
 * Navigatielijst van gelabelde linkrijen met beschrijving en pijl-indicator.
 *
 * Props:
 * - links?: Array<{ label: string; desc?: string; href: string }>
 */
interface Props {
  links?: { label: string; desc?: string; href: string }[];
}

const {
  links = [
    { label: 'Onze werkwijze', desc: 'Hoe wij van strategie naar resultaat gaan', href: '#' },
    { label: 'Cases', desc: 'Bewijs dat onze aanpak werkt', href: '#' },
    { label: 'Tarieven', desc: 'Transparant en eerlijk geprijsd', href: '#' },
    { label: 'Contact', desc: 'Plan een gratis kennismaking', href: '#' },
  ],
} = Astro.props;
---

<section class="bl-section lst-lnk-section">
  <div class="bl-inner bl-inner--narrow">
    <ul class="lst-lnk">
      {links.map(link => (
        <li class="lst-lnk__item">
          <a href={link.href} class="lst-lnk__link">
            <div>
              <span class="lst-lnk__label">{link.label}</span>
              {link.desc && <span class="lst-lnk__desc">{link.desc}</span>}
            </div>
            <span class="lst-lnk__arrow" aria-hidden="true">→</span>
          </a>
        </li>
      ))}
    </ul>
  </div>
</section>

<style>
.lst-lnk{list-style:none;margin:0;padding:0}
.lst-lnk__item{border-bottom:1px solid #efefef}
.lst-lnk__item:last-child{border-bottom:none}
.lst-lnk__link{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 0;text-decoration:none;color:inherit;transition:color .2s}
.lst-lnk__link:hover{color:var(--color-accent, #6366f1)}
.lst-lnk__label{display:block;font-size:1rem;font-weight:600;color:var(--color-primary, #0a0a0a);transition:color .2s}
.lst-lnk__link:hover .lst-lnk__label{color:var(--color-accent, #6366f1)}
.lst-lnk__desc{display:block;font-size:.875rem;color:var(--color-muted, #666);margin-top:.1rem}
.lst-lnk__arrow{color:var(--color-accent, #6366f1);font-size:1rem;flex-shrink:0;transition:transform .2s}
.lst-lnk__link:hover .lst-lnk__arrow{transform:translate(3px)}
</style>