<template>
  <a-layout-footer class="footer">
    <div class="mx-auto max-w-screen-xl px-4 py-10">
      <a-row :gutter="[24, 24]">
        <a-col :xs="24" :md="8">
          <div class="text-base font-semibold text-white">关注我们</div>
          <div class="mt-4 flex items-center gap-4">
            <a-avatar shape="square" :size="96" />
            <div class="text-sm leading-6 text-gray-400">
              公众号/小程序
              <br />
              获取最新动态
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :md="8">
          <div class="text-base font-semibold text-white">快速入口</div>
          <div class="mt-4 grid gap-2 text-sm text-gray-400">
            <NuxtLink class="hover:text-white" to="/products">经营范围</NuxtLink>
            <NuxtLink class="hover:text-white" to="/contact">联系我们</NuxtLink>
          </div>
        </a-col>

        <a-col :xs="24" :md="8">
          <div class="text-base font-semibold text-white">备案信息</div>
          <div class="mt-4 text-sm text-gray-400">{{ icpText }}</div>
        </a-col>
      </a-row>

      <div
        class="mt-10 flex flex-col gap-2 border-t border-white/10 pt-6 text-xs text-gray-500 md:flex-row md:items-center md:justify-between"
      >
        <div>© {{ year }} {{ siteName }}. All rights reserved.</div>
        <div class="tools flex items-center opacity-80 hover:opacity-90 text-gray-100 text-xs">
          Powered by
          <a
            rel="nofollow"
            href="https://glt.websoft.top"
            target="_blank"
            class="text-white visited:text-white hover:text-gray-200 ml-1"
          >
            云·企业官网
          </a>
        </div>
      </div>
    </div>
  </a-layout-footer>
</template>

<script setup lang="ts">
const { data: siteInfo } = useSiteInfo()
const siteName = computed(() => String((siteInfo.value as any)?.data?.websiteName || '桂乐淘'))
const icpText = computed(() => {
  const icp = (siteInfo.value as any)?.data?.icpNo
  return icp ? `备案号：${icp}` : '备案号：'
})
const year = new Date().getFullYear()
</script>

<style scoped>
.footer {
  background: #000;
  padding: 0;
}
</style>
