<section
  class="relative min-h-screen flex items-center justify-center overflow-hidden bg-gradient-to-br from-white via-indigo-50 to-purple-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900"
>
  <!-- Décorations de fond animées -->
  <div class="absolute inset-0 overflow-hidden pointer-events-none">
    <div
      class="absolute top-1/4 -left-20 w-72 h-72 bg-indigo-400 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob"
    ></div>
    <div
      class="absolute top-1/3 -right-20 w-96 h-96 bg-purple-400 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-2000"
    ></div>
    <div
      class="absolute bottom-1/4 left-1/2 transform -translate-x-1/2 w-80 h-80 bg-pink-400 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-4000"
    ></div>
  </div>

  <!-- Grille de points en arrière-plan (effet moderne) -->
  <div class="absolute inset-0 opacity-10 dark:opacity-5">
    <div
      class="absolute inset-0"
      style="
        background-image: radial-gradient(circle, #6366f1 1px, transparent 1px);
        background-size: 50px 50px;
      "
    ></div>
  </div>

  <div class="relative w-full mx-auto px-4 sm:px-6 lg:px-8 pt-20 pb-16 sm:pt-24 sm:pb-20">
    <!-- Contenu principal -->
    <div class="max-w-5xl mx-auto">
      <!-- Badge ou tag -->
      <div class="flex justify-center mb-6 animate-fade-in">
        <div
          class="inline-flex items-center gap-2 bg-white dark:bg-gray-800 rounded-full px-4 py-2 shadow-lg border border-indigo-100 dark:border-indigo-900"
        >
          <span class="relative flex h-2 w-2">
            <span
              class="animate-ping absolute inline-flex h-full w-full rounded-full bg-indigo-400 opacity-75"
            ></span>
            <span class="relative inline-flex rounded-full h-2 w-2 bg-indigo-500"></span>
          </span>
          <span class="text-sm font-medium text-gray-700 dark:text-gray-300">
            Plateforme de mise en relation professionnelle
          </span>
        </div>
      </div>

      <!-- Titre principal avec animation de mots -->
      <div class="text-center mb-8 sm:mb-12">
        <h1
          class="block font-bold text-gray-900 dark:text-white text-4xl sm:text-5xl md:text-6xl lg:text-7xl leading-tight animate-slide-up"
        >
          Dans quel secteur se cache
          <br class="hidden sm:block" />
          votre prochaine
          <br />
          <span class="inline-block mt-2 sm:mt-4">
            <span
              class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 animate-gradient"
            >
              pépite?
            </span>
          </span>
        </h1>

        <!-- Animation des mots qui défilent -->
        <div class="mt-6 sm:mt-8 flex justify-center animate-slide-up animation-delay-200">
          <div class="relative inline-block">
            <div class="word-animation h-12 sm:h-14 md:h-16 lg:h-20 overflow-hidden">
              <div class="word-container">
                <span class="word text-red-500 dark:text-red-400">Les finances</span>
                <span class="word text-orange-500 dark:text-orange-400">La Santé</span>
                <span class="word text-blue-500 dark:text-blue-400">Les Études</span>
                <span class="word text-green-500 dark:text-green-400">La Tech</span>
              </div>
            </div>
            <div
              class="absolute inset-0 bg-gradient-to-r from-transparent via-transparent to-transparent pointer-events-none"
            ></div>
          </div>
        </div>
      </div>

      <!-- Description -->
      <div class="text-center mb-8 sm:mb-12 animate-fade-in animation-delay-300">
        <p
          class="text-lg sm:text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto leading-relaxed"
        >
          Connectez-vous avec des professionnels talentueux dans tous les secteurs d'activité
        </p>
      </div>

      <!-- Barre de recherche -->
      <div class="max-w-3xl mx-auto mb-12 animate-slide-up animation-delay-400">
        <div
          class="bg-white dark:bg-gray-800 rounded-2xl shadow-2xl p-4 sm:p-6 hover:shadow-3xl transition-all duration-300 transform hover:scale-[1.02]"
        >
          <app-search (onSearchChange)="showNewQuery($event)" />
        </div>
      </div>

      <!-- CTA ou statistiques -->
      <div class="flex flex-wrap justify-center gap-4 sm:gap-6 animate-fade-in animation-delay-500">
        <div
          class="group bg-white dark:bg-gray-800 rounded-2xl px-6 py-4 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1"
        >
          <div class="flex items-center gap-3">
            <div
              class="bg-indigo-100 dark:bg-indigo-900 rounded-full p-3 group-hover:scale-110 transition-transform duration-300"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-6 w-6 text-indigo-600 dark:text-indigo-400"
                viewBox="0 0 20 20"
                fill="currentColor"
              >
                <path
                  d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z"
                />
              </svg>
            </div>
            <div>
              <p class="text-2xl sm:text-3xl font-bold text-indigo-600 dark:text-indigo-400">
                250+
              </p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Profils actifs</p>
            </div>
          </div>
        </div>

        <div
          class="group bg-white dark:bg-gray-800 rounded-2xl px-6 py-4 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1"
        >
          <div class="flex items-center gap-3">
            <div
              class="bg-purple-100 dark:bg-purple-900 rounded-full p-3 group-hover:scale-110 transition-transform duration-300"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-6 w-6 text-purple-600 dark:text-purple-400"
                viewBox="0 0 20 20"
                fill="currentColor"
              >
                <path
                  fill-rule="evenodd"
                  d="M6 6V5a3 3 0 013-3h2a3 3 0 013 3v1h2a2 2 0 012 2v3.57A22.952 22.952 0 0110 13a22.95 22.95 0 01-8-1.43V8a2 2 0 012-2h2zm2-1a1 1 0 011-1h2a1 1 0 011 1v1H8V5zm1 5a1 1 0 011-1h.01a1 1 0 110 2H10a1 1 0 01-1-1z"
                  clip-rule="evenodd"
                />
                <path
                  d="M2 13.692V16a2 2 0 002 2h12a2 2 0 002-2v-2.308A24.974 24.974 0 0110 15c-2.796 0-5.487-.46-8-1.308z"
                />
              </svg>
            </div>
            <div>
              <p class="text-2xl sm:text-3xl font-bold text-purple-600 dark:text-purple-400">12+</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Secteurs</p>
            </div>
          </div>
        </div>

        <div
          class="group bg-white dark:bg-gray-800 rounded-2xl px-6 py-4 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1"
        >
          <div class="flex items-center gap-3">
            <div
              class="bg-pink-100 dark:bg-pink-900 rounded-full p-3 group-hover:scale-110 transition-transform duration-300"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-6 w-6 text-pink-600 dark:text-pink-400"
                viewBox="0 0 20 20"
                fill="currentColor"
              >
                <path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
              </svg>
            </div>
            <div>
              <p class="text-2xl sm:text-3xl font-bold text-pink-600 dark:text-pink-400">500+</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Projets</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Scroll indicator (optionnel) -->
      <div class="flex justify-center mt-12 sm:mt-16 animate-bounce animation-delay-600">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-8 w-8 text-gray-400 dark:text-gray-600"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M19 14l-7 7m0 0l-7-7m7 7V3"
          />
        </svg>
      </div>
    </div>
  </div>
</section>
