FooterRetro Footer

---
/**
 * FooterRetro
 * Retro/editorial footer: dikke bovenrand, logo + cursieve tagline, een kolom
 * uppercase-links en een mono contactregel. Lichte zandkleurige achtergrond.
 *
 * Props:
 * - logo: string
 * - tagline?: string
 * - links?: Array<{ label: string; href: string }>
 * - contact?: string                 mono contactregel
 * - copyright?: string               default "© {jaar} {logo}"
 * - established?: string             klein mono label rechtsonder
 */
interface Props {
  logo: string;
  tagline?: string;
  links?: { label: string; href: string }[];
  contact?: string;
  copyright?: string;
  established?: string;
}

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

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

<footer class="bl-section fret">
  <div class="fret-top-border"></div>
  <div class="bl-inner fret-inner">
    <div class="fret-main">
      <span class="fret-logo">{logo}</span>
      {tagline && <p class="fret-tagline">{tagline}</p>}
    </div>

    {links.length > 0 && (
      <nav class="fret-links" aria-label="Footer navigatie">
        {links.map(l => <a href={l.href} class="fret-link">{l.label}</a>)}
      </nav>
    )}

    {contact && <div class="fret-contact">{contact}</div>}
  </div>

  <div class="fret-bottom">
    <div class="bl-inner fret-bottom-inner">
      <p class="fret-copy">{copyrightText}</p>
      {established && <div class="fret-mono">{established}</div>}
    </div>
  </div>
</footer>

<style>
  .fret { padding-block: 0; background: #f5f0e8; }
  .fret-top-border { height: 4px; background: #0a0a0a; }
  .fret-inner {
    padding-block: 2.5rem;
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 3rem;
    align-items: start;
  }
  .fret-logo {
    font-weight: 900;
    font-size: 1.5rem;
    color: #0a0a0a;
    text-decoration: none;
    letter-spacing: -.04em;
    display: block;
    margin-bottom: .5rem;
  }
  .fret-tagline { font-size: 1rem; color: #4b5563; font-style: italic; margin: 0; }
  .fret-links { display: flex; flex-direction: column; gap: .375rem; }
  .fret-link {
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #0a0a0a;
    text-decoration: none;
    padding: .25rem 0;
    border-bottom: 1px solid transparent;
    transition: border-color .15s;
  }
  .fret-link:hover { border-bottom-color: #0a0a0a; }
  .fret-contact { font-family: monospace; font-size: .875rem; color: #374151; }
  .fret-bottom { border-top: 2px solid #0a0a0a; }
  .fret-bottom-inner {
    padding-block: .875rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .fret-copy { font-size: .875rem; color: #4b5563; margin: 0; }
  .fret-mono { font-family: monospace; font-size: .8125rem; letter-spacing: .12em; color: #6b7280; }

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