FooterModern Footer

---
/**
 * FooterModern — lichte footer met merk-kolom + socials en link-kolommen waarin
 * items een optionele badge kunnen dragen. Onderaan copyright + trust-signalen.
 *
 * Props:
 * - logo?: string
 * - logoHref?: string
 * - tagline?: string
 * - socials?: { label: string; href: string; icon?: string }[]
 * - columns?: { title: string; links: { label: string; href: string; badge?: string }[] }[]
 * - trust?: string[]
 * - copyright?: string         (default: "© {jaar}")
 */
interface FooterLink { label: string; href: string; badge?: string }
interface FooterColumn { title: string; links: FooterLink[] }
interface Props {
  logo?: string;
  logoHref?: string;
  tagline?: string;
  socials?: { label: string; href: string; icon?: string }[];
  columns?: FooterColumn[];
  trust?: string[];
  copyright?: string;
}

const {
  logo = 'Merk',
  logoHref = '/',
  tagline = 'Data-gedreven online marketing voor ambitieuze merken in Nederland.',
  socials = [
    { label: 'LinkedIn', href: '#', icon: 'in' },
    { label: 'Instagram', href: '#', icon: 'ig' },
    { label: 'YouTube', href: '#', icon: '▶' },
  ],
  columns = [
    { title: 'Diensten', links: [
      { label: 'Google Ads', href: '#', badge: 'Populair' },
      { label: 'Meta Ads', href: '#' },
      { label: 'SEO', href: '#' },
      { label: 'Analytics', href: '#' },
    ] },
    { title: 'Bureau', links: [
      { label: 'Over ons', href: '#' },
      { label: 'Cases', href: '#' },
      { label: 'Blog', href: '#' },
      { label: 'Vacatures', href: '#', badge: 'Nieuw' },
    ] },
  ],
  trust = ['SSL beveiligd', 'Made in NL'],
  copyright,
} = Astro.props;

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

<footer class="bl-section fmod">
  <div class="bl-inner fmod-inner">
    <div class="fmod-brand">
      <a href={logoHref} class="fmod-logo">{logo}</a>
      {tagline && <p class="fmod-tagline">{tagline}</p>}
      {socials.length > 0 && (
        <div class="fmod-socials">
          {socials.map(s => <a href={s.href} class="fmod-social" aria-label={s.label}>{s.icon}</a>)}
        </div>
      )}
    </div>
    {columns.map(col => (
      <div class="fmod-col">
        <h4 class="fmod-col-title">{col.title}</h4>
        <ul class="fmod-col-links">
          {col.links.map(l => (
            <li class="fmod-col-item">
              <a href={l.href} class="fmod-col-link">{l.label}</a>
              {l.badge && <span class="fmod-badge">{l.badge}</span>}
            </li>
          ))}
        </ul>
      </div>
    ))}
  </div>
  <div class="fmod-bottom">
    <div class="bl-inner fmod-bottom-inner">
      <p class="fmod-copy">{copyrightText}</p>
      {trust.length > 0 && (
        <div class="fmod-trust">
          {trust.map(t => <span class="fmod-trust-item">{t}</span>)}
        </div>
      )}
    </div>
  </div>
</footer>

<style>
.fmod{background:#f8fafc;border-top:1px solid #e5e7eb;padding-block:0}
.fmod-inner{padding-block:3.5rem 2.5rem;display:grid;grid-template-columns:260px repeat(auto-fit,minmax(150px,1fr));gap:3rem}
.fmod-logo{font-weight:900;font-size:1.125rem;color:#0a0a0a;text-decoration:none;letter-spacing:-.03em;display:block;margin-bottom:.75rem}
.fmod-tagline{font-size:.9375rem;color:#4b5563;line-height:1.6;margin:0 0 1.25rem}
.fmod-socials{display:flex;gap:.5rem}
.fmod-social{width:34px;height:34px;border-radius:.5rem;background:#fff;border:1px solid #e5e7eb;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:600;text-decoration:none;color:#374151;transition:border-color .15s,color .15s}
.fmod-social:hover{border-color:var(--color-accent,#6366f1);color:var(--color-accent,#6366f1)}
.fmod-col-title{font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#6b7280;margin:0 0 .875rem}
.fmod-col-links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.375rem}
.fmod-col-item{display:flex;align-items:center;gap:.5rem}
.fmod-col-link{font-size:.9375rem;color:#374151;text-decoration:none;transition:color .15s}
.fmod-col-link:hover{color:var(--color-accent,#6366f1)}
.fmod-badge{font-size:.6875rem;font-weight:700;background:#dcfce7;color:#15803d;padding:.1rem .5rem;border-radius:999px}
.fmod-bottom{border-top:1px solid #e5e7eb;background:#fff}
.fmod-bottom-inner{padding-block:1.25rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.fmod-copy{font-size:.8125rem;color:#6b7280;margin:0}
.fmod-trust{display:flex;gap:1.5rem}
.fmod-trust-item{font-size:.8125rem;color:#6b7280}
@media(max-width:640px){.fmod-inner{grid-template-columns:1fr;gap:2rem}}
</style>