FooterWave Footer

---
/**
 * FooterWave
 * Gecentreerde donkere footer met een decoratieve golf-rand bovenaan: logo,
 * korte tagline, navigatielinks en copyright, allemaal gecentreerd.
 *
 * Props:
 * - logo: string
 * - tagline?: string
 * - links?: Array<{ label: string; href: string }>
 * - copyright?: string               default "© {jaar} {logo}"
 * - waveColor?: string               kleur boven de golf (de sectie erboven)
 */
interface Props {
  logo: string;
  tagline?: string;
  links?: { label: string; href: string }[];
  copyright?: string;
  waveColor?: string;
}

const {
  logo,
  tagline,
  links = [],
  copyright,
  waveColor = '#ffffff',
} = Astro.props;

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

<footer class="bl-section fwav">
  <div class="fwav-wave" aria-hidden="true" style={`background:${waveColor}`}>
    <svg viewBox="0 0 1440 80" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0,40 C360,80 1080,0 1440,40 L1440,80 L0,80 Z" fill="#0a0a0a"></path>
    </svg>
  </div>

  <div class="fwav-body">
    <div class="bl-inner fwav-inner">
      <span class="fwav-logo">{logo}</span>
      {tagline && <p class="fwav-tagline">{tagline}</p>}

      {links.length > 0 && (
        <nav class="fwav-links" aria-label="Footer navigatie">
          {links.map(l => <a href={l.href} class="fwav-link">{l.label}</a>)}
        </nav>
      )}

      <p class="fwav-copy">{copyrightText}</p>
    </div>
  </div>
</footer>

<style>
  .fwav { padding-block: 0; background: #0a0a0a; }
  .fwav-wave { display: block; line-height: 0; }
  .fwav-wave svg { width: 100%; height: 60px; display: block; }
  .fwav-body { background: #0a0a0a; }
  .fwav-inner {
    padding-block: 1.5rem 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    text-align: center;
  }
  .fwav-logo { font-weight: 900; font-size: 1.25rem; color: #fff; text-decoration: none; letter-spacing: -.03em; }
  .fwav-tagline { font-size: 1rem; color: #aaa; margin: 0; }
  .fwav-links { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; }
  .fwav-link { font-size: 1rem; color: #aaa; text-decoration: none; transition: color .15s; }
  .fwav-link:hover { color: #fff; }
  .fwav-copy { font-size: .875rem; color: #999; margin: 0; }
</style>