<template>
  <div class="container mx-auto px-4 py-8">
    <div class="text-center">
      <h1 class="text-4xl font-bold text-gray-900 mb-6">
        🚀 Ziya Dashboard
      </h1>
      
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-4xl mx-auto">
        <!-- Trading Card -->
        <div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
          <div class="text-blue-500 text-3xl mb-4">📈</div>
          <h3 class="text-xl font-semibold mb-2">Trading</h3>
          <p class="text-gray-600">Access your trading dashboard and monitor your portfolio</p>
        </div>
        
        <!-- Analytics Card -->
        <div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
          <div class="text-green-500 text-3xl mb-4">📊</div>
          <h3 class="text-xl font-semibold mb-2">Analytics</h3>
          <p class="text-gray-600">View detailed analytics and market insights</p>
        </div>
        
        <!-- Settings Card -->
        <div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
          <div class="text-purple-500 text-3xl mb-4">⚙️</div>
          <h3 class="text-xl font-semibold mb-2">Settings</h3>
          <p class="text-gray-600">Configure your preferences and account settings</p>
        </div>
      </div>
      
      <div class="mt-8">
        <UButton 
          @click="showWelcome = !showWelcome"
          color="primary"
          size="lg"
        >
          {{ showWelcome ? 'Hide' : 'Show' }} Welcome Message
        </UButton>
        
        <div v-if="showWelcome" class="mt-4 p-4 bg-blue-50 rounded-lg">
          <p class="text-blue-800">
            Welcome to your new Electron app! This is running on Nuxt {{ nuxtVersion }} with Vue {{ vueVersion }}.
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { version as vueVersion } from 'vue/package.json'

const showWelcome = ref(false)
const nuxtVersion = '3.17.5'

// Page metadata
definePageMeta({
  title: 'Dashboard'
})

useHead({
  title: 'Ziya - Dashboard',
  meta: [
    { name: 'description', content: 'Ziya trading dashboard - One stop shop for your trading needs' }
  ]
})
</script> 