<template>
  <div class="max-w-4xl mx-auto">
    <!-- 个人信息卡片 -->
    <div class="bg-white rounded-2xl shadow-sm p-8 mb-8">
      <div class="flex flex-col md:flex-row items-center gap-8">
        <div class="w-48 h-48 rounded-full overflow-hidden">
          <img src="/avatar.jpg" alt="头像" class="w-full h-full object-cover" 
               onerror="this.src='https://api.dicebear.com/7.x/adventurer/svg?seed=custom'"/>
        </div>
        <div class="flex-1 text-center md:text-left">
          <h1 class="text-3xl font-bold mb-4">ZiBright</h1>
          <div class="text-lg text-gray-600 mb-6">这里是我的博客</div>
          <div class="flex justify-center md:justify-start gap-4">
            <NuxtLink to="/about" class="inline-flex items-center gap-2 px-4 py-2 bg-gray-100 rounded-full hover:bg-gray-200 transition-colors">
              <span>关于我</span>
            </NuxtLink>
            <NuxtLink to="/friends" class="inline-flex items-center gap-2 px-4 py-2 bg-gray-100 rounded-full hover:bg-gray-200 transition-colors">
              <span>朋友们</span>
            </NuxtLink>
          </div>
        </div>
      </div>
    </div>

    <!-- 最新文章 -->
    <div class="mb-8">
      <div class="flex justify-between items-center mb-6">
        <h2 class="text-2xl font-bold">最新文章</h2>
        <NuxtLink to="/articles" class="text-gray-600 hover:text-gray-900">
          查看全部 →
        </NuxtLink>
      </div>
      <div class="grid gap-6">
        <ContentList path="/" :query="{ sort: [{ date: -1 }] }" v-slot="{ list }">
          <div v-for="article in list.slice(0, 5)" :key="article._path" 
               class="bg-white rounded-lg shadow-sm p-6 hover:shadow-md transition-shadow">
            <NuxtLink :to="article._path" class="block group">
              <div class="flex justify-between items-start gap-4">
                <div>
                  <h3 class="text-xl font-bold mb-2 group-hover:text-blue-600 transition-colors">
                    {{ article.title }}
                  </h3>
                  <p class="text-gray-600 mb-4 line-clamp-2">{{ article.description }}</p>
                  <div class="flex items-center text-sm text-gray-500 gap-4">
                    <span>
                      {{ new Date(article.date).toLocaleDateString('zh-CN', { 
                        year: 'numeric',
                        month: 'long',
                        day: 'numeric'
                      }) }}
                    </span>
                    <span v-if="article.tags" class="flex gap-2">
                      <span v-for="tag in article.tags" :key="tag" 
                            class="px-2 py-1 bg-gray-100 rounded-full text-xs">
                        {{ tag }}
                      </span>
                    </span>
                  </div>
                </div>
                <div v-if="article.cover" class="flex-shrink-0">
                  <img :src="article.cover" :alt="article.title" 
                       class="w-32 h-24 object-cover rounded-lg" />
                </div>
              </div>
            </NuxtLink>
          </div>
        </ContentList>
      </div>
    </div>
  </div>
</template>
