<template>
  <v-container class="home-container">
    <v-row justify="center" align="center" class="home-header">
      <h1 class="home-title">PolyMarket</h1>
    </v-row>
    
    <v-row justify="center" align="center" class="home-subtitle">
      <p>Welcome to PolyMarket - Your Gateway to Decentralized Trading</p>
    </v-row>
    
    <v-row justify="center" align="center" class="home-content">
      <v-col cols="12" md="8" lg="6">
        <v-card class="home-card">
          <v-card-title>Market Overview</v-card-title>
          <v-card-text>
            <p>Explore the latest market data and trading opportunities.</p>
            <v-btn
              class="home-btn"
              color="primary"
              @click="navigateToTrade"
            >
              Go to Trading
            </v-btn>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()

const navigateToTrade = () => {
  // Navigate to trade page (we'll add this route later)
  console.log('Navigate to trade page')
}
</script>

<style scoped>
.home-container {
  padding: 40px 20px;
  min-height: 100vh;
}

.home-header {
  margin-bottom: 20px;
}

.home-title {
  font-size: 3rem;
  font-weight: bold;
  color: #0066cc;
  margin: 0;
}

.home-subtitle {
  margin-bottom: 40px;
}

.home-subtitle p {
  font-size: 1.2rem;
  color: #666666;
  margin: 0;
}

.home-content {
  margin-top: 40px;
}

.home-card {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 24px;
  text-align: center;
}

.home-card-title {
  font-size: 1.5rem;
  font-weight: 500;
  margin-bottom: 16px;
}

.home-card-text {
  margin-bottom: 24px;
}

.home-btn {
  margin-top: 16px;
}
</style>
