<template>
  <div class="h-full overflow-y-auto">
    <div class="max-w-4xl mx-auto px-6 py-8 animate-fade-in">
      <!-- 欢迎 Banner -->
      <div class="relative mb-8 p-6 rounded-2xl bg-gradient-to-br from-indigo-600/10 via-gray-900 to-purple-600/10 border border-gray-800/40 overflow-hidden">
        <div class="absolute top-0 right-0 w-64 h-64 bg-indigo-500/5 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2"></div>
        <h1 class="text-xl font-bold text-gray-100 mb-1.5 relative">AI 工具库</h1>
        <p class="text-sm text-gray-400 relative">智能工具助力编程，提升开发效率</p>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <!-- 需求助手 -->
        <div
          @click="$router.push('/tools/requirement')"
          class="tool-card group relative bg-gray-900/80 border border-gray-800/60 rounded-2xl p-6 cursor-pointer hover:border-indigo-500/40 transition-all duration-300 overflow-hidden"
        >
          <div class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-indigo-500 to-indigo-400 opacity-0 group-hover:opacity-100 transition-opacity rounded-t-2xl"></div>
          <div class="w-12 h-12 rounded-xl bg-indigo-500/15 flex items-center justify-center mb-4 group-hover:shadow-lg group-hover:shadow-indigo-500/10 transition-all duration-300">
            <svg class="w-6 h-6 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"/></svg>
          </div>
          <h3 class="text-base font-semibold text-gray-200 mb-2 group-hover:text-indigo-400 transition-colors">需求理解助手</h3>
          <p class="text-sm text-gray-500 leading-relaxed mb-4">把甲方发来的内容粘贴进来，AI帮你整理成清晰的功能清单、用户故事和验收标准</p>
          <div class="flex items-center gap-2">
            <span class="px-2.5 py-1 bg-indigo-500/10 text-indigo-400 text-[11px] rounded-lg border border-indigo-500/10">产品经理视角</span>
            <span class="px-2.5 py-1 bg-indigo-500/10 text-indigo-400 text-[11px] rounded-lg border border-indigo-500/10">程序员视角</span>
          </div>
        </div>

        <!-- 架构助手 -->
        <div
          @click="$router.push('/tools/architecture')"
          class="tool-card group relative bg-gray-900/80 border border-gray-800/60 rounded-2xl p-6 cursor-pointer hover:border-emerald-500/40 transition-all duration-300 overflow-hidden"
        >
          <div class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-emerald-500 to-emerald-400 opacity-0 group-hover:opacity-100 transition-opacity rounded-t-2xl"></div>
          <div class="w-12 h-12 rounded-xl bg-emerald-500/15 flex items-center justify-center mb-4 group-hover:shadow-lg group-hover:shadow-emerald-500/10 transition-all duration-300">
            <svg class="w-6 h-6 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg>
          </div>
          <h3 class="text-base font-semibold text-gray-200 mb-2 group-hover:text-emerald-400 transition-colors">架构选型助手</h3>
          <p class="text-sm text-gray-500 leading-relaxed mb-4">输入项目需求，AI给出技术选型建议、数据库设计、API接口清单和系统架构图</p>
          <div class="flex items-center gap-2">
            <span class="px-2.5 py-1 bg-emerald-500/10 text-emerald-400 text-[11px] rounded-lg border border-emerald-500/10">技术选型</span>
            <span class="px-2.5 py-1 bg-emerald-500/10 text-emerald-400 text-[11px] rounded-lg border border-emerald-500/10">架构设计</span>
          </div>
        </div>

        <!-- API Hub -->
        <div
          @click="$router.push('/tools/api-hub')"
          class="tool-card group relative bg-gray-900/80 border border-gray-800/60 rounded-2xl p-6 cursor-pointer hover:border-amber-500/40 transition-all duration-300 overflow-hidden"
        >
          <div class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-amber-500 to-amber-400 opacity-0 group-hover:opacity-100 transition-opacity rounded-t-2xl"></div>
          <div class="w-12 h-12 rounded-xl bg-amber-500/15 flex items-center justify-center mb-4 group-hover:shadow-lg group-hover:shadow-amber-500/10 transition-all duration-300">
            <svg class="w-6 h-6 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
          </div>
          <h3 class="text-base font-semibold text-gray-200 mb-2 group-hover:text-amber-400 transition-colors">API Hub</h3>
          <p class="text-sm text-gray-500 leading-relaxed mb-4">团队共享API资源管理，集中管理、测试和监控各类公用API服务</p>
          <div class="flex items-center gap-2">
            <span class="px-2.5 py-1 bg-amber-500/10 text-amber-400 text-[11px] rounded-lg border border-amber-500/10">密码保护</span>
            <span class="px-2.5 py-1 bg-amber-500/10 text-amber-400 text-[11px] rounded-lg border border-amber-500/10">在线测试</span>
            <span class="px-2.5 py-1 bg-amber-500/10 text-amber-400 text-[11px] rounded-lg border border-amber-500/10">健康监控</span>
          </div>
        </div>

        <!-- 联网搜索 -->
        <div
          @click="$router.push('/tools/web-search')"
          class="tool-card group relative bg-gray-900/80 border border-gray-800/60 rounded-2xl p-6 cursor-pointer hover:border-blue-500/40 transition-all duration-300 overflow-hidden"
        >
          <div class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-blue-500 to-blue-400 opacity-0 group-hover:opacity-100 transition-opacity rounded-t-2xl"></div>
          <div class="w-12 h-12 rounded-xl bg-blue-500/15 flex items-center justify-center mb-4 group-hover:shadow-lg group-hover:shadow-blue-500/10 transition-all duration-300">
            <svg class="w-6 h-6 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
          </div>
          <h3 class="text-base font-semibold text-gray-200 mb-2 group-hover:text-blue-400 transition-colors">联网搜索助手</h3>
          <p class="text-sm text-gray-500 leading-relaxed mb-4">基于豆包大模型的联网搜索，实时获取最新信息并智能整合回答</p>
          <div class="flex items-center gap-2">
            <span class="px-2.5 py-1 bg-blue-500/10 text-blue-400 text-[11px] rounded-lg border border-blue-500/10">实时搜索</span>
            <span class="px-2.5 py-1 bg-blue-500/10 text-blue-400 text-[11px] rounded-lg border border-blue-500/10">智能整合</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.tool-card {
  transform: translateY(0);
}
.tool-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}
</style>
