FooterEditorial Footer

---
/**
 * FooterEditorial — redactionele footer: zware regel bovenaan, merk + uitgave-
 * regel, dunne scheidslijn en link-kolommen. Lichte, papier-achtige stijl.
 *
 * Props:
 * - logo?: string
 * - logoHref?: string
 * - tagline?: string
 * - issue?: string             redactie-regel (bijv. "Editie #12")
 * - columns?: { title: string; links: { label: string; href: string }[] }[]
 * - copyright?: string         (default: "© {jaar}")
 */
interface FooterColumn {
  title: string;
  links: { label: string; href: string }[];
}
interface Props {
  logo?: string;
  logoHref?: string;
  tagline?: string;
  issue?: string;
  columns?: FooterColumn[];
  copyright?: string;
}

const {
  logo = 'Merk',
  logoHref = '/',
  tagline = 'Online Marketing Bureau, Amsterdam',
  issue = 'Editie #12',
  columns = [
    { title: 'Diensten', links: [
      { label: 'Google Ads', href: '#' },
      { label: 'Meta Ads', href: '#' },
      { label: 'SEO', href: '#' },
      { label: 'Analytics', href: '#' },
    ] },
    { title: 'Bureau', links: [
      { label: 'Over ons', href: '#' },
      { label: 'Cases', href: '#' },
      { label: 'Blog', href: '#' },
    ] },
    { title: 'Juridisch', links: [
      { label: 'Privacybeleid', href: '#' },
      { label: 'Voorwaarden', href: '#' },
    ] },
  ],
  copyright,
} = Astro.props;

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

<footer class="bl-section fed">
  <div class="fed-rule"></div>
  <div class="bl-inner fed-inner">
    <div class="fed-top">
      <div class="fed-brand">
        <a href={logoHref} class="fed-logo">{logo}</a>
        {tagline && <p class="fed-tagline">{tagline}</p>}
      </div>
      {issue && <span class="fed-issue">{issue}</span>}
    </div>
    <div class="fed-rule-thin"></div>
    <div class="fed-cols">
      {columns.map(col => (
        <div class="fed-col">
          <h4 class="fed-col-title">{col.title}</h4>
          <ul class="fed-col-links">
            {col.links.map(l => <li><a href={l.href} class="fed-col-link">{l.label}</a></li>)}
          </ul>
        </div>
      ))}
    </div>
  </div>
  <div class="fed-bottom">
    <div class="bl-inner fed-bottom-inner">
      <p class="fed-copy">{copyrightText}</p>
    </div>
  </div>
</footer>

<style>
.fed{background:#fafaf8;padding-block:0}
.fed-rule{height:3px;background:#0a0a0a}
.fed-inner{padding-block:3rem 2rem}
.fed-top{display:flex;align-items:flex-start;justify-content:space-between;gap:2rem;margin-bottom:2rem}
.fed-logo{font-size:1.75rem;font-weight:900;color:#0a0a0a;text-decoration:none;letter-spacing:-.04em;display:block;line-height:1}
.fed-tagline{font-size:.875rem;color:#4b5563;margin:.375rem 0 0;letter-spacing:.04em}
.fed-issue{font-size:.75rem;color:#6b7280;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.fed-rule-thin{height:1px;background:#e5e7eb;margin-bottom:2rem}
.fed-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:2rem}
.fed-col-title{font-size:.6875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#6b7280;margin:0 0 1rem}
.fed-col-links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}
.fed-col-link{font-size:.9375rem;color:#374151;text-decoration:none;transition:color .15s}
.fed-col-link:hover{color:#0a0a0a}
.fed-bottom{border-top:1px solid #e5e7eb}
.fed-bottom-inner{padding-block:1.25rem}
.fed-copy{font-size:.8125rem;color:#6b7280;margin:0}
</style>