<template>
  <NuxtLink
    :to="localePath(`/projets/${project.slug}`)"
    class="project-card group block rounded-xl overflow-hidden bg-sky-dark/50 border border-sky-text/10 hover:border-sky-accent/30 transition-colors focus-visible:outline-2 focus-visible:outline-sky-accent focus-visible:outline-offset-2"
    role="article"
  >
    <div class="relative overflow-hidden">
      <!-- Image avec lazy loading -->
      <NuxtImg
        v-if="project.image"
        :src="project.image"
        :alt="project.title"
        format="webp"
        loading="lazy"
        width="400"
        height="225"
        class="w-full h-44 md:h-48 object-cover transition-transform duration-300 group-hover:scale-105"
      />
      <div
        v-else
        class="w-full h-44 md:h-48 bg-sky-text/5 flex items-center justify-center"
      >
        <span class="text-sky-text/30 text-4xl">&#x1f4c1;</span>
      </div>

      <!-- Overlay au hover -->
      <div class="absolute inset-0 bg-sky-dark/70 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
        <span class="text-sky-accent font-ui font-semibold text-lg px-6 py-2 border border-sky-accent rounded-lg">
          {{ $t('projects.discover') }}
        </span>
      </div>
    </div>

    <!-- Contenu texte -->
    <div class="p-4">
      <h3 class="font-ui text-lg text-sky-text font-semibold truncate">
        {{ project.title }}
      </h3>
      <p v-if="project.short_description" class="font-narrative text-sm text-sky-text/60 line-clamp-2 mt-1">
        {{ project.short_description }}
      </p>
    </div>
  </NuxtLink>
</template>

<script setup lang="ts">
import type { Project } from '~/types/project'

defineProps<{
  project: Project
}>()

const localePath = useLocalePath()
</script>

<style scoped>
/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .project-card,
  .project-card * {
    transition: none !important;
    animation: none !important;
  }

  .project-card:hover img {
    transform: none !important;
  }
}
</style>
