<template>
  <view class="container">
    <view class="header">
      <text class="title">儿童编程游戏</text>
      <text class="subtitle">通过拖拽代码块学习编程！</text>
    </view>
    <view class="content">
      <button class="start-btn" @click="startGame">开始游戏</button>
      <view class="features">
        <view class="feature">
          <text>关卡挑战</text>
        </view>
        <view class="feature">
          <text>成就系统</text>
        </view>
        <view class="feature">
          <text>分享朋友</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const startGame = () => {
  uni.navigateTo({ url: '/pages/home' })
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.header {
  text-align: center;
  margin-bottom: 50px;
}

.title {
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 20px;
}

.subtitle {
  font-size: 24px;
}

.start-btn {
  background: #ff6b6b;
  color: white;
  border: none;
  padding: 20px 40px;
  font-size: 24px;
  border-radius: 50px;
  margin-bottom: 50px;
}

.features {
  display: flex;
  gap: 20px;
}

.feature {
  background: rgba(255, 255, 255, 0.1);
  padding: 20px;
  border-radius: 20px;
  text-align: center;
}
</style>