FooterBigText Footer

---
/**
 * FooterBigText
 * Enorme typografische footer met oversized merknaam als achtergrondtekst.
 */
interface Props {
  logo: string;
  bigText?: string;
  tagline?: string;
  links?: { label: string; href: string }[];
  copyright?: string;
  bg?: 'dark' | 'white';
}
const { logo, bigText, tagline, links = [], copyright, bg = 'dark' } = Astro.props;
---
<footer class={`fbt fbt--${bg}`}>
  <div class="fbt-inner">
    <div class="fbt-top">
      <a href="/" class="fbt-logo">{logo}</a>
      {tagline && <p class="fbt-tagline">{tagline}</p>}
      {links.length > 0 && (
        <nav class="fbt-links">
          {links.map(l => <a href={l.href} class="fbt-link">{l.label}</a>)}
        </nav>
      )}
    </div>
    <div class="fbt-big-wrap" aria-hidden="true">
      <span class="fbt-big">{bigText ?? logo}</span>
    </div>
  </div>
  <div class="fbt-bottom">
    <div class="fbt-bottom-inner">
      <p class="fbt-copy">{copyright ?? `© ${new Date().getFullYear()} ${logo}`}</p>
    </div>
  </div>
</footer>
<style>
  .fbt { overflow: hidden; position: relative; }
  .fbt--dark { background: #0a0a0a; }
  .fbt--white { background: #fff; border-top: 1px solid #e5e7eb; }
  .fbt-inner { max-width: 1280px; margin: 0 auto; padding: 3.5rem 2rem 0; }
  .fbt-top { position: relative; z-index: 2; padding-bottom: 2rem; }
  .fbt--dark .fbt-logo { color: #fff; }
  .fbt--white .fbt-logo { color: #0a0a0a; }
  .fbt-logo { font-weight: 900; font-size: 1.25rem; text-decoration: none; letter-spacing: -0.03em; display: block; margin-bottom: 0.75rem; }
  .fbt-tagline { font-size: 0.9375rem; line-height: 1.6; margin: 0 0 1.5rem; }
  .fbt--dark .fbt-tagline { color: rgba(255,255,255,0.45); }
  .fbt--white .fbt-tagline { color: #6b7280; }
  .fbt-links { display: flex; flex-wrap: wrap; gap: 1.25rem; }
  .fbt-link { font-size: 0.875rem; text-decoration: none; transition: color 0.15s; }
  .fbt--dark .fbt-link { color: rgba(255,255,255,0.5); }
  .fbt--dark .fbt-link:hover { color: #fff; }
  .fbt--white .fbt-link { color: #6b7280; }
  .fbt--white .fbt-link:hover { color: #0a0a0a; }
  .fbt-big-wrap { overflow: hidden; margin: -1rem -2rem 0; }
  .fbt-big { display: block; font-size: clamp(5rem, 18vw, 14rem); font-weight: 900; letter-spacing: -0.05em; line-height: 0.85; white-space: nowrap; padding: 0 1rem; }
  .fbt--dark .fbt-big { color: rgba(255,255,255,0.04); }
  .fbt--white .fbt-big { color: rgba(0,0,0,0.04); }
  .fbt-bottom { position: relative; z-index: 2; }
  .fbt--dark .fbt-bottom { border-top: 1px solid rgba(255,255,255,0.06); }
  .fbt--white .fbt-bottom { border-top: 1px solid #f1f5f9; }
  .fbt-bottom-inner { max-width: 1280px; margin: 0 auto; padding: 1.25rem 2rem; }
  .fbt-copy { font-size: 0.8125rem; margin: 0; }
  .fbt--dark .fbt-copy { color: rgba(255,255,255,0.25); }
  .fbt--white .fbt-copy { color: #9ca3af; }
</style>