FooterSticky Footer

---
/**
 * FooterSticky
 * Sticky bottom footer bar. Blijft onderaan zichtbaar bij scrollen.
 */
interface Props {
  logo?: string;
  links?: { label: string; href: string }[];
  cta?: { label: string; href: string };
  copyright?: string;
}
const { logo = 'BLURR', links = [], cta, copyright } = Astro.props;
---
<footer class="fs">
  <div class="fs-inner">
    <span class="fs-logo">{logo}</span>
    {links.length > 0 && (
      <nav class="fs-nav">
        {links.map(l => <a href={l.href} class="fs-link">{l.label}</a>)}
      </nav>
    )}
    <div class="fs-right">
      {copyright && <span class="fs-copy">{copyright}</span>}
      {cta && <a href={cta.href} class="fs-cta">{cta.label}</a>}
    </div>
  </div>
</footer>
<style>
  .fs { position: sticky; bottom: 0; left: 0; right: 0; z-index: 100; background: #fff; border-top: 1px solid #e5e7eb; box-shadow: 0 -4px 20px rgba(0,0,0,0.06); }
  .fs-inner { max-width: 1200px; margin: 0 auto; padding: 0.875rem 2rem; display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
  .fs-logo { font-size: 1rem; font-weight: 900; color: #0a0a0a; letter-spacing: -0.04em; }
  .fs-nav { display: flex; gap: 1.5rem; flex: 1; }
  .fs-link { font-size: 0.875rem; color: #6b7280; text-decoration: none; transition: color 0.15s; }
  .fs-link:hover { color: #0a0a0a; }
  .fs-right { display: flex; align-items: center; gap: 1.5rem; margin-left: auto; }
  .fs-copy { font-size: 0.8125rem; color: #9ca3af; }
  .fs-cta { padding: 0.5rem 1.25rem; background: var(--color-accent,#6366f1); color: #fff; font-size: 0.875rem; font-weight: 700; border-radius: 0.375rem; text-decoration: none; transition: opacity 0.15s; }
  .fs-cta:hover { opacity: 0.88; }
  @media (max-width: 640px) { .fs-nav { display: none; } }
</style>