FooterCentered Footer

---
/**
 * FooterCentered
 * Alles gecentreerd: logo, tagline, links op één rij, copyright.
 */
interface Props {
  logo: string;
  tagline?: string;
  links?: { label: string; href: string }[];
  socials?: { platform: string; href: string; icon: string }[];
  copyright?: string;
}
const { logo, tagline, links = [], socials = [], copyright } = Astro.props;
---
<footer class="fcen">
  <div class="fcen-inner">
    <a href="/" 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.platform}>{s.icon}</a>)}
      </div>
    )}
    <p class="fcen-copy">{copyright ?? `© ${new Date().getFullYear()} ${logo}. Alle rechten voorbehouden.`}</p>
  </div>
</footer>
<style>
  .fcen { background: #f8fafc; border-top: 1px solid #e5e7eb; padding: 3rem 2rem; }
  .fcen-inner { max-width: 640px; margin: 0 auto; 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: -0.03em; }
  .fcen-tagline { font-size: 0.9375rem; color: #6b7280; line-height: 1.6; margin: 0; }
  .fcen-links { display: flex; gap: 1.5rem; flex-wrap: wrap; justify-content: center; }
  .fcen-link { font-size: 0.875rem; color: #6b7280; text-decoration: none; transition: color 0.15s; }
  .fcen-link:hover { color: #0a0a0a; }
  .fcen-socials { display: flex; gap: 0.75rem; }
  .fcen-social { font-size: 1.125rem; color: #9ca3af; text-decoration: none; transition: color 0.2s; }
  .fcen-social:hover { color: var(--color-accent,#6366f1); }
  .fcen-copy { font-size: 0.8125rem; color: #9ca3af; margin: 0; }
</style>