FooterSticky Footer

---
/**
 * FooterSticky
 * Compacte sticky balk die onderaan de viewport blijft plakken: logo, korte
 * navigatie, copyright en een CTA-knop. Lichte achtergrond.
 *
 * Props:
 * - logo: string
 * - links?: Array<{ label: string; href: string }>
 * - cta?: { label: string; href: string }
 * - copyright?: string               default "© {jaar} {logo}"
 */
interface Props {
  logo: string;
  links?: { label: string; href: string }[];
  cta?: { label: string; href: string };
  copyright?: string;
}

const {
  logo,
  links = [],
  cta,
  copyright,
} = Astro.props;

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

<footer class="bl-section fs">
  <div class="bl-inner fs-inner">
    <span class="fs-logo">{logo}</span>

    {links.length > 0 && (
      <nav class="fs-nav" aria-label="Footer navigatie">
        {links.map(l => <a href={l.href} class="fs-link">{l.label}</a>)}
      </nav>
    )}

    <div class="fs-right">
      <span class="fs-copy">{copyrightText}</span>
      {cta && <a href={cta.href} class="fs-cta">{cta.label}</a>}
    </div>
  </div>
</footer>

<style>
  .fs {
    position: sticky;
    bottom: 0;
    z-index: 100;
    padding-block: 0;
    background: #fff;
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 -4px 20px #0000000f;
  }
  .fs-inner {
    padding-block: .875rem;
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
  }
  .fs-logo { font-size: 1rem; font-weight: 900; color: #0a0a0a; letter-spacing: -.04em; }
  .fs-nav { display: flex; gap: 1.5rem; flex: 1; }
  .fs-link { font-size: 1rem; color: #4b5563; text-decoration: none; transition: color .15s; }
  .fs-link:hover { color: #0a0a0a; }
  .fs-right { display: flex; align-items: center; gap: 1.5rem; margin-left: auto; }
  .fs-copy { font-size: .875rem; color: #6b7280; }
  .fs-cta {
    padding: .5rem 1.25rem;
    background: var(--color-accent, #6366f1);
    color: #fff;
    font-size: .875rem;
    font-weight: 700;
    border-radius: .375rem;
    text-decoration: none;
    transition: opacity .15s;
  }
  .fs-cta:hover { opacity: .88; }

  @media (max-width: 640px) {
    .fs-nav { display: none; }
  }
</style>