---
import Layout from '../layouts/Layout.astro';

const features = [
  {
    icon: '⚡',
    title: '流式对话',
    description: '基于 Claude API 的实时流式响应，让 AI 交互更加自然流畅。',
  },
  {
    icon: '🛠️',
    title: '丰富工具',
    description: '内置文件操作、Bash 执行、代码搜索等开发工具，直接在终端中完成编程任务。',
  },
  {
    icon: '📝',
    title: '智能编辑',
    description: '支持多种编辑模式：整体替换、Diff 补丁、搜索替换，灵活应对各种场景。',
  },
  {
    icon: '🔍',
    title: 'LSP 集成',
    description: '集成语言服务器协议，提供代码诊断、定义跳转等智能编程支持。',
  },
  {
    icon: '💾',
    title: 'Checkpoint',
    description: 'Shadow Git 检查点系统，随时保存和恢复工作状态，操作更安全。',
  },
  {
    icon: '🔌',
    title: 'MCP 支持',
    description: '支持 Model Context Protocol，轻松扩展 AI 能力边界。',
  },
];
---

<Layout title="AI Terminal Assistant - 终端 AI 编程助手">
  <!-- Navigation -->
  <nav class="fixed top-0 left-0 right-0 z-50 border-b border-gray-800 bg-gray-950/80 backdrop-blur-sm">
    <div class="mx-auto flex max-w-6xl items-center justify-between px-6 py-4">
      <a href="/" class="text-xl font-bold text-white">
        <span class="text-primary-400">AI</span> Terminal Assistant
      </a>
      <div class="flex items-center gap-6">
        <a href="#features" class="text-sm text-gray-400 transition hover:text-white">功能</a>
        <a href="#quickstart" class="text-sm text-gray-400 transition hover:text-white">快速开始</a>
        <a href="/docs" class="text-sm text-gray-400 transition hover:text-white">文档</a>
        <a
          href="https://github.com"
          target="_blank"
          class="rounded-lg bg-gray-800 px-4 py-2 text-sm font-medium text-white transition hover:bg-gray-700"
        >
          GitHub
        </a>
      </div>
    </div>
  </nav>

  <!-- Hero Section -->
  <section class="relative flex min-h-screen items-center justify-center overflow-hidden px-6 pt-20">
    <!-- Background gradient -->
    <div class="absolute inset-0 bg-gradient-to-b from-primary-900/20 via-transparent to-transparent"></div>
    <div class="absolute top-1/4 left-1/2 h-96 w-96 -translate-x-1/2 rounded-full bg-primary-500/10 blur-3xl"></div>

    <div class="relative z-10 mx-auto max-w-4xl text-center">
      <h1 class="mb-6 text-5xl font-bold leading-tight text-white md:text-6xl">
        终端中的
        <span class="bg-gradient-to-r from-primary-400 to-cyan-400 bg-clip-text text-transparent">
          AI 编程助手
        </span>
      </h1>
      <p class="mx-auto mb-10 max-w-2xl text-lg text-gray-400">
        基于 Claude API 构建的终端 AI 助手。支持文件操作、代码搜索、智能编辑，
        让 AI 成为你的编程伙伴。
      </p>

      <!-- Terminal Demo -->
      <div class="mx-auto mb-10 max-w-2xl overflow-hidden rounded-xl border border-gray-800 bg-gray-900 shadow-2xl">
        <div class="flex items-center gap-2 border-b border-gray-800 bg-gray-900 px-4 py-3">
          <div class="h-3 w-3 rounded-full bg-red-500"></div>
          <div class="h-3 w-3 rounded-full bg-yellow-500"></div>
          <div class="h-3 w-3 rounded-full bg-green-500"></div>
          <span class="ml-2 text-sm text-gray-500">terminal</span>
        </div>
        <div class="p-6 text-left font-mono text-sm">
          <p class="text-gray-500">$ ai-assistant serve --port 3000</p>
          <p class="mt-2 text-green-400">✓ Server started on http://localhost:3000</p>
          <p class="mt-4 text-gray-500">$ ai-assistant attach</p>
          <p class="mt-2 text-primary-400">AI Assistant ready. How can I help?</p>
          <p class="mt-4 text-white">
            <span class="text-gray-500">&gt;</span> 帮我找出这个项目中所有的 TODO 注释
          </p>
          <p class="mt-2 text-gray-300">正在搜索代码库中的 TODO 注释...</p>
          <span class="inline-block h-4 w-2 animate-pulse bg-primary-400"></span>
        </div>
      </div>

      <!-- CTA Buttons -->
      <div class="flex flex-wrap items-center justify-center gap-4">
        <a
          href="#quickstart"
          class="rounded-xl bg-primary-500 px-8 py-3 font-medium text-white shadow-lg shadow-primary-500/25 transition hover:bg-primary-600"
        >
          快速开始
        </a>
        <a
          href="https://github.com"
          target="_blank"
          class="rounded-xl border border-gray-700 bg-gray-900 px-8 py-3 font-medium text-white transition hover:border-gray-600 hover:bg-gray-800"
        >
          查看源码
        </a>
      </div>
    </div>
  </section>

  <!-- Features Section -->
  <section id="features" class="px-6 py-24">
    <div class="mx-auto max-w-6xl">
      <h2 class="mb-4 text-center text-3xl font-bold text-white">核心功能</h2>
      <p class="mx-auto mb-16 max-w-2xl text-center text-gray-400">
        专为开发者设计，让 AI 真正融入你的开发工作流
      </p>

      <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
        {
          features.map((feature) => (
            <div class="group rounded-2xl border border-gray-800 bg-gray-900/50 p-6 transition hover:border-gray-700 hover:bg-gray-900">
              <div class="mb-4 text-4xl">{feature.icon}</div>
              <h3 class="mb-2 text-lg font-semibold text-white">{feature.title}</h3>
              <p class="text-sm leading-relaxed text-gray-400">{feature.description}</p>
            </div>
          ))
        }
      </div>
    </div>
  </section>

  <!-- Quick Start Section -->
  <section id="quickstart" class="px-6 py-24">
    <div class="mx-auto max-w-3xl">
      <h2 class="mb-4 text-center text-3xl font-bold text-white">快速开始</h2>
      <p class="mx-auto mb-12 max-w-xl text-center text-gray-400">只需几步即可开始使用</p>

      <div class="space-y-6">
        <!-- Step 1 -->
        <div class="rounded-xl border border-gray-800 bg-gray-900 p-6">
          <div class="mb-3 flex items-center gap-3">
            <span class="flex h-8 w-8 items-center justify-center rounded-full bg-primary-500/20 text-sm font-bold text-primary-400">
              1
            </span>
            <h3 class="font-semibold text-white">克隆项目</h3>
          </div>
          <pre class="overflow-x-auto rounded-lg bg-gray-950 p-4 font-mono text-sm text-gray-300"><code>git clone https://github.com/your-repo/ai-terminal-assistant.git
cd ai-terminal-assistant</code></pre>
        </div>

        <!-- Step 2 -->
        <div class="rounded-xl border border-gray-800 bg-gray-900 p-6">
          <div class="mb-3 flex items-center gap-3">
            <span class="flex h-8 w-8 items-center justify-center rounded-full bg-primary-500/20 text-sm font-bold text-primary-400">
              2
            </span>
            <h3 class="font-semibold text-white">安装依赖</h3>
          </div>
          <pre class="overflow-x-auto rounded-lg bg-gray-950 p-4 font-mono text-sm text-gray-300"><code>pnpm install</code></pre>
        </div>

        <!-- Step 3 -->
        <div class="rounded-xl border border-gray-800 bg-gray-900 p-6">
          <div class="mb-3 flex items-center gap-3">
            <span class="flex h-8 w-8 items-center justify-center rounded-full bg-primary-500/20 text-sm font-bold text-primary-400">
              3
            </span>
            <h3 class="font-semibold text-white">配置 API Key</h3>
          </div>
          <pre class="overflow-x-auto rounded-lg bg-gray-950 p-4 font-mono text-sm text-gray-300"><code>echo "ANTHROPIC_API_KEY=your-api-key" > .env</code></pre>
        </div>

        <!-- Step 4 -->
        <div class="rounded-xl border border-gray-800 bg-gray-900 p-6">
          <div class="mb-3 flex items-center gap-3">
            <span class="flex h-8 w-8 items-center justify-center rounded-full bg-primary-500/20 text-sm font-bold text-primary-400">
              4
            </span>
            <h3 class="font-semibold text-white">启动服务</h3>
          </div>
          <pre class="overflow-x-auto rounded-lg bg-gray-950 p-4 font-mono text-sm text-gray-300"><code>pnpm server:dev</code></pre>
        </div>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="border-t border-gray-800 px-6 py-12">
    <div class="mx-auto max-w-6xl text-center">
      <p class="text-sm text-gray-500">
        AI Terminal Assistant · Built with Claude API
      </p>
    </div>
  </footer>
</Layout>
