@if (project) {
  <div
    class="group bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-2xl hover:-translate-y-2 animate-fade-in"
  >
    <!-- Image du projet -->
    <div class="relative h-48 overflow-hidden bg-gray-100 dark:bg-gray-700">
      @if (project.fichier) {
        <img
          alt="{{ project.nom }}"
          class="w-full h-full object-cover object-center transition-transform duration-500 group-hover:scale-110"
          src="{{ environment.baseUrl }}/api/files/projets/{{ project.id }}/{{ project.fichier }}"
          loading="lazy"
        />
      } @else {
        <img
          alt="{{ project.nom }}"
          class="w-full h-full object-cover object-center transition-transform duration-500 group-hover:scale-110 opacity-60"
          src="https://api.dicebear.com/9.x/shapes/svg?seed={{ project.nom }}"
          loading="lazy"
        />
      }

      <!-- Overlay gradient au hover -->
      <div
        class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"
      ></div>
    </div>

    <!-- Contenu -->
    <div class="p-6 space-y-4">
      <!-- Titre -->
      <h3
        class="text-xl font-bold text-gray-900 dark:text-white line-clamp-2 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors"
      >
        {{ project.nom }}
      </h3>

      <!-- Description -->
      <p class="text-sm text-gray-600 dark:text-gray-300 line-clamp-3">
        {{ project.description || 'Aucune description disponible.' }}
      </p>

      <!-- Lien vers le projet -->
      @if (project.lien) {
        <a
          [href]="project.lien"
          target="_blank"
          rel="noopener noreferrer"
          class="inline-flex items-center gap-2 text-indigo-600 dark:text-indigo-400 hover:text-indigo-700 dark:hover:text-indigo-300 font-medium text-sm transition-all duration-200 group/link"
        >
          <span>Explorer le projet</span>
          <svg
            class="w-4 h-4 transition-transform duration-200 group-hover/link:translate-x-1"
            viewBox="0 0 24 24"
            stroke="currentColor"
            stroke-width="2"
            fill="none"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <path d="M5 12h14"></path>
            <path d="M12 5l7 7-7 7"></path>
          </svg>
        </a>
      }
    </div>

    <!-- Bordure animée au hover -->
    <div
      class="absolute inset-0 border-2 border-transparent group-hover:border-indigo-500 rounded-xl transition-all duration-300 pointer-events-none"
    ></div>
  </div>
}