<template>
  <div class="minigames-view">
    <v-container>
      <v-row>
        <v-col cols="12">
          <h1 class="text-h3 mb-6">{{ $t('minigames.title') }}</h1>
          <p class="text-body-1 mb-8">{{ $t('minigames.description') }}</p>
        </v-col>
      </v-row>
      
      <v-row>
        <v-col cols="12" md="6" lg="4">
          <v-card 
            class="game-card" 
            @click="navigateToGame('match3')"
            hover
            elevation="4"
          >
            <v-img
              src="/images/icons/game.png"
              height="200"
              cover
              class="game-image"
            ></v-img>
            <v-card-title class="text-h5">
              {{ $t('minigames.match3.title') }}
            </v-card-title>
            <v-card-text>
              {{ $t('minigames.match3.description') }}
            </v-card-text>
            <v-card-actions>
              <v-btn 
                color="primary" 
                variant="elevated"
                @click="navigateToGame('match3')"
              >
                {{ $t('minigames.play') }}
              </v-btn>
            </v-card-actions>
          </v-card>
        </v-col>
        
        <!-- Platzhalter für weitere Spiele -->
        <v-col cols="12" md="6" lg="4">
          <v-card class="game-card coming-soon" disabled>
            <v-img
              src="/images/icons/coming-soon.png"
              height="200"
              cover
              class="game-image"
            ></v-img>
            <v-card-title class="text-h5">
              {{ $t('minigames.comingSoon.title') }}
            </v-card-title>
            <v-card-text>
              {{ $t('minigames.comingSoon.description') }}
            </v-card-text>
            <v-card-actions>
              <v-btn disabled>
                {{ $t('minigames.comingSoon') }}
              </v-btn>
            </v-card-actions>
          </v-card>
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>

<script>
export default {
  name: 'MinigamesView',
  methods: {
    navigateToGame(game) {
      this.$router.push(`/minigames/${game}`);
    }
  }
}
</script>

<style scoped>
.minigames-view {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px 0;
}

.game-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  border-radius: 16px;
  overflow: hidden;
}

.game-card:hover:not(.coming-soon) {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.3);
}

.game-image {
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
}

.coming-soon {
  opacity: 0.7;
}

h1 {
  color: white;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

p {
  color: rgba(255,255,255,0.9);
}
</style>
