FooterMinimalDark Footer

---
/**
 * FooterMinimalDark — strakke één-rij footer op donkere achtergrond: logo,
 * links en copyright op één regel.
 *
 * Props:
 * - logo?: string
 * - logoHref?: string
 * - links?: { label: string; href: string }[]
 * - copyright?: string         (default: "© {jaar}")
 */
interface Props {
  logo?: string;
  logoHref?: string;
  links?: { label: string; href: string }[];
  copyright?: string;
}

const {
  logo = 'Merk',
  logoHref = '/',
  links = [
    { label: 'Diensten', href: '#' },
    { label: 'Cases', href: '#' },
    { label: 'Privacy', href: '#' },
    { label: 'Contact', href: '#' },
  ],
  copyright,
} = Astro.props;

const year = new Date().getFullYear();
const copyrightText = copyright ?? `© ${year}`;
---

<footer class="bl-section fmd">
  <div class="bl-inner fmd-inner">
    <a href={logoHref} class="fmd-logo">{logo}</a>
    {links.length > 0 && (
      <nav class="fmd-links">
        {links.map(l => <a href={l.href} class="fmd-link">{l.label}</a>)}
      </nav>
    )}
    <p class="fmd-copy">{copyrightText}</p>
  </div>
</footer>

<style>
.fmd{background:#0a0a0a;border-top:1px solid rgba(255,255,255,.08);padding-block:0}
.fmd-inner{padding-block:1.25rem;display:flex;align-items:center;gap:2rem;flex-wrap:wrap}
.fmd-logo{font-weight:800;font-size:.9375rem;color:#fff;text-decoration:none;letter-spacing:-.02em}
.fmd-links{display:flex;gap:1.5rem;flex:1;flex-wrap:wrap}
.fmd-link{font-size:.8125rem;color:#aaa;text-decoration:none;transition:color .15s}
.fmd-link:hover{color:#fff}
.fmd-copy{font-size:.8125rem;color:#999;margin:0;white-space:nowrap}
</style>