FooterWave Footer

---
/**
 * FooterWave
 * Footer met SVG golfvorm bovenaan als decoratief element.
 */
interface Props {
  logo: string;
  tagline?: string;
  links?: { label: string; href: string }[];
  copyright?: string;
  bg?: string;
  waveColor?: string;
}
const { logo, tagline, links = [], copyright, bg = '#0a0a0a', waveColor = '#fff' } = Astro.props;
---
<footer class="fwav" style={`--bg:${bg};--wc:${waveColor}`}>
  <div class="fwav-wave" aria-hidden="true">
    <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={bg} />
    </svg>
  </div>
  <div class="fwav-body">
    <div class="fwav-inner">
      <a href="/" class="fwav-logo">{logo}</a>
      {tagline && <p class="fwav-tagline">{tagline}</p>}
      {links.length > 0 && (
        <nav class="fwav-links">
          {links.map(l => <a href={l.href} class="fwav-link">{l.label}</a>)}
        </nav>
      )}
      <p class="fwav-copy">{copyright ?? `© ${new Date().getFullYear()} ${logo}`}</p>
    </div>
  </div>
</footer>
<style>
  .fwav { }
  .fwav-wave { display: block; line-height: 0; background: var(--wc); }
  .fwav-wave svg { width: 100%; height: 60px; display: block; }
  .fwav-body { background: var(--bg); }
  .fwav-inner { max-width: 1280px; margin: 0 auto; padding: 1.5rem 2rem 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: -0.03em; }
  .fwav-tagline { font-size: 0.9375rem; color: rgba(255,255,255,0.5); margin: 0; }
  .fwav-links { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; }
  .fwav-link { font-size: 0.875rem; color: rgba(255,255,255,0.55); text-decoration: none; transition: color 0.15s; }
  .fwav-link:hover { color: #fff; }
  .fwav-copy { font-size: 0.8125rem; color: rgba(255,255,255,0.3); margin: 0; }
</style>