FooterGradient Footer

---
/**
 * FooterGradient — footer op een volvlak gradient-achtergrond: merk-kolom links
 * en link-kolommen rechts. Copyright-band onderaan.
 *
 * Props:
 * - logo?: string
 * - logoHref?: string
 * - tagline?: string
 * - columns?: { title: string; links: { label: string; href: string }[] }[]
 * - copyright?: string         (default: "© {jaar}")
 * - gradient?: string          CSS-achtergrond (default merk-gradient)
 */
interface FooterColumn {
  title: string;
  links: { label: string; href: string }[];
}
interface Props {
  logo?: string;
  logoHref?: string;
  tagline?: string;
  columns?: FooterColumn[];
  copyright?: string;
  gradient?: string;
}

const {
  logo = 'Merk',
  logoHref = '/',
  tagline = 'Online marketing die echt werkt.',
  columns = [
    { title: 'Diensten', links: [
      { label: 'Google Ads', href: '#' },
      { label: 'Meta Ads', href: '#' },
      { label: 'SEO', href: '#' },
    ] },
    { title: 'Bedrijf', links: [
      { label: 'Over ons', href: '#' },
      { label: 'Cases', href: '#' },
      { label: 'Contact', href: '#' },
    ] },
  ],
  copyright,
  gradient = 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
} = Astro.props;

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

<footer class="bl-section fg2" style={`--grad:${gradient}`}>
  <div class="bl-inner fg2-inner">
    <div class="fg2-brand">
      <a href={logoHref} class="fg2-logo">{logo}</a>
      {tagline && <p class="fg2-tagline">{tagline}</p>}
    </div>
    {columns.map(col => (
      <div class="fg2-col">
        <h4 class="fg2-col-title">{col.title}</h4>
        <ul class="fg2-col-links">
          {col.links.map(l => <li><a href={l.href} class="fg2-col-link">{l.label}</a></li>)}
        </ul>
      </div>
    ))}
  </div>
  <div class="fg2-bottom">
    <div class="bl-inner fg2-bottom-inner">
      <p class="fg2-copy">{copyrightText}</p>
    </div>
  </div>
</footer>

<style>
.fg2{background:var(--grad);padding-block:0}
.fg2-inner{padding-block:3.5rem 2.5rem;display:grid;grid-template-columns:minmax(220px,1.6fr) repeat(auto-fit,minmax(140px,1fr));gap:3rem}
.fg2-logo{font-weight:900;font-size:1.25rem;color:#fff;text-decoration:none;letter-spacing:-.03em;display:block;margin-bottom:.875rem}
.fg2-tagline{font-size:1rem;color:#ffffffe6;line-height:1.6;margin:0 0 1.5rem;max-width:28ch}
.fg2-col-title{font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#ffffffcc;margin:0 0 1rem}
.fg2-col-links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}
.fg2-col-link{font-size:.9375rem;color:#ffffffd9;text-decoration:none;transition:color .15s}
.fg2-col-link:hover{color:#fff}
.fg2-bottom{border-top:1px solid rgba(255,255,255,.22)}
.fg2-bottom-inner{padding-block:1.25rem}
.fg2-copy{font-size:.8125rem;color:#ffffffcc;margin:0}
@media(max-width:640px){.fg2-inner{grid-template-columns:1fr}}
</style>