<template>
  <div class="home-page">
    <!-- 头部导航 -->
    <AppHeader />

    <div style="padding: 100px 20px 20px; background: white; text-align: center;">
      <h1 style="color: #4A90E2; font-size: 3rem; margin-bottom: 20px;">
        你好，我是开开
      </h1>
      <p style="font-size: 1.5rem; color: #888; margin-bottom: 40px;">
        你的情绪陪伴使者
      </p>

      <img
        src="https://r2.flowith.net/files/1517c93c-849d-4a9b-94b6-d61aa295a8a1/1752600429516-image-1752600425876-cnlfpkbrh@1024x1024.png"
        alt="开开"
        style="width: 300px; height: auto; margin-bottom: 40px; border-radius: 20px;"
      />

      <div>
        <a-button
          type="primary"
          size="large"
          @click="$router.push('/chat')"
          style="background: #F5A623; border: none; border-radius: 20px; padding: 12px 32px; font-size: 18px;"
        >
          开始一段对话
        </a-button>
      </div>
    </div>

    <div style="padding: 80px 20px; background: #F7F8FA;">
      <div style="text-align: center; margin-bottom: 60px;">
        <h2 style="font-size: 2rem; color: #333; margin-bottom: 16px;">发现你的专属陪伴</h2>
        <p style="font-size: 18px; color: #888;">
          开开博学多才，从不炫耀，愿意用最温柔的方式，陪伴每一个需要倾听的生命。
        </p>
      </div>

      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 32px; max-width: 1200px; margin: 0 auto;">
        <div style="background: white; padding: 32px; border-radius: 16px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
          <h3 style="color: #333; margin-bottom: 16px;">智能对话</h3>
          <p style="color: #888; line-height: 1.6;">从日常闲聊到情感咨询，开开随时倾听，理解并回应你的每个想法。</p>
        </div>
        <div style="background: white; padding: 32px; border-radius: 16px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
          <h3 style="color: #333; margin-bottom: 16px;">情绪日记</h3>
          <p style="color: #888; line-height: 1.6;">记录你的点滴心情与生活，开开会给予温暖的回应。</p>
        </div>
        <div style="background: white; padding: 32px; border-radius: 16px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
          <h3 style="color: #333; margin-bottom: 16px;">个人展板</h3>
          <p style="color: #888; line-height: 1.6;">自由定义你的个性标签，构建独一无二的数字人格。</p>
        </div>
        <div style="background: white; padding: 32px; border-radius: 16px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
          <h3 style="color: #333; margin-bottom: 16px;">话题追踪</h3>
          <p style="color: #888; line-height: 1.6;">自动总结你关心的事，助你洞察自我。</p>
        </div>
      </div>
    </div>

    <!-- 底部 -->
    <AppFooter />
  </div>
</template>

<script setup lang="ts">
  import AppHeader from '@/components/layout/AppHeader.vue'
  import AppFooter from '@/components/layout/AppFooter.vue'
</script>

<style scoped>
  .home-page {
    min-height: 100vh;
    background: #f5f5f5;
  }
</style>
