FooterAccordion Footer

---
/**
 * FooterAccordion
 * Footer waarbij kolommen op mobiel inklapbaar zijn als accordions.
 */
interface Props {
  logo: string;
  tagline?: string;
  columns: { title: string; links: { label: string; href: string }[] }[];
  copyright?: string;
}
const { logo, tagline, columns, copyright } = Astro.props;
---
<footer class="facc">
  <div class="facc-inner">
    <div class="facc-brand">
      <a href="/" class="facc-logo">{logo}</a>
      {tagline && <p class="facc-tagline">{tagline}</p>}
    </div>
    <div class="facc-cols">
      {columns.map((col, i) => (
        <details class="facc-detail" open={i === 0}>
          <summary class="facc-summary">
            {col.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"/></svg>
          </summary>
          <ul class="facc-links">
            {col.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="facc-bottom-inner">
      <p class="facc-copy">{copyright ?? `© ${new Date().getFullYear()} ${logo}`}</p>
    </div>
  </div>
</footer>
<style>
  .facc { background: #fff; border-top: 1px solid #e5e7eb; }
  .facc-inner { max-width: 1280px; margin: 0 auto; padding: 3rem 2rem 2rem; display: grid; grid-template-columns: 260px 1fr; gap: 4rem; }
  .facc-brand { }
  .facc-logo { font-weight: 900; font-size: 1.125rem; color: #0a0a0a; text-decoration: none; letter-spacing: -0.03em; display: block; margin-bottom: 0.75rem; }
  .facc-tagline { font-size: 0.875rem; color: #6b7280; line-height: 1.6; margin: 0; max-width: 200px; }
  .facc-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.5rem; align-content: start; }
  .facc-detail { }
  .facc-summary { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #374151; padding: 0.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 0.2s; flex-shrink: 0; color: #9ca3af; }
  .facc-links { list-style: none; padding: 0.5rem 0 0; margin: 0; display: flex; flex-direction: column; gap: 0.375rem; }
  .facc-link { font-size: 0.875rem; color: #6b7280; text-decoration: none; display: block; padding: 0.25rem 0; transition: color 0.15s; }
  .facc-link:hover { color: var(--color-accent,#6366f1); }
  .facc-bottom { border-top: 1px solid #f1f5f9; }
  .facc-bottom-inner { max-width: 1280px; margin: 0 auto; padding: 1.25rem 2rem; }
  .facc-copy { font-size: 0.8125rem; color: #9ca3af; margin: 0; }
  @media (max-width: 768px) { .facc-inner { grid-template-columns: 1fr; gap: 2rem; } }
</style>