<template>
  <div
    class="flex flex-col items-center gap-6 md:gap-8 rounded-2xl bg-gradient-to-br from-purple-900/40 to-purple-800/30 border border-purple-700/30 p-6 md:p-8 shadow-2xl transition-all duration-500 hover:shadow-3xl md:flex-row backdrop-blur-sm hover:border-purple-600/50 group"
  >
    <!-- Card Image Container -->
    <div class="relative">
      <!-- Card Image with Glow Effect -->
      <div
        class="h-56 w-36 sm:h-64 sm:w-40 md:h-72 md:w-48 flex-shrink-0 rounded-xl bg-cover bg-center bg-no-repeat transition-all duration-500 group-hover:scale-105 relative overflow-hidden"
        :style="{
          'background-image': `url(${imageUrl || '/cards/' + (cardNumber + 1) + '.png'})`,
          transform: orientation === 'reversed' ? 'rotate(180deg)' : 'none'
        }"
      >
        <!-- Gradient Overlay -->
        <div class="absolute inset-0 bg-gradient-to-br from-transparent via-purple-900/10 to-purple-900/20 rounded-xl"></div>

        <!-- Glow Effect -->
        <div
          class="absolute inset-0 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"
          :style="{
            'box-shadow': orientation === 'reversed'
              ? '0 0 30px 10px rgba(239, 68, 68, 0.4)'
              : '0 0 30px 10px rgba(168, 85, 247, 0.4)'
          }"
        ></div>
      </div>

      <!-- Orientation Badge -->
      <div
        v-if="orientation === 'reversed'"
        class="absolute top-3 right-3 bg-gradient-to-r from-red-600 to-red-700 text-red-100 text-xs font-semibold px-3 py-1.5 rounded-full border border-red-500/30 shadow-lg"
      >
        Inversée
      </div>
      <div
        v-else
        class="absolute top-3 right-3 bg-gradient-to-r from-purple-600 to-purple-700 text-purple-100 text-xs font-semibold px-3 py-1.5 rounded-full border border-purple-500/30 shadow-lg"
      >
        Droite
      </div>

      <!-- Card Number Badge -->
      <div class="absolute -bottom-2 -left-2 bg-gradient-to-r from-purple-700 to-indigo-700 text-purple-100 text-sm font-bold w-10 h-10 rounded-full flex items-center justify-center border-2 border-purple-900/50 shadow-lg">
        {{ cardNumber }}
      </div>
    </div>

    <!-- Card Content -->
    <div class="flex flex-col gap-4 text-center md:text-left flex-1">
      <!-- Card Number -->
      <p class="text-purple-300/70 text-xs sm:text-sm tracking-widest uppercase font-semibold">
        Carte #{{ cardNumber }}
      </p>

      <!-- Card Name -->
      <h3 class="text-2xl sm:text-3xl font-black bg-gradient-to-r from-purple-200 to-purple-100 bg-clip-text text-transparent leading-tight">
        {{ name }}
      </h3>

      <!-- Description -->
      <div class="text-purple-300/90 text-base sm:text-lg leading-relaxed font-medium" v-html="description"></div>

      <!-- Decorative Divider -->
      <div class="w-16 h-0.5 bg-gradient-to-r from-purple-600 to-transparent rounded-full mt-2 mx-auto md:mx-0"></div>
    </div>

    <!-- Hover Effect Background -->
    <div class="absolute inset-0 bg-gradient-to-r from-transparent via-purple-900/5 to-transparent opacity-0 group-hover:opacity-100 rounded-2xl transition-opacity duration-500 pointer-events-none"></div>
  </div>
</template>

<script setup lang="ts">
interface Props {
  cardNumber: number;
  name: string;
  imageUrl: string;
  orientation?: string;
  description: string;
}

defineProps<Props>();
</script>

<style scoped>
div {
  animation: cardAppear 0.6s ease-out;
}

@keyframes cardAppear {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Custom shadow for hover effect */
.shadow-3xl {
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.5),
    0 0 30px rgba(168, 85, 247, 0.3);
}

/* Smooth transitions for all interactive elements */
* {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

/* Custom scrollbar for description */
.text-base::-webkit-scrollbar {
  width: 4px;
}

.text-base::-webkit-scrollbar-track {
  background: rgba(168, 85, 247, 0.1);
  border-radius: 2px;
}

.text-base::-webkit-scrollbar-thumb {
  background: rgba(168, 85, 247, 0.4);
  border-radius: 2px;
}

.text-base::-webkit-scrollbar-thumb:hover {
  background: rgba(168, 85, 247, 0.6);
}
</style>
