---
import { getCollection } from 'astro:content';
import BaseLayout from '../layouts/BaseLayout.astro';

const docs = await getCollection('docs');
---
<BaseLayout title="文档中心 | Home">
  <div class="max-w-5xl mx-auto">
    <div class="mb-12">
      <h1 class="text-4xl font-extrabold tracking-tight text-gray-900 dark:text-white mb-4">🚀 知识库主页</h1>
      <p class="text-lg text-gray-600 dark:text-gray-400">请从左侧导航栏或下方卡片中选择文档开始阅读。</p>
    </div>
    
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      {docs.map(doc => (
        <a href={`/docs/${doc.id}`} class="group block p-6 bg-white dark:bg-gray-900 rounded-2xl border border-gray-200 dark:border-gray-800 hover:border-blue-500 dark:hover:border-blue-500 hover:shadow-xl transition-all relative overflow-hidden">
          <div class="absolute inset-0 bg-gradient-to-r from-blue-500/0 to-blue-500/0 group-hover:from-blue-500/5 group-hover:to-purple-500/5 transition-all"></div>
          <h2 class="text-xl font-bold text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 mb-2 transition-colors relative z-10">{doc.data.title || doc.id}</h2>
          <p class="text-gray-500 dark:text-gray-400 text-sm relative z-10 line-clamp-2">
            {doc.data.description || '点击查看详情文档内容...'}
          </p>
        </a>
      ))}
    </div>
  </div>
</BaseLayout>