FooterAccordion Footer

---
/**
 * FooterAccordion — lichte footer met merk-kolom links en inklapbare
 * link-secties (details/summary) rechts. Eén copyright-band onderaan.
 *
 * Props:
 * - logo?: string
 * - logoHref?: string
 * - tagline?: string
 * - sections?: { title: string; open?: boolean; links: { label: string; href: string }[] }[]
 * - copyright?: string         (default: "© {jaar}")
 */
interface FooterSection {
  title: string;
  open?: boolean;
  links: { label: string; href: string }[];
}
interface Props {
  logo?: string;
  logoHref?: string;
  tagline?: string;
  sections?: FooterSection[];
  copyright?: string;
}

const {
  logo = 'Merk',
  logoHref = '/',
  tagline = 'Meetbare groei voor ambitieuze bedrijven.',
  sections = [
    { title: 'Diensten', open: true, links: [
      { label: 'Google Ads', href: '#' },
      { label: 'Meta Ads', href: '#' },
      { label: 'SEO', href: '#' },
      { label: 'E-mail Marketing', href: '#' },
    ] },
    { title: 'Bedrijf', links: [
      { label: 'Over ons', href: '#' },
      { label: 'Cases', href: '#' },
      { label: 'Blog', href: '#' },
      { label: 'Vacatures', href: '#' },
    ] },
    { title: 'Juridisch', links: [
      { label: 'Privacybeleid', href: '#' },
      { label: 'Voorwaarden', href: '#' },
      { label: 'Cookies', href: '#' },
    ] },
  ],
  copyright,
} = Astro.props;

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

<footer class="bl-section facc">
  <div class="bl-inner facc-inner">
    <div class="facc-brand">
      <a href={logoHref} class="facc-logo">{logo}</a>
      {tagline && <p class="facc-tagline">{tagline}</p>}
    </div>
    <div class="facc-cols">
      {sections.map(sec => (
        <details class="facc-detail" open={sec.open}>
          <summary class="facc-summary">
            {sec.title}
            <svg class="facc-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6"></path></svg>
          </summary>
          <ul class="facc-links">
            {sec.links.map(l => (
              <li><a href={l.href} class="facc-link">{l.label}</a></li>
            ))}
          </ul>
        </details>
      ))}
    </div>
  </div>
  <div class="facc-bottom">
    <div class="bl-inner facc-bottom-inner">
      <p class="facc-copy">{copyrightText}</p>
    </div>
  </div>
</footer>

<style>
.facc{background:#fff;border-top:1px solid #e5e7eb;padding-block:0}
.facc-inner{padding-block:3rem 2rem;display:grid;grid-template-columns:260px 1fr;gap:4rem}
.facc-logo{font-weight:900;font-size:1.125rem;color:#0a0a0a;text-decoration:none;letter-spacing:-.03em;display:block;margin-bottom:.75rem}
.facc-tagline{font-size:.9375rem;color:#4b5563;line-height:1.6;margin:0;max-width:220px}
.facc-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.5rem 2rem;align-content:start}
.facc-summary{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#374151;padding:.75rem 0;border-bottom:1px solid #f1f5f9;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.facc-summary::-webkit-details-marker{display:none}
.facc-detail[open] .facc-arrow{transform:rotate(180deg)}
.facc-arrow{transition:transform .2s;flex-shrink:0;color:#9ca3af}
.facc-links{list-style:none;padding:.5rem 0 0;margin:0;display:flex;flex-direction:column;gap:.375rem}
.facc-link{font-size:.9375rem;color:#4b5563;text-decoration:none;display:block;padding:.25rem 0;transition:color .15s}
.facc-link:hover{color:var(--color-accent,#6366f1)}
.facc-bottom{border-top:1px solid #f1f5f9}
.facc-bottom-inner{padding-block:1.25rem}
.facc-copy{font-size:.8125rem;color:#6b7280;margin:0}
@media(max-width:640px){.facc-inner{grid-template-columns:1fr;gap:2rem}}
</style>