<template>
  <div class="min-h-screen bg-gray-50 flex items-center justify-center">
    <div class="max-w-md w-full bg-white rounded-lg shadow-lg p-8">
      <div class="text-center">
        <h1 class="text-3xl font-bold text-gray-900 mb-4">
          Hello World! 👋
        </h1>
        <p class="text-gray-600 mb-6">
          Welcome to Ziya - Your Vue + Nuxt + Electron App
        </p>
        <div class="space-y-4">
          <UButton 
            @click="count++"
            color="primary"
            size="lg"
            class="w-full"
          >
            Click me! ({{ count }})
          </UButton>
          <p class="text-sm text-gray-500">
            Built with Vue {{ vueVersion }}, Nuxt {{ nuxtVersion }}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

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

const count = ref(0)
const nuxtVersion = '3.17.5' // From your package.json

// Page metadata
useHead({
  title: 'Ziya - Hello World',
  meta: [
    { name: 'description', content: 'One Stop Shop for your trading needs' }
  ]
})
</script>
