@if (user(); as user) {
  <a
    [routerLink]="[profile()!.slug!]"
    [state]="{ user: user, profile: profile() }"
    class="block group"
  >
    <!-- Card du profil -->
    <div
      class="relative bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-2xl hover:-translate-y-2"
    >
      <!-- Badge vérifié (position absolue en haut à droite) -->
      @if (profile().estVerifier) {
        <div class="absolute top-3 right-3 z-10 animate-pulse-slow">
          <div class="bg-purple-500/20 backdrop-blur-md p-2 rounded-full">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="currentColor"
              class="w-6 h-6 text-purple-500"
            >
              <path
                fill-rule="evenodd"
                d="M8.603 3.799A4.49 4.49 0 0 1 12 2.25c1.357 0 2.573.6 3.397 1.549a4.49 4.49 0 0 1 3.498 1.307 4.491 4.491 0 0 1 1.307 3.497A4.49 4.49 0 0 1 21.75 12a4.49 4.49 0 0 1-1.549 3.397 4.491 4.491 0 0 1-1.307 3.497 4.491 4.491 0 0 1-3.497 1.307A4.49 4.49 0 0 1 12 21.75a4.49 4.49 0 0 1-3.397-1.549 4.49 4.49 0 0 1-3.498-1.306 4.491 4.491 0 0 1-1.307-3.498A4.49 4.49 0 0 1 2.25 12c0-1.357.6-2.573 1.549-3.397a4.49 4.49 0 0 1 1.307-3.497 4.49 4.49 0 0 1 3.497-1.307Zm7.007 6.387a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
                clip-rule="evenodd"
              />
            </svg>
          </div>
        </div>
      }

      <!-- Partie supérieure avec avatar -->
      <div class="p-6 text-center">
        <!-- Avatar avec bordure gradient -->
        <div class="relative inline-block mb-4">
          <div class="w-32 h-32 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 p-1">
            <img
              class="w-full h-full rounded-full object-cover grayscale group-hover:grayscale-0 transition-all duration-500 group-hover:scale-105"
              src="{{ profile().avatarUrl }}"
              alt="{{ user.username }}"
              loading="lazy"
            />
          </div>
        </div>

        <!-- Nom -->
        @if (user.name) {
          <h3
            class="text-lg font-bold text-gray-900 dark:text-white mb-2 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors"
          >
            {{ user.firstName }} {{ user.lastName }}
          </h3>
        } @else if (user.username) {
          <h3
            class="text-lg font-bold text-gray-900 dark:text-white mb-2 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors"
          >
            {{ user.username }}
          </h3>
        }

        <!-- Profession -->
        <p class="text-sm font-semibold text-gray-600 dark:text-gray-300 mb-2">
          {{ profile().profession }}
        </p>
      </div>

      <!-- Partie inférieure avec infos -->
      <div class="px-6 pb-6 space-y-3 border-t border-gray-100 dark:border-gray-700">
        <div class="pt-3">
          <button
            class="block w-full select-none rounded-lg bg-pink-500 py-3.5 px-7 text-center align-middle font-sans text-sm font-bold uppercase text-white shadow-md shadow-pink-500/20 transition-all hover:shadow-lg hover:shadow-pink-500/40 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
            type="button"
            data-ripple-light="true"
          >
            <small>En savoir plus</small>
          </button>
        </div>
      </div>

      <!-- Indicateur de hover (bordure animée) -->
      <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>
  </a>
}
