<template>
  <footer
    class="z-10 mt-8 border-t-2 border-t-primary-300 bg-gray-50 py-8 md:py-10 transition-all duration-250 ease-in-out"
  >
    <div class="page-footer-grid container mx-auto grid gap-8">
      <PageFooterLogo :is-sticky="false" class="grid-area-logo" />
      <address v-if="globalConfig.address" class="grid-area-address not-italic">
        <strong class="block font-medium mb-2">
          {{ address?.organization }}
        </strong>
        <div>{{ address?.addressLine1 }}</div>
        <div>{{ address?.addressLine2 }}</div>
        <div>
          <span>{{ address?.postalCode }},&nbsp;</span>
          <span>{{ address?.locality }}</span>
        </div>
      </address>

      <div
        class="grid-area-social flex flex-wrap items-start md:justify-end gap-2 md:gap-4"
      >
        <VuepalLink
          v-for="link in footerSocialMediaLinks"
          :key="link.id"
          :to="link.href"
          target="_blank"
          :aria-label="link.label"
          class="flex items-center justify-center rounded-full text-white bg-primary-500 size-10 hover:bg-primary-400 hover:text-white transition-all ease-in-out duration-250"
        >
          <SpriteSymbol
            :name="getIconName(link.href)"
            :alt="link.label"
            class="size-6 flex scale-75"
          />
        </VuepalLink>
      </div>

      <div class="grid-area-copyright self-end opacity-60">
        &copy; {{ copyright }}
      </div>

      <ul
        class="grid-area-links flex flex-wrap gap-4 md:gap-10 md:place-self-end"
      >
        <li v-for="(link, i) in footerMenuLinks" :key="`global_${i}`">
          <VuepalLink :to="link.href" class="opacity-60 hover:opacity-100">
            {{ link.label }}
          </VuepalLink>
        </li>
      </ul>
      <ScrollTopButton class="grid-area-bottom place-self-end" />
    </div>
  </footer>
</template>

<script lang="ts" setup>
import type { NuxtSvgSpriteSymbol } from '#nuxt-svg-icon-sprite/runtime'

const { globalConfig, footerMenuLinks, footerSocialMediaLinks } = useInitData()

const address = computed(() => globalConfig.value?.address ?? null)

const copyright = computed(() => {
  const year = new Date().getFullYear().toString()
  return `${year} ${address.value?.organization ?? ''}`
})

// Determine the social icon name based on the URL.
const icons = {
  twitter: 'twitter',
  facebook: 'facebook',
  linkedin: 'linkedin',
  tiktok: 'tiktok',
  instagram: 'instagram',
  youtube: 'youtube',
  external: 'external',
} as const

function getIconName(url = ''): NuxtSvgSpriteSymbol {
  const u = url.toLowerCase()
  const name = u.includes('twitter.com')
    ? icons.twitter
    : u.includes('facebook.com')
      ? icons.facebook
      : u.includes('linkedin.com')
        ? icons.linkedin
        : u.includes('tiktok.com')
          ? icons.tiktok
          : u.includes('instagram.com')
            ? icons.instagram
            : u.includes('youtube.com')
              ? icons.youtube
              : icons.external

  return name
}
</script>

<style lang="postcss">
.page-footer-grid {
  display: grid;
  grid-template-areas:
    'logo'
    'address'
    'social'
    'links'
    'copyright'
    'search'
    'bottom';
  grid-template-columns: 1fr;

  @screen md {
    grid-template:
      'logo social' auto
      'address social' auto
      'copyright links' auto
      'global global' auto
      'search bottom' auto
      / 1fr auto;
  }
}

.grid-area-logo {
  grid-area: logo;
}
.grid-area-address {
  grid-area: address;
}
.grid-area-social {
  grid-area: social;
}
.grid-area-links {
  grid-area: links;
}
.grid-area-copyright {
  grid-area: copyright;
}
.grid-area-search {
  grid-area: search;
}
.grid-area-bottom {
  grid-area: bottom;
}
</style>
