<script setup lang="ts">
import { RouterLink } from 'vue-router'
import { socialLinks, type SocialLinkLabel } from '@/content/socialLinks'

interface FooterLink {
  label: string
  to: string
}

const signatureImage = {
  src: '/assets/signature.png',
  alt: "R' Yehoshua Gerzi",
}

const socialGlyphs: Record<SocialLinkLabel, string> = {
  YouTube: '▶',
  Spotify: '♫',
}

const footerSocialLinks = socialLinks.map((socialLink) => {
  return {
    label: socialLink.label,
    href: socialLink.href,
    glyph: socialGlyphs[socialLink.label],
  }
})

const footerLinkColumns: FooterLink[][] = [
  [
    { label: 'Torah Media', to: '/media' },
    { label: 'About', to: '/about' },
  ],
  [
    { label: 'Donate', to: '/donate' },
    { label: 'Contact', to: '/contact' },
  ],
]
</script>

<template>
  <footer class="site-footer" data-cy="footer">
    <div class="site-footer__inner">
      <div class="site-footer__brand">
        <img v-bind="signatureImage" class="site-footer__signature" />
        <div class="site-footer__social">
          <a
            v-for="socialLink in footerSocialLinks"
            :key="socialLink.label"
            :href="socialLink.href"
            class="site-footer__social-link"
            :aria-label="socialLink.label"
            target="_blank"
            rel="noopener"
          >
            {{ socialLink.glyph }}
          </a>
        </div>
      </div>
      <nav class="site-footer__links" aria-label="Footer navigation">
        <ul
          v-for="(footerLinkColumn, footerLinkColumnIndex) in footerLinkColumns"
          :key="footerLinkColumnIndex"
          class="site-footer__link-column"
        >
          <li v-for="footerLink in footerLinkColumn" :key="footerLink.to">
            <RouterLink :to="footerLink.to">
              {{ footerLink.label }}
            </RouterLink>
          </li>
        </ul>
      </nav>
    </div>
    <p class="site-footer__copyright">&copy; Rabbi Gerzi 2025</p>
  </footer>
</template>

<style scoped>
.site-footer {
  padding: 4rem 2rem 2rem;
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  max-width: 1100px;
  margin: 0 auto 2rem;
  gap: 2rem;
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.site-footer__signature {
  width: auto;
  height: 40px;
}

.site-footer__social {
  display: flex;
  gap: 0.75rem;
}

.site-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: 6px;
}

.site-footer__social-link:hover {
  background: var(--color-cream);
}

.site-footer__links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.site-footer__link-column {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  gap: 0.6rem;
  list-style: none;
}

.site-footer__link-column a {
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 0.95rem;
}

.site-footer__link-column a:hover {
  color: var(--color-slate);
}

.site-footer__copyright {
  margin: 0;
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  text-align: center;
}

@media (max-width: 860px) {
  .site-footer__inner,
  .site-footer__links {
    grid-template-columns: 1fr;
  }
}
</style>
