<script setup>
const router = useRouter()

const goToRegister = () => {
  router.push('/register')
}

const goToLogin = () => {
  router.push('/login')
}
</script>

<template>
  <div class="home-container">
    <div class="home-content">
      <h1 class="home-title">欢迎来到 DataHub</h1>
      <p class="home-description">数据管理平台</p>

      <div class="home-actions">
        <a-button type="primary" size="large" @click="goToLogin"> 登录 </a-button>
        <a-button size="large" @click="goToRegister"> 注册 </a-button>
      </div>
    </div>
  </div>
</template>

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

.home-content {
  text-align: center;
  color: white;
}

.home-title {
  font-size: 48px;
  font-weight: 700;
  margin: 0 0 16px 0;
  color: white;
}

.home-description {
  font-size: 20px;
  margin: 0 0 40px 0;
  opacity: 0.9;
}

.home-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
}

.home-actions .ant-btn {
  min-width: 120px;
}
</style>
