FooterSplit Footer

---
/**
 * FooterSplit
 * Links- en rechts-gedeelde footer: links info, rechts contactgegevens/CTA.
 */
interface Props {
  logo: string;
  tagline?: string;
  links?: { label: string; href: string }[];
  contact?: { icon: string; label: string; href?: string }[];
  cta?: { label: string; href: string };
  copyright?: string;
}
const { logo, tagline, links = [], contact = [], cta, copyright } = Astro.props;
---
<footer class="fs2">
  <div class="fs2-inner">
    <div class="fs2-left">
      <a href="/" class="fs2-logo">{logo}</a>
      {tagline && <p class="fs2-tagline">{tagline}</p>}
      {links.length > 0 && (
        <nav class="fs2-links">
          {links.map(l => <a href={l.href} class="fs2-link">{l.label}</a>)}
        </nav>
      )}
    </div>
    <div class="fs2-right">
      {contact.map(c => (
        <div class="fs2-contact-item">
          <span class="fs2-contact-icon">{c.icon}</span>
          {c.href
            ? <a href={c.href} class="fs2-contact-label">{c.label}</a>
            : <span class="fs2-contact-label">{c.label}</span>
          }
        </div>
      ))}
      {cta && <a href={cta.href} class="fs2-cta">{cta.label}</a>}
    </div>
  </div>
  <div class="fs2-bottom">
    <div class="fs2-bottom-inner">
      <p class="fs2-copy">{copyright ?? `© ${new Date().getFullYear()} ${logo}`}</p>
    </div>
  </div>
</footer>
<style>
  .fs2 { background: #0a0a0a; }
  .fs2-inner { max-width: 1280px; margin: 0 auto; padding: 3.5rem 2rem 2.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
  .fs2-logo { font-weight: 900; font-size: 1.25rem; color: #fff; text-decoration: none; letter-spacing: -0.03em; display: block; margin-bottom: 0.875rem; }
  .fs2-tagline { font-size: 0.9375rem; color: rgba(255,255,255,0.45); line-height: 1.65; margin: 0 0 1.5rem; max-width: 320px; }
  .fs2-links { display: flex; flex-wrap: wrap; gap: 1.25rem; }
  .fs2-link { font-size: 0.875rem; color: rgba(255,255,255,0.5); text-decoration: none; transition: color 0.15s; }
  .fs2-link:hover { color: #fff; }
  .fs2-contact-item { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
  .fs2-contact-icon { font-size: 1.125rem; }
  .fs2-contact-label { font-size: 0.9375rem; color: rgba(255,255,255,0.65); text-decoration: none; }
  a.fs2-contact-label:hover { color: #fff; }
  .fs2-cta { display: inline-flex; align-items: center; margin-top: 1.25rem; padding: 0.75rem 1.75rem; background: var(--color-accent,#6366f1); color: #fff; font-weight: 600; font-size: 0.9375rem; border-radius: 0.5rem; text-decoration: none; transition: opacity 0.2s; }
  .fs2-cta:hover { opacity: 0.88; }
  .fs2-bottom { border-top: 1px solid rgba(255,255,255,0.07); }
  .fs2-bottom-inner { max-width: 1280px; margin: 0 auto; padding: 1.25rem 2rem; }
  .fs2-copy { font-size: 0.8125rem; color: rgba(255,255,255,0.25); margin: 0; }
  @media (max-width: 768px) { .fs2-inner { grid-template-columns: 1fr; gap: 2.5rem; } }
</style>