<template>
  <div class="garden-view">
    <div class="garden-header">
      <h2 class="garden-title">🌿 花园</h2>
      <p class="garden-subtitle">在这里，关系会生长 · 每一片叶子都是独一无二的回忆</p>
    </div>

    <div class="feature-cards">
      <div class="feature-card leaf-card" @click="$router.push('/garden/leaf')">
        <div class="card-icon">🍃</div>
        <div class="card-body">
          <h3>每日心情叶</h3>
          <p>每天收获一片独一无二的叶子，记录今日心情</p>
        </div>
        <span class="card-arrow">›</span>
      </div>

      <div class="feature-card tree-card" @click="$router.push('/garden/tree')">
        <div class="card-icon">🌳</div>
        <div class="card-body">
          <h3>好友之树</h3>
          <p>你们的友谊会长成一棵树，越聊越茂盛</p>
        </div>
        <span class="card-arrow">›</span>
      </div>

      <div class="feature-card capsule-card" @click="$router.push('/garden/capsule')">
        <div class="card-icon">⏳</div>
        <div class="card-body">
          <h3>时光胶囊</h3>
          <p>给未来的自己或好友，寄一颗会发芽的种子</p>
        </div>
        <span class="card-arrow">›</span>
      </div>

      <div class="feature-card echo-card" @click="$router.push('/contacts')">
        <div class="card-icon">🍃</div>
        <div class="card-body">
          <h3>念念回音</h3>
          <p>在好友资料卡寄一片"我在想你"的回音叶</p>
        </div>
        <span class="card-arrow">›</span>
      </div>

      <div class="feature-card sync-card" @click="$router.push('/garden/sync')">
        <div class="card-icon">🌱</div>
        <div class="card-body">
          <h3>默契种子</h3>
          <p>和好友盲答一题，默契会长出独特的叶子</p>
        </div>
        <span class="card-arrow">›</span>
      </div>

      <div class="feature-card grove-card" @click="$router.push('/garden/grove')">
        <div class="card-icon">🌲</div>
        <div class="card-body">
          <h3>情绪共鸣林</h3>
          <p>俯瞰朋友圈今日的情绪天气，你并不孤单</p>
        </div>
        <span class="card-arrow">›</span>
      </div>

      <div class="feature-card heartbeat-card" @click="$router.push('/garden/heartbeat')">
        <div class="card-icon">💓</div>
        <div class="card-body">
          <h3>心跳同步森林</h3>
          <p>你们的叶子在同一节拍上呼吸</p>
        </div>
        <span class="card-arrow">›</span>
      </div>

      <div class="feature-card firefly-card" @click="$router.push('/garden/firefly')">
        <div class="card-icon">✨</div>
        <div class="card-body">
          <h3>萤火虫时刻</h3>
          <p>全服随机降临，集气点亮掉限定叶</p>
        </div>
        <span class="card-arrow">›</span>
      </div>
    </div>

    <div class="garden-quote">
      <p>「过去 · 当下 · 未来，都在这片花园里生长」</p>
    </div>
  </div>
</template>

<script setup lang="ts">
</script>

<style scoped>
.garden-view {
  flex: 1; overflow-y: auto; padding: 32px;
  background: linear-gradient(160deg, var(--color-bg) 0%, var(--color-primary-lightest) 100%);
}
.garden-header { text-align: center; margin-bottom: 36px; }
.garden-title { font-size: 28px; font-weight: 700; margin: 0 0 8px; color: var(--color-primary-darker); }
.garden-subtitle { font-size: 14px; color: var(--color-text-secondary); margin: 0; }

.feature-cards { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.feature-card {
  display: flex; align-items: center; gap: 16px; padding: 20px 24px;
  background: var(--color-surface); border-radius: 16px;
  border: 1px solid var(--color-border); cursor: pointer;
  transition: all 0.25s; box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.feature-card:hover {
  transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,150,136,0.15);
  border-color: var(--color-primary-light);
}
.card-icon { font-size: 40px; flex-shrink: 0; }
.card-body { flex: 1; }
.card-body h3 { margin: 0 0 4px; font-size: 17px; color: var(--color-text-primary); }
.card-body p { margin: 0; font-size: 13px; color: var(--color-text-secondary); }
.card-arrow { font-size: 24px; color: var(--color-text-hint); flex-shrink: 0; }
.feature-card:hover .card-arrow { color: var(--color-primary); }

.leaf-card { border-left: 4px solid #66BB6A; }
.tree-card { border-left: 4px solid #8D6E63; }
.capsule-card { border-left: 4px solid #FFB74D; }
.echo-card { border-left: 4px solid #26A69A; }
.sync-card { border-left: 4px solid #9CCC65; }
.grove-card { border-left: 4px solid #7CB342; }
.heartbeat-card { border-left: 4px solid #EC407A; }
.firefly-card { border-left: 4px solid #FFC107; }

.garden-quote { text-align: center; margin-top: 48px; }
.garden-quote p { font-size: 13px; color: var(--color-text-hint); font-style: italic; margin: 0; }
</style>
