ListLinks list

---
interface Props {
  items: Array<{ label: string; href: string; desc?: string }>;
}
const { items = [
  { label: "Onze werkwijze", href: "#", desc: "Hoe wij van strategie naar resultaat gaan" },
  { label: "Case studies", href: "#", desc: "Bewijs dat onze aanpak werkt" },
  { label: "Tarieven", href: "#", desc: "Transparant en eerlijk geprijsd" },
  { label: "Contact", href: "#", desc: "Plan een gratis kennismaking" },
] } = Astro.props;
---

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

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .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: 0.85rem 0;
    text-decoration: none;
    color: inherit;
    transition: color 0.2s;
  }
  .lst-lnk__link:hover { color: var(--color-accent); }
  .lst-lnk__label {
    display: block;
    font-size: 0.975rem;
    font-weight: 600;
    color: var(--color-primary);
    transition: color 0.2s;
  }
  .lst-lnk__link:hover .lst-lnk__label { color: var(--color-accent); }
  .lst-lnk__desc {
    display: block;
    font-size: 0.825rem;
    color: #888;
    margin-top: 0.1rem;
  }
  .lst-lnk__arrow {
    color: var(--color-accent);
    font-size: 1rem;
    flex-shrink: 0;
    transition: transform 0.2s;
  }
  .lst-lnk__link:hover .lst-lnk__arrow { transform: translateX(3px); }
</style>