FooterApp Footer

---
/**
 * FooterApp
 * App-stijl footer met app store badges en compacte links.
 */
interface Props {
  logo?: string;
  tagline?: string;
  appStoreHref?: string;
  googlePlayHref?: string;
  links?: { label: string; href: string }[];
  socials?: { platform: string; icon: string; href: string }[];
  copyright?: string;
}
const { logo = 'BLURR', tagline, appStoreHref = '#', googlePlayHref = '#', links = [], socials = [], copyright = `© ${new Date().getFullYear()} ${logo}` } = Astro.props;
---
<footer class="fa">
  <div class="fa-inner">
    <div class="fa-brand">
      <span class="fa-logo">{logo}</span>
      {tagline && <p class="fa-tagline">{tagline}</p>}
    </div>
    <div class="fa-app-badges">
      <a href={appStoreHref} class="fa-badge">
        <span class="fa-badge-icon">🍎</span>
        <span class="fa-badge-text"><small>Download in de</small>App Store</span>
      </a>
      <a href={googlePlayHref} class="fa-badge">
        <span class="fa-badge-icon">▶</span>
        <span class="fa-badge-text"><small>Beschikbaar op</small>Google Play</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.platform}>{s.icon}</a>)}
      </div>
    )}
  </div>
  <div class="fa-bottom">
    <span class="fa-copy">{copyright}</span>
  </div>
</footer>
<style>
  .fa { background: #0a0a0a; }
  .fa-inner { max-width: 1100px; margin: 0 auto; padding: 4rem 2rem; 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: -0.04em; display: block; margin-bottom: 0.375rem; }
  .fa-tagline { font-size: 0.875rem; color: rgba(255,255,255,0.4); margin: 0; }
  .fa-app-badges { display: flex; gap: 0.75rem; flex-wrap: wrap; }
  .fa-badge { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1.25rem; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 0.625rem; text-decoration: none; transition: background 0.15s; }
  .fa-badge:hover { background: rgba(255,255,255,0.1); }
  .fa-badge-icon { font-size: 1.375rem; }
  .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: 0.6875rem; font-weight: 400; color: rgba(255,255,255,0.5); }
  .fa-links { display: flex; gap: 1.5rem; flex-wrap: wrap; }
  .fa-link { font-size: 0.875rem; color: rgba(255,255,255,0.4); text-decoration: none; transition: color 0.15s; }
  .fa-link:hover { color: rgba(255,255,255,0.75); }
  .fa-socials { display: flex; gap: 0.625rem; }
  .fa-social { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.06); border-radius: 50%; text-decoration: none; transition: background 0.15s; }
  .fa-social:hover { background: rgba(255,255,255,0.12); }
  .fa-bottom { border-top: 1px solid rgba(255,255,255,0.06); padding: 1rem 2rem; text-align: center; }
  .fa-copy { font-size: 0.8125rem; color: rgba(255,255,255,0.2); }
</style>