FooterSplit Footer

---
/**
 * FooterSplit
 * Donkere tweekoloms-footer: links brand + tagline + links, rechts contact-items
 * en een CTA-knop.
 *
 * Props:
 * - logo: string
 * - tagline?: string
 * - links?: Array<{ label: string; href: string }>
 * - contact?: Array<{ label: string; href?: string; icon?: string }>
 * - cta?: { label: string; href: string }
 * - copyright?: string               default "© {jaar} {logo}"
 */
interface Props {
  logo: string;
  tagline?: string;
  links?: { label: string; href: string }[];
  contact?: { label: string; href?: string; icon?: string }[];
  cta?: { label: string; href: string };
  copyright?: string;
}

const {
  logo,
  tagline,
  links = [],
  contact = [],
  cta,
  copyright,
} = Astro.props;

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

<footer class="bl-section fs2">
  <div class="bl-inner fs2-inner">
    <div class="fs2-left">
      <span class="fs2-logo">{logo}</span>
      {tagline && <p class="fs2-tagline">{tagline}</p>}

      {links.length > 0 && (
        <nav class="fs2-links" aria-label="Footer navigatie">
          {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">
          {c.icon && <span class="fs2-contact-icon" aria-hidden="true">{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="bl-inner fs2-bottom-inner">
      <p class="fs2-copy">{copyrightText}</p>
    </div>
  </div>
</footer>

<style>
  .fs2 { padding-block: 0; background: #0a0a0a; }
  .fs2-inner {
    padding-block: 3.5rem 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: -.03em;
    display: block;
    margin-bottom: .875rem;
  }
  .fs2-tagline { font-size: 1rem; color: #aaa; 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: 1rem; color: #aaa; text-decoration: none; transition: color .15s; }
  .fs2-link:hover { color: #fff; }
  .fs2-contact-item { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
  .fs2-contact-icon { font-size: 1.125rem; color: var(--color-accent, #6366f1); }
  .fs2-contact-label { font-size: 1rem; color: #e8e8e8; text-decoration: none; }
  a.fs2-contact-label:hover { color: #fff; }
  .fs2-cta {
    display: inline-flex;
    align-items: center;
    margin-top: 1.25rem;
    padding: .75rem 1.75rem;
    background: var(--color-accent, #6366f1);
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
    border-radius: .5rem;
    text-decoration: none;
    transition: opacity .2s;
  }
  .fs2-cta:hover { opacity: .88; }
  .fs2-bottom { border-top: 1px solid rgba(255,255,255,.1); }
  .fs2-bottom-inner { padding-block: 1.25rem; }
  .fs2-copy { font-size: .875rem; color: #999; margin: 0; }

  @media (max-width: 720px) {
    .fs2-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  }
</style>