FooterCta Footer

---
/**
 * FooterCta — donkere CTA-band bovenaan, daaronder links-kolommen en copyright.
 *
 * Props:
 * - headline?: string          (HTML toegestaan, set:html)
 * - sub?: string
 * - ctaPrimary?: { label: string; href: string }
 * - ctaSecondary?: { label: string; href: string }
 * - logo?: string
 * - logoHref?: string
 * - columns?: { title: string; links: { label: string; href: string }[] }[]
 * - copyright?: string         (default: "© {jaar}")
 */
interface FooterColumn {
  title: string;
  links: { label: string; href: string }[];
}
interface Props {
  headline?: string;
  sub?: string;
  ctaPrimary?: { label: string; href: string };
  ctaSecondary?: { label: string; href: string };
  logo?: string;
  logoHref?: string;
  columns?: FooterColumn[];
  copyright?: string;
}

const {
  headline = 'Klaar om te groeien?',
  sub = 'Plan een gratis strategiegesprek en ontdek hoe wij jouw marketing naar het volgende niveau brengen.',
  ctaPrimary = { label: 'Plan gratis gesprek', href: '#' },
  ctaSecondary = { label: 'Bekijk onze cases →', href: '#' },
  logo = 'Merk',
  logoHref = '/',
  columns = [
    { title: 'Diensten', links: [
      { label: 'Google Ads', href: '#' },
      { label: 'Meta Ads', href: '#' },
      { label: 'SEO', href: '#' },
    ] },
    { title: 'Bedrijf', links: [
      { label: 'Over ons', href: '#' },
      { label: 'Blog', href: '#' },
      { label: 'Contact', href: '#' },
    ] },
  ],
  copyright,
} = Astro.props;

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

<footer class="bl-section fct">
  <div class="fct-cta">
    <div class="bl-inner bl-inner--narrow fct-cta-inner">
      <h2 class="fct-cta-headline" set:html={headline}></h2>
      {sub && <p class="fct-cta-sub">{sub}</p>}
      <div class="fct-cta-btns">
        {ctaPrimary && <a href={ctaPrimary.href} class="fct-btn-primary">{ctaPrimary.label}</a>}
        {ctaSecondary && <a href={ctaSecondary.href} class="fct-btn-secondary">{ctaSecondary.label}</a>}
      </div>
    </div>
  </div>
  <div class="fct-links">
    <div class="bl-inner fct-links-inner">
      <a href={logoHref} class="fct-logo">{logo}</a>
      {columns.map(col => (
        <div class="fct-col">
          <h4 class="fct-col-title">{col.title}</h4>
          <ul class="fct-col-links">
            {col.links.map(l => (
              <li><a href={l.href} class="fct-col-link">{l.label}</a></li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  </div>
  <div class="fct-bottom-band">
    <div class="bl-inner fct-bottom-inner">
      <p class="fct-copy">{copyrightText}</p>
    </div>
  </div>
</footer>

<style>
.fct{background:#fff;padding-block:0}
.fct-cta{background:#0a0a0a;padding-block:5rem}
.fct-cta-inner{text-align:center}
.fct-cta-headline{font-size:clamp(1.75rem,4vw,3rem);font-weight:900;color:#fff;letter-spacing:-.04em;margin:0 0 1rem;line-height:1.1}
.fct-cta-sub{font-size:1.0625rem;color:#aaa;line-height:1.65;margin:0 0 2.5rem}
.fct-cta-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.fct-btn-primary{padding:.875rem 2rem;background:var(--color-accent,#6366f1);color:#fff;font-weight:700;font-size:.9375rem;border-radius:.5rem;text-decoration:none;transition:opacity .2s}
.fct-btn-primary:hover{opacity:.88}
.fct-btn-secondary{padding:.875rem 2rem;border:1.5px solid rgba(255,255,255,.2);color:#e8e8e8;font-weight:600;font-size:.9375rem;border-radius:.5rem;text-decoration:none;transition:border-color .2s,color .2s}
.fct-btn-secondary:hover{border-color:#ffffff80;color:#fff}
.fct-links{border-top:1px solid #e5e7eb}
.fct-links-inner{padding-block:3rem 2rem;display:grid;grid-template-columns:1fr repeat(auto-fit,minmax(140px,1fr));gap:2.5rem}
.fct-logo{font-weight:900;font-size:1.125rem;color:#0a0a0a;text-decoration:none;letter-spacing:-.03em;align-self:start}
.fct-col-title{font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#9ca3af;margin:0 0 .875rem}
.fct-col-links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}
.fct-col-link{font-size:.875rem;color:#6b7280;text-decoration:none;transition:color .15s}
.fct-col-link:hover{color:#0a0a0a}
.fct-bottom-inner{padding-block:1rem 1.5rem;border-top:1px solid #f1f5f9}
.fct-copy{font-size:.8125rem;color:#9ca3af;margin:0}
</style>