Retro_Candy_CAPTCHA_Component

<div class="p-4 sm:p-6 md:p-8 min-h-screen bg-gradient-to-br from-purple-200 to-pink-200 dark:from-purple-900 via-pink-900 to-indigo-900 flex items-center justify-center font-mono">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-3xl shadow-xl border-4 border-pink-400 dark:border-pink-600 overflow-hidden transform transition-all duration-300 hover:scale-[1.01] hover:shadow-2xl">
    <div class="h-24 bg-gradient-to-r from-pink-500 to-purple-600 dark:from-pink-700 dark:to-purple-800 flex items-center justify-center relative">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-white uppercase tracking-wider drop-shadow-lg text-center relative z-10">
        <span class="block transform -rotate-6 scale-90">Verifying Identity</span>
      </h2>
      <div class="absolute inset-0 flex items-center justify-center transform -rotate-12 bounce-slow">
        <div class="w-16 h-16 bg-pink-300 dark:bg-pink-500 rounded-full opacity-30"></div>
        <div class="w-12 h-12 bg-purple-300 dark:bg-purple-500 rounded-full opacity-30 ml-8"></div>
      </div>
    </div>

    <div class="p-6 sm:p-8">
      <p class="text-center text-lg sm:text-xl text-gray-700 dark:text-gray-300 mb-6 font-semibold leading-relaxed">
        To book your sweet slot, please complete the CAPTCHA.
      </p>

      <div class="space-y-6">
        <!-- Image Selection CAPTCHA -->
        <div class="bg-pink-100 dark:bg-pink-900 p-4 rounded-xl border border-pink-300 dark:border-pink-700 shadow-inner animation-pulse-light">
          <h3 class="text-lg sm:text-xl font-bold text-pink-700 dark:text-pink-300 mb-4">Select all squares with <span class="text-purple-600 dark:text-purple-400">Cupcakes</span></h3>
          <div class="grid grid-cols-3 gap-2">
            <div class="relative group aspect-square rounded-lg overflow-hidden border-2 border-pink-200 dark:border-pink-800 focus-within:ring-4 focus-within:ring-pink-400 cursor-pointer transition-all duration-200 ease-in-out hover:scale-105 hover:z-10" tabindex="0">
              <img src="https://picsum.photos/id/1053/300/300" alt="Image 1" class="w-full h-full object-cover group-hover:brightness-110">
              <div class="absolute inset-0 bg-pink-500/50 dark:bg-pink-700/50 flex items-center justify-center opacity-0 group-focus:opacity-100 group-hover:opacity-100 transition-opacity duration-200 text-white text-3xl"><i class="fas fa-check-circle"></i></div>
            </div>
            <div class="relative group aspect-square rounded-lg overflow-hidden border-2 border-pink-200 dark:border-pink-800 focus-within:ring-4 focus-within:ring-pink-400 cursor-pointer transition-all duration-200 ease-in-out hover:scale-105 hover:z-10" tabindex="0">
              <img src="https://picsum.photos/id/108/300/300" alt="Image 2" class="w-full h-full object-cover group-hover:brightness-110">
              <div class="absolute inset-0 bg-pink-500/50 dark:bg-pink-700/50 flex items-center justify-center opacity-0 group-focus:opacity-100 group-hover:opacity-100 transition-opacity duration-200 text-white text-3xl"><i class="fas fa-check-circle"></i></div>
            </div>
            <div class="relative group aspect-square rounded-lg overflow-hidden border-2 border-pink-200 dark:border-pink-800 focus-within:ring-4 focus-within:ring-pink-400 cursor-pointer transition-all duration-200 ease-in-out hover:scale-105 hover:z-10" tabindex="0">
              <img src="https://picsum.photos/id/1041/300/300" alt="Image 3" class="w-full h-full object-cover group-hover:brightness-110">
              <div class="absolute inset-0 bg-pink-500/50 dark:bg-pink-700/50 flex items-center justify-center opacity-0 group-focus:opacity-100 group-hover:opacity-100 transition-opacity duration-200 text-white text-3xl"><i class="fas fa-check-circle"></i></div>
            </div>
            <div class="relative group aspect-square rounded-lg overflow-hidden border-2 border-pink-200 dark:border-pink-800 focus-within:ring-4 focus-within:ring-pink-400 cursor-pointer transition-all duration-200 ease-in-out hover:scale-105 hover:z-10" tabindex="0">
              <img src="https://picsum.photos/id/1025/300/300" alt="Image 4" class="w-full h-full object-cover group-hover:brightness-110">
              <div class="absolute inset-0 bg-pink-500/50 dark:bg-pink-700/50 flex items-center justify-center opacity-0 group-focus:opacity-100 group-hover:opacity-100 transition-opacity duration-200 text-white text-3xl"><i class="fas fa-check-circle"></i></div>
            </div>
            <div class="relative group aspect-square rounded-lg overflow-hidden border-2 border-pink-200 dark:border-pink-800 focus-within:ring-4 focus-within:ring-pink-400 cursor-pointer transition-all duration-200 ease-in-out hover:scale-105 hover:z-10" tabindex="0">
              <img src="https://picsum.photos/id/103/300/300" alt="Image 5" class="w-full h-full object-cover group-hover:brightness-110">
              <div class="absolute inset-0 bg-pink-500/50 dark:bg-pink-700/50 flex items-center justify-center opacity-0 group-focus:opacity-100 group-hover:opacity-100 transition-opacity duration-200 text-white text-3xl"><i class="fas fa-check-circle"></i></div>
            </div>
            <div class="relative group aspect-square rounded-lg overflow-hidden border-2 border-pink-200 dark:border-pink-800 focus-within:ring-4 focus-within:ring-pink-400 cursor-pointer transition-all duration-200 ease-in-out hover:scale-105 hover:z-10" tabindex="0">
              <img src="https://picsum.photos/id/1069/300/300" alt="Image 6" class="w-full h-full object-cover group-hover:brightness-110">
              <div class="absolute inset-0 bg-pink-500/50 dark:bg-pink-700/50 flex items-center justify-center opacity-0 group-focus:opacity-100 group-hover:opacity-100 transition-opacity duration-200 text-white text-3xl"><i class="fas fa-check-circle"></i></div>
            </div>
          </div>
        </div>

        <!-- Audio CAPTCHA (simplified for HTML only) -->
        <div class="bg-purple-100 dark:bg-purple-900 p-4 rounded-xl border border-purple-300 dark:border-purple-700 shadow-inner">
          <h3 class="text-lg sm:text-xl font-bold text-purple-700 dark:text-purple-300 mb-4">Listen and type the numbers you hear:</h3>
          <div class="flex flex-col sm:flex-row items-center gap-4">
            <button class="flex-shrink-0 bg-purple-500 hover:bg-purple-600 dark:bg-purple-700 dark:hover:bg-purple-800 text-white font-bold py-3 px-6 rounded-full shadow-lg transform transition-transform duration-200 hover:scale-105 focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-500">
              <i class="fas fa-play mr-2"></i> Play Audio
            </button>
            <input type="text" placeholder="Enter numbers here" class="flex-grow w-full sm:w-auto p-3 rounded-full border-2 border-purple-300 dark:border-purple-600 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-500 shadow-sm">
          </div>
        </div>

        <!-- Drag & Drop / Slider CAPTCHA (simplified for HTML only) -->
        <div class="bg-mint-100 dark:bg-green-900 p-4 rounded-xl border border-mint-300 dark:border-green-700 shadow-inner">
          <h3 class="text-lg sm:text-xl font-bold text-mint-700 dark:text-green-300 mb-4">Drag the <span class="text-purple-600 dark:text-purple-400">Candy</span> into the frame:</h3>
          <div class="flex justify-center items-center gap-4">
            <div class="w-24 h-24 sm:w-32 sm:h-32 bg-white dark:bg-gray-700 rounded-lg border-4 border-dashed border-mint-400 dark:border-green-600 flex items-center justify-center text-gray-400 dark:text-gray-500 text-sm overflow-hidden relative">
              <img src="https://picsum.photos/id/214/100/100" class="absolute inset-0 object-cover opacity-30 blur-sm" />
              <span class="relative z-10">Drop Zone</span>
            </div>
            <div class="w-20 h-20 sm:w-24 sm:h-24 bg-pink-300 dark:bg-pink-700 rounded-full flex items-center justify-center text-white text-3xl shadow-md cursor-grab transform transition-transform duration-200 hover:scale-110">
              🍬
            </div>
          </div>
        </div>

        <!-- ReCAPTCHA-like checkbox -->
        <div class="flex items-center justify-center bg-gray-50 dark:bg-gray-700 p-4 rounded-xl border border-gray-200 dark:border-gray-600 shadow-inner">
          <label for="iamnotarobot" class="flex items-center cursor-pointer">
            <input type="checkbox" id="iamnotarobot" name="iamnotarobot" class="form-checkbox h-7 w-7 text-green-500 rounded-md border-2 border-gray-400 dark:border-gray-500 focus:ring-green-400 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition-colors duration-200">
            <span class="ml-3 text-lg sm:text-xl text-gray-700 dark:text-gray-300 font-semibold">I'm not a robot!</span>
          </label>
        </div>

        <button type="submit" class="w-full py-4 bg-gradient-to-r from-pink-500 to-purple-600 dark:from-pink-700 dark:to-purple-800 text-white text-2xl font-extrabold uppercase rounded-full shadow-lg transform transition-all duration-300 hover:scale-105 hover:from-pink-600 hover:to-purple-700 focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-500 disco-shadow">
          Confirm Reservation
        </button>
      </div>
    </div>

    <div class="p-4 sm:p-6 bg-pink-200 dark:bg-pink-900 border-t-4 border-pink-400 dark:border-pink-600 flex justify-center items-center text-sm text-pink-700 dark:text-pink-300">
      <img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="Captcha Mascot" class="w-10 h-10 rounded-full mr-3 border-2 border-pink-500 dark:border-pink-700 shadow-md">
      <p>Powered by SweetGuard™ &copy; 2023</p>
    </div>
  </div>
</div>

<style>
  @keyframes bounce-slow {
    0%, 100% { transform: translateY(0) rotate(-12deg); }
    50% { transform: translateY(-5px) rotate(-12deg); }
  }

  .bounce-slow {
    animation: bounce-slow 3s ease-in-out infinite;
  }

  @keyframes pulse-light {
    0%, 100% { box-shadow: 0 0 0px rgba(255, 192, 203, 0.4); }
    50% { box-shadow: 0 0 10px rgba(255, 192, 203, 0.8); }
  }

  .animation-pulse-light {
    animation: pulse-light 2s infinite alternate;
  }

  .dark .animation-pulse-light {
    animation: none; /* Disable light pulse in dark mode for better visibility */
  }

  .disco-shadow {
    box-shadow: 0 0 15px rgba(255, 105, 180, 0.7), 0 0 30px rgba(138, 43, 226, 0.5);
    transition: box-shadow 0.3s ease-in-out;
  }

  .disco-shadow:hover {
    box-shadow: 0 0 25px rgba(255, 105, 180, 1), 0 0 50px rgba(138, 43, 226, 0.8);
  }

  /* Custom colors for better specificity and semantics */
  .bg-mint-100 { background-color: #e0fdf5; /* Light mint */ }
  .dark\:bg-green-900 { background-color: #0d362d; /* Darker green for dark mode */ }
  .border-mint-300 { border-color: #92e0c1; /* Medium mint */ }
  .dark\:border-green-700 { border-color: #1a624d; /* Dark green for dark mode */ }
  .text-mint-700 { color: #218360; /* Dark mint */ }
  .dark\:text-green-300 { color: #81e2b5; /* Light green for dark mode */ }
</style>