<script setup lang="ts">
import { Icon } from '@iconify/vue'
import { siteConfig } from '~/config/site'

useSeoMeta({
  title: `关于 - ${siteConfig.siteName}`,
  description: `关于 ${siteConfig.siteName} 的介绍`,
})
</script>

<template>
  <div class="container mx-auto max-w-3xl px-4 py-12">

    <div class="mb-12 text-center anim-fade-in-up">
      <h1 class="mb-4 text-4xl font-bold">关于</h1>
      <p class="text-lg text-muted-foreground">关于这个站点和我</p>
    </div>

    <!-- 站点介绍 -->
    <div class="mb-8 anim-fade-in-up anim-delay-1">
      <div class="rounded-xl border p-6" style="border-color: var(--color-border); background-color: var(--color-bg-card);">
        <h2 class="mb-4 text-xl font-semibold">关于本站</h2>
        <div class="prose">
          <p>欢迎来到 <strong>{{ siteConfig.siteName }}</strong>！这是一个专注于技术分享与实践的个人博客。</p>
          <p>在这里，我会记录一些技术学习笔记、踩坑经验和项目实践，希望能帮到同样在学习路上的你。</p>
          <p>本站基于 <a href="https://nuxt.com" target="_blank" rel="noopener noreferrer">Nuxt 3</a> 构建，使用 <a href="https://tailwindcss.com" target="_blank" rel="noopener noreferrer">Tailwind CSS</a> 作为样式方案，UI 参考了 <a href="https://2x.nz" target="_blank" rel="noopener noreferrer">二叉树树</a> 的设计，感谢大佬的开源精神！</p>
        </div>
      </div>
    </div>

    <!-- 技术栈 -->
    <div class="mb-8 anim-fade-in-up anim-delay-2">
      <div class="rounded-xl border p-6" style="border-color: var(--color-border); background-color: var(--color-bg-card);">
        <h2 class="mb-4 text-xl font-semibold">技术栈</h2>
        <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
          <div v-for="tech in [
            { name: 'Nuxt 3', icon: 'simple-icons:nuxtdotjs', color: '#00DC82' },
            { name: 'Vue 3', icon: 'simple-icons:vuedotjs', color: '#4FC08D' },
            { name: 'TypeScript', icon: 'simple-icons:typescript', color: '#3178C6' },
            { name: 'Tailwind CSS', icon: 'simple-icons:tailwindcss', color: '#06B6D4' },
            { name: 'Nuxt Content', icon: 'mdi:file-document-outline', color: '#00DC82' },
            { name: 'Giscus', icon: 'simple-icons:github', color: '#333' },
            { name: 'Golang', icon: 'simple-icons:go', color: '#00ADD8' },
            { name: 'Erlang', icon: 'simple-icons:erlang', color: '#A90533' },
          ]" :key="tech.name"
            class="flex items-center gap-2 rounded-lg p-3 transition-colors"
            style="background: var(--color-bg-hover);"
          >
            <img
              :src="`https://api.iconify.design/${tech.icon}.svg?color=${encodeURIComponent(tech.color)}`"
              :alt="tech.name"
              class="w-5 h-5"
            />
            <span class="text-sm font-medium">{{ tech.name }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 联系方式 -->
    <div class="mb-8 anim-fade-in-up anim-delay-3">
      <div class="rounded-xl border p-6" style="border-color: var(--color-border); background-color: var(--color-bg-card);">
        <h2 class="mb-4 text-xl font-semibold">联系我</h2>
        <p class="mb-4 text-sm text-muted-foreground">如果你有任何问题或建议，欢迎通过以下方式联系我：</p>
        <div class="flex flex-wrap gap-3">
          <a
            v-for="link in siteConfig.socialLinks"
            :key="link.name"
            :href="link.url"
            target="_blank"
            rel="noopener noreferrer"
            class="btn-pill"
          >
            <img
              :src="`https://api.iconify.design/${link.icon}.svg?color=${encodeURIComponent(link.color || 'currentColor')}`"
              :alt="link.name"
              class="w-5 h-5"
            />
            <span>{{ link.name }}</span>
          </a>
        </div>
      </div>
    </div>

    <!-- 免责声明 -->
    <div class="anim-fade-in-up anim-delay-4">
      <div class="rounded-xl border p-6" style="border-color: var(--color-border); background-color: var(--color-bg-card);">
        <h2 class="mb-4 text-xl font-semibold">免责声明</h2>
        <div class="prose">
          <p>本站所有文章仅代表个人观点，与任何组织或公司无关。</p>
          <p>本站部分内容来源于网络，如有侵权请联系删除。</p>
          <p>本站提供的资源仅供参考学习，请于下载后 24 小时内删除。</p>
        </div>
      </div>
    </div>

  </div>
</template>
