<script setup lang="ts">
import { useSeoMeta } from '#imports'

definePageMeta({
  layout: 'docs'
})

useSeoMeta({
  title: 'Estel Docs',
  description: '简约而强大的文档系统，为技术分享而生',
  ogTitle: 'Estel Docs',
  ogDescription: '简约而强大的文档系统，为技术分享而生'
})
</script>

<template>
  <div class="min-h-screen bg-gradient-to-br from-blue-50 via-white to-indigo-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
    <!-- Hero 区域 -->
    <div class="max-w-6xl mx-auto px-4 py-20">
      <!-- 主要内容 -->
      <div class="text-center mb-16">
        <h1 class="text-5xl md:text-7xl font-bold text-gray-900 dark:text-white mb-6">
          Estel Hub
        </h1>
        <p class="text-xl md:text-2xl text-gray-600 dark:text-gray-300 mb-8 max-w-3xl mx-auto">
          简约而强大的文档系统,衍生而出Blog系统,为技术分享而生
        </p>
        <p class="text-lg text-gray-500 dark:text-gray-400 mb-12 max-w-2xl mx-auto">
          基于 Nuxt 4 构建，支持 Markdown 文档管理和博客发布，提供完整的现代化内容管理解决方案
        </p>
      </div>

      <!-- 导航卡片 -->
      <div class="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
        <!-- 文档系统 -->
        <NuxtLink
          to="/docs"
          class="group bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-200 dark:border-gray-700"
        >
          <div class="text-center">
            <div class="w-16 h-16 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform duration-300">
              <UIcon
                name="lucide-book-open"
                class="text-3xl text-blue-600 dark:text-blue-400"
              />
            </div>
            <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">
              文档系统
            </h2>
            <p class="text-gray-600 dark:text-gray-300 mb-6">
              技术文档、API 文档、使用指南，一切尽在掌握
            </p>
            <div class="flex items-center justify-center text-blue-600 dark:text-blue-400 group-hover:text-blue-700 dark:group-hover:text-blue-300 transition-colors">
              <span class="mr-2">开始阅读</span>
              <UIcon
                name="lucide-arrow-right"
                size="20"
              />
            </div>
          </div>
        </NuxtLink>

        <!-- 博客系统 -->
        <NuxtLink
          to="/blog"
          class="group bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-200 dark:border-gray-700"
        >
          <div class="text-center">
            <div class="w-16 h-16 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform duration-300">
              <UIcon
                name="lucide-pen-tool"
                class="text-3xl text-green-600 dark:text-green-400"
              />
            </div>
            <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">
              博客系统
            </h2>
            <p class="text-gray-600 dark:text-gray-300 mb-6">
              技术分享、心得体会、生活感悟，记录每一个精彩瞬间
            </p>
            <div class="flex items-center justify-center text-green-600 dark:text-green-400 group-hover:text-green-700 dark:group-hover:text-green-300 transition-colors">
              <span class="mr-2">开始阅读</span>
              <UIcon
                name="lucide-arrow-right"
                size="20"
              />
            </div>
          </div>
        </NuxtLink>
      </div>

      <!-- 底部信息 -->
      <div class="text-center mt-16">
        <div class="flex items-center justify-center gap-8 text-sm text-gray-500 dark:text-gray-400">
          <div class="flex items-center gap-2">
            <UIcon
              name="lucide-github"
              size="16"
            />
            <a
              href="https://github.com/estel-li/estel-docs"
              target="_blank"
              class="hover:text-gray-700 dark:hover:text-gray-200 transition-colors"
            >
              GitHub
            </a>
          </div>
          <div class="flex items-center gap-2">
            <UIcon
              name="lucide-globe"
              size="16"
            />
            <a
              href="https://lijue.me"
              target="_blank"
              class="hover:text-gray-700 dark:hover:text-gray-200 transition-colors"
            >
              个人博客
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
