FooterCompact Footer

---
/**
 * FooterCompact — compacte één-rij footer: logo + tagline, navigatie, copyright.
 *
 * Props:
 * - logo?: string
 * - logoHref?: string
 * - tagline?: string
 * - links?: { label: string; href: string; muted?: boolean }[]
 * - copyright?: string         (default: "© {jaar}")
 */
interface Props {
  logo?: string;
  logoHref?: string;
  tagline?: string;
  links?: { label: string; href: string; muted?: boolean }[];
  copyright?: string;
}

const {
  logo = 'Merk',
  logoHref = '/',
  tagline = 'Online marketing bureau',
  links = [
    { label: 'Diensten', href: '#' },
    { label: 'Cases', href: '#' },
    { label: 'Contact', href: '#' },
    { label: 'Privacy', href: '#', muted: true },
    { label: 'Voorwaarden', href: '#', muted: true },
  ],
  copyright,
} = Astro.props;

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

<footer class="bl-section fcom">
  <div class="bl-inner fcom-inner">
    <div class="fcom-left">
      <a href={logoHref} class="fcom-logo">{logo}</a>
      {tagline && <span class="fcom-tagline">{tagline}</span>}
    </div>
    {links.length > 0 && (
      <nav class="fcom-nav">
        {links.map(l => (
          <a href={l.href} class={`fcom-link${l.muted ? ' fcom-link--muted' : ''}`}>{l.label}</a>
        ))}
      </nav>
    )}
    <p class="fcom-copy">{copyrightText}</p>
  </div>
</footer>

<style>
.fcom{background:#fff;border-top:1px solid #e5e7eb;padding-block:0}
.fcom-inner{padding-block:1rem;display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.fcom-left{display:flex;align-items:center;gap:.75rem}
.fcom-logo{font-weight:800;font-size:.9375rem;color:#0a0a0a;text-decoration:none;letter-spacing:-.02em}
.fcom-tagline{font-size:.75rem;color:#9ca3af;border-left:1px solid #e5e7eb;padding-left:.75rem}
.fcom-nav{display:flex;flex:1;gap:1.25rem;flex-wrap:wrap}
.fcom-link{font-size:.8125rem;color:#6b7280;text-decoration:none;transition:color .15s}
.fcom-link:hover{color:#0a0a0a}
.fcom-link--muted{color:#9ca3af}
.fcom-copy{font-size:.75rem;color:#9ca3af;margin:0;white-space:nowrap}
</style>