FooterApp Footer

---
/**
 * FooterApp — donkere footer met merk, app-store badges, links en socials op
 * één rij; copyright onderaan. Gericht op apps/SaaS met mobiele downloads.
 *
 * Props:
 * - logo?: string
 * - tagline?: string
 * - badges?: { sub: string; label: string; href: string; icon?: string }[]
 * - links?: { label: string; href: string }[]
 * - socials?: { label: string; href: string; icon?: string }[]
 * - copyright?: string         (default: "© {jaar}")
 */
interface AppBadge { sub: string; label: string; href: string; icon?: string }
interface Props {
  logo?: string;
  tagline?: string;
  badges?: AppBadge[];
  links?: { label: string; href: string }[];
  socials?: { label: string; href: string; icon?: string }[];
  copyright?: string;
}

const {
  logo = 'Merk',
  tagline = 'Beheer je marketing campagnes onderweg.',
  badges = [
    { sub: 'Download in de', label: 'App Store', href: '#', icon: '' },
    { sub: 'Beschikbaar op', label: 'Google Play', href: '#', icon: '▶' },
  ],
  links = [
    { label: 'Privacy', href: '#' },
    { label: 'Voorwaarden', href: '#' },
    { label: 'Support', 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 fa">
  <div class="bl-inner fa-inner">
    <div class="fa-brand">
      <span class="fa-logo">{logo}</span>
      {tagline && <p class="fa-tagline">{tagline}</p>}
    </div>
    {badges.length > 0 && (
      <div class="fa-app-badges">
        {badges.map(b => (
          <a href={b.href} class="fa-badge">
            {b.icon && <span class="fa-badge-icon">{b.icon}</span>}
            <span class="fa-badge-text"><small>{b.sub}</small>{b.label}</span>
          </a>
        ))}
      </div>
    )}
    {links.length > 0 && (
      <nav class="fa-links">
        {links.map(l => <a href={l.href} class="fa-link">{l.label}</a>)}
      </nav>
    )}
    {socials.length > 0 && (
      <div class="fa-socials">
        {socials.map(s => <a href={s.href} class="fa-social" aria-label={s.label}>{s.icon}</a>)}
      </div>
    )}
  </div>
  <div class="fa-bottom">
    <div class="bl-inner fa-bottom-inner">
      <span class="fa-copy">{copyrightText}</span>
    </div>
  </div>
</footer>

<style>
.fa{background:#0a0a0a;padding-block:0}
.fa-inner{padding-block:4rem;display:flex;align-items:center;gap:3rem;flex-wrap:wrap;justify-content:space-between}
.fa-logo{font-size:1.375rem;font-weight:900;color:#fff;letter-spacing:-.04em;display:block;margin-bottom:.375rem}
.fa-tagline{font-size:1rem;color:#aaa;margin:0}
.fa-app-badges{display:flex;gap:.75rem;flex-wrap:wrap}
.fa-badge{display:flex;align-items:center;gap:.75rem;padding:.75rem 1.25rem;background:#ffffff14;border:1px solid rgba(255,255,255,.14);border-radius:.625rem;text-decoration:none;transition:background .15s}
.fa-badge:hover{background:#ffffff24}
.fa-badge-icon{font-size:1.375rem;color:#fff}
.fa-badge-text{display:flex;flex-direction:column;font-size:1rem;font-weight:700;color:#fff;line-height:1.25}
.fa-badge-text small{font-size:.6875rem;font-weight:400;color:#aaa}
.fa-links{display:flex;gap:1.5rem;flex-wrap:wrap}
.fa-link{font-size:.9375rem;color:#aaa;text-decoration:none;transition:color .15s}
.fa-link:hover{color:#fff}
.fa-socials{display:flex;gap:.625rem}
.fa-social{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:#ffffff14;border-radius:50%;text-decoration:none;color:#e8e8e8;font-size:.75rem;font-weight:600;transition:background .15s}
.fa-social:hover{background:#ffffff29}
.fa-bottom{border-top:1px solid rgba(255,255,255,.08)}
.fa-bottom-inner{padding-block:1rem;text-align:center}
.fa-copy{font-size:.8125rem;color:#999}
</style>