<script setup lang="ts">
import { Mail, Send } from 'lucide-vue-next'
import { useColorMode } from '@vueuse/core'
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
const mode = useColorMode()

const links = computed(() => [
  {
    name: t('nav.docs'),
    url: '/docs',
  },
  {
    name: t('nav.pricing'),
    url: '/pricing',
  },
  {
    name: t('footer.aboutUs'),
    url: '#',
  },
  {
    name: t('footer.contactUs'),
    url: '#',
  },
])
</script>

<template>
  <footer class="border-t bg-muted/30 py-8">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        <div>
          <div class="flex items-center space-x-2 mb-4">
            <UiAvatar class="h-8 w-8">
              <UiAvatarImage :src="`${mode === 'dark' ? '/logo.svg' : '/logo-black.svg'}`" alt="Logo" />
            </UiAvatar>
            <span class="font-bold">{{ t('footer.brand') }}</span>
          </div>
          <p class="text-sm text-muted-foreground">
            {{ t('footer.description') }}
          </p>
        </div>

        <div>
          <h3 class="font-semibold mb-4">
            {{ t('footer.quickLinks') }}
          </h3>
          <ul class="space-y-2">
            <li v-for="link in links" :key="link.name">
              <router-link
                :to="link.url"
                class="text-sm text-muted-foreground hover:text-foreground transition-colors"
              >
                {{ link.name }}
              </router-link>
            </li>
          </ul>
        </div>

        <div>
          <h3 class="font-semibold mb-4">
            {{ t('footer.contactUs') }}
          </h3>
          <ul class="space-y-2 text-sm text-muted-foreground">
            <li class="flex items-center">
              <Mail class="h-4 w-4 mr-2" />
              admin@weishouquan.com
            </li>
            <li class="flex items-center">
              <Send class="h-4 w-4 mr-2" />
              weishouquan
            </li>
          </ul>
        </div>
      </div>

      <div class="mt-8 pt-8 border-t flex flex-col items-center">
        <p class="text-sm text-muted-foreground text-center">
          © {{ new Date().getFullYear() }} {{ t('footer.brand') }}
        </p>
        <div class="flex items-center space-x-4 mt-4">
          <router-link
            to="/privacy"
            class="text-sm text-muted-foreground hover:text-foreground transition-colors"
          >
            {{ t('footer.privacy') }}
          </router-link>
          <router-link
            to="/terms"
            class="text-sm text-muted-foreground hover:text-foreground transition-colors"
          >
            {{ t('footer.terms') }}
          </router-link>
        </div>
      </div>
    </div>
  </footer>
</template>
