FooterSocial Footer

---
/**
 * FooterSocial
 * Social-media gefocuste footer met grote social knoppen.
 */
interface Props {
  logo: string;
  tagline?: string;
  socials: { platform: string; href: string; icon: string; followers?: string }[];
  links?: { label: string; href: string }[];
  copyright?: string;
}
const { logo, tagline, socials, links = [], copyright } = Astro.props;
---
<footer class="fsoc">
  <div class="fsoc-inner">
    <div class="fsoc-brand">
      <a href="/" class="fsoc-logo">{logo}</a>
      {tagline && <p class="fsoc-tagline">{tagline}</p>}
    </div>
    <div class="fsoc-socials">
      {socials.map(s => (
        <a href={s.href} class="fsoc-social" aria-label={s.platform}>
          <span class="fsoc-social-icon">{s.icon}</span>
          <div class="fsoc-social-info">
            <span class="fsoc-social-platform">{s.platform}</span>
            {s.followers && <span class="fsoc-social-followers">{s.followers}</span>}
          </div>
        </a>
      ))}
    </div>
    <nav class="fsoc-links">
      {links.map(l => <a href={l.href} class="fsoc-link">{l.label}</a>)}
    </nav>
  </div>
  <div class="fsoc-bottom">
    <p class="fsoc-copy">{copyright ?? `© ${new Date().getFullYear()} ${logo}`}</p>
  </div>
</footer>
<style>
  .fsoc { background: #fff; border-top: 1px solid #e5e7eb; }
  .fsoc-inner { max-width: 1280px; margin: 0 auto; padding: 3rem 2rem 2rem; display: grid; grid-template-columns: 1fr auto 1fr; gap: 3rem; align-items: start; }
  .fsoc-logo { font-weight: 900; font-size: 1.125rem; color: #0a0a0a; text-decoration: none; letter-spacing: -0.03em; display: block; margin-bottom: 0.75rem; }
  .fsoc-tagline { font-size: 0.875rem; color: #6b7280; line-height: 1.6; margin: 0; }
  .fsoc-socials { display: flex; flex-direction: column; gap: 0.625rem; }
  .fsoc-social { display: flex; align-items: center; gap: 0.875rem; padding: 0.625rem 1rem; border: 1px solid #e5e7eb; border-radius: 0.625rem; text-decoration: none; transition: all 0.15s; }
  .fsoc-social:hover { border-color: var(--color-accent,#6366f1); box-shadow: 0 2px 8px rgba(99,102,241,0.1); }
  .fsoc-social-icon { font-size: 1.25rem; }
  .fsoc-social-platform { display: block; font-size: 0.875rem; font-weight: 600; color: #0a0a0a; }
  .fsoc-social-followers { display: block; font-size: 0.75rem; color: #9ca3af; }
  .fsoc-links { display: flex; flex-direction: column; gap: 0.5rem; justify-self: end; }
  .fsoc-link { font-size: 0.875rem; color: #6b7280; text-decoration: none; text-align: right; transition: color 0.15s; }
  .fsoc-link:hover { color: #0a0a0a; }
  .fsoc-bottom { border-top: 1px solid #f1f5f9; }
  .fsoc-copy { max-width: 1280px; margin: 0 auto; padding: 1rem 2rem; font-size: 0.8125rem; color: #9ca3af; }
  @media (max-width: 768px) { .fsoc-inner { grid-template-columns: 1fr; gap: 2rem; } .fsoc-links { justify-self: start; } .fsoc-link { text-align: left; } }
</style>