FooterRetro Footer

---
/**
 * FooterRetro
 * Retro/brutalist stijl footer met dikke borders en mono-typografie.
 */
interface Props {
  logo: string;
  tagline?: string;
  links?: { label: string; href: string }[];
  contact?: string;
  copyright?: string;
}
const { logo, tagline, links = [], contact, copyright } = Astro.props;
---
<footer class="fret">
  <div class="fret-top-border"></div>
  <div class="fret-inner">
    <div class="fret-main">
      <a href="/" class="fret-logo">{logo}</a>
      {tagline && <p class="fret-tagline">{tagline}</p>}
    </div>
    <nav class="fret-links">
      {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="fret-bottom-inner">
      <p class="fret-copy">{copyright ?? `© ${new Date().getFullYear()} ${logo}`}</p>
      <div class="fret-mono">EST. 2024</div>
    </div>
  </div>
</footer>
<style>
  .fret { background: #f5f0e8; }
  .fret-top-border { height: 4px; background: #0a0a0a; }
  .fret-inner { max-width: 1280px; margin: 0 auto; padding: 2.5rem 2rem; 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: -0.04em; display: block; margin-bottom: 0.5rem; }
  .fret-tagline { font-size: 0.875rem; color: #6b7280; font-style: italic; margin: 0; }
  .fret-links { display: flex; flex-direction: column; gap: 0.375rem; }
  .fret-link { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #0a0a0a; text-decoration: none; padding: 0.25rem 0; border-bottom: 1px solid transparent; transition: border-color 0.15s; }
  .fret-link:hover { border-bottom-color: #0a0a0a; }
  .fret-contact { font-family: monospace; font-size: 0.8125rem; color: #374151; }
  .fret-bottom { border-top: 2px solid #0a0a0a; }
  .fret-bottom-inner { max-width: 1280px; margin: 0 auto; padding: 0.875rem 2rem; display: flex; justify-content: space-between; align-items: center; }
  .fret-copy { font-size: 0.8125rem; color: #6b7280; margin: 0; }
  .fret-mono { font-family: monospace; font-size: 0.75rem; letter-spacing: 0.12em; color: #9ca3af; }
  @media (max-width: 768px) { .fret-inner { grid-template-columns: 1fr; gap: 1.5rem; } }
</style>