FooterCentered Footer

---
/**
 * FooterCentered — compacte, gecentreerde footer: logo, tagline, één rij links,
 * socials en copyright. Lichte achtergrond.
 *
 * Props:
 * - logo?: string
 * - logoHref?: string
 * - tagline?: string
 * - links?: { label: string; href: string }[]
 * - socials?: { label: string; href: string; icon?: string }[]
 * - copyright?: string         (default: "© {jaar}")
 */
interface Props {
  logo?: string;
  logoHref?: string;
  tagline?: string;
  links?: { label: string; href: string }[];
  socials?: { label: string; href: string; icon?: string }[];
  copyright?: string;
}

const {
  logo = 'Merk',
  logoHref = '/',
  tagline = 'Online marketing bureau voor ambitieuze merken.',
  links = [
    { label: 'Diensten', href: '#' },
    { label: 'Cases', href: '#' },
    { label: 'Blog', href: '#' },
    { label: 'Contact', href: '#' },
    { label: 'Privacy', href: '#' },
  ],
  socials = [
    { label: 'LinkedIn', href: '#', icon: 'in' },
    { label: 'Instagram', href: '#', icon: 'ig' },
  ],
  copyright,
} = Astro.props;

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

<footer class="bl-section fcen">
  <div class="bl-inner bl-inner--narrow fcen-inner">
    <a href={logoHref} class="fcen-logo">{logo}</a>
    {tagline && <p class="fcen-tagline">{tagline}</p>}
    {links.length > 0 && (
      <nav class="fcen-links">
        {links.map(l => <a href={l.href} class="fcen-link">{l.label}</a>)}
      </nav>
    )}
    {socials.length > 0 && (
      <div class="fcen-socials">
        {socials.map(s => <a href={s.href} class="fcen-social" aria-label={s.label}>{s.icon}</a>)}
      </div>
    )}
    <p class="fcen-copy">{copyrightText}</p>
  </div>
</footer>

<style>
.fcen{background:#f8fafc;border-top:1px solid #e5e7eb}
.fcen-inner{text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.25rem}
.fcen-logo{font-weight:900;font-size:1.25rem;color:#0a0a0a;text-decoration:none;letter-spacing:-.03em}
.fcen-tagline{font-size:1rem;color:#4b5563;line-height:1.6;margin:0}
.fcen-links{display:flex;gap:1.5rem;flex-wrap:wrap;justify-content:center}
.fcen-link{font-size:.9375rem;color:#4b5563;text-decoration:none;transition:color .15s}
.fcen-link:hover{color:#0a0a0a}
.fcen-socials{display:flex;gap:.75rem}
.fcen-social{font-size:.8125rem;font-weight:600;color:#6b7280;text-decoration:none;transition:color .2s}
.fcen-social:hover{color:var(--color-accent,#6366f1)}
.fcen-copy{font-size:.8125rem;color:#6b7280;margin:0}
</style>