FooterBigText Footer

---
/**
 * FooterBigText — footer met merk, korte tagline en navigatie bovenin, en een
 * groot, decoratief watermerk-woord onderaan. Light of dark.
 *
 * Props:
 * - logo?: string
 * - logoHref?: string
 * - tagline?: string
 * - links?: { label: string; href: string }[]
 * - bigText?: string           decoratief watermerk-woord (default = logo)
 * - copyright?: string         (default: "© {jaar}")
 * - theme?: 'light' | 'dark'   default 'dark'
 */
interface Props {
  logo?: string;
  logoHref?: string;
  tagline?: string;
  links?: { label: string; href: string }[];
  bigText?: string;
  copyright?: string;
  theme?: 'light' | 'dark';
}

const {
  logo = 'Merk',
  logoHref = '/',
  tagline = 'Online marketing bureau dat resultaten bewijst.',
  links = [
    { label: 'Diensten', href: '#' },
    { label: 'Cases', href: '#' },
    { label: 'Contact', href: '#' },
  ],
  bigText,
  copyright,
  theme = 'dark',
} = Astro.props;

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

<footer class:list={['bl-section', 'fbt', `fbt--${theme === 'dark' ? 'dark' : 'white'}`]}>
  <div class="bl-inner fbt-inner">
    <div class="fbt-top">
      <a href={logoHref} 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>
    {watermark && (
      <div class="fbt-big-wrap" aria-hidden="true">
        <span class="fbt-big">{watermark}</span>
      </div>
    )}
  </div>
  <div class="fbt-bottom">
    <div class="bl-inner fbt-bottom-inner">
      <p class="fbt-copy">{copyrightText}</p>
    </div>
  </div>
</footer>

<style>
.fbt{overflow:hidden;position:relative;padding-block:0}
.fbt--dark{background:#0a0a0a}
.fbt--white{background:#fff;border-top:1px solid #e5e7eb}
.fbt-inner{padding-block:3.5rem 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:-.03em;display:block;margin-bottom:.75rem}
.fbt-tagline{font-size:1rem;line-height:1.6;margin:0 0 1.5rem}
.fbt--dark .fbt-tagline{color:#aaa}
.fbt--white .fbt-tagline{color:#4b5563}
.fbt-links{display:flex;flex-wrap:wrap;gap:1.25rem}
.fbt-link{font-size:.9375rem;text-decoration:none;transition:color .15s}
.fbt--dark .fbt-link{color:#aaa}
.fbt--dark .fbt-link:hover{color:#fff}
.fbt--white .fbt-link{color:#4b5563}
.fbt--white .fbt-link:hover{color:#0a0a0a}
.fbt-big-wrap{overflow:hidden;margin:-1rem -1.5rem 0}
.fbt-big{display:block;font-size:clamp(5rem,18vw,12rem);font-weight:900;letter-spacing:-.05em;line-height:.85;white-space:nowrap;padding:0 1rem}
.fbt--dark .fbt-big{color:#ffffff0f}
.fbt--white .fbt-big{color:#0000000a}
.fbt-bottom{position:relative;z-index:2}
.fbt--dark .fbt-bottom{border-top:1px solid rgba(255,255,255,.08)}
.fbt--white .fbt-bottom{border-top:1px solid #f1f5f9}
.fbt-bottom-inner{padding-block:1.25rem}
.fbt-copy{font-size:.8125rem;margin:0}
.fbt--dark .fbt-copy{color:#999}
.fbt--white .fbt-copy{color:#6b7280}
</style>