ArtDecoCaptchaComponent

<div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-orange-100 via-amber-200 to-yellow-200 dark:from-stone-900 dark:via-stone-800 dark:to-stone-700 p-4 font-serif">
  <div class="w-full max-w-sm bg-gradient-to-br from-amber-50 dark:from-stone-800 to-orange-100 dark:to-stone-900 rounded-lg shadow-xl overflow-hidden
    border-4 border-amber-800 dark:border-stone-600
    transform skew-y-1 hover:skew-y-0 transition-transform duration-500 ease-in-out
    relative overflow-hidden group">

    <!-- Art Deco Top Border Effect -->
    <div class="absolute top-0 left-0 w-full h-8 bg-amber-800 dark:bg-stone-600 opacity-75 group-hover:opacity-100 transition-opacity duration-300
      flex justify-around items-center -skew-x-12 transform origin-top-left">
      <div class="w-3 h-3 bg-white opacity-25 rounded-full"></div>
      <div class="w-3 h-3 bg-white opacity-25 rounded-full"></div>
      <div class="w-3 h-3 bg-white opacity-25 rounded-full"></div>
    </div>

    <!-- Art Deco Background Pattern Simulation -->
    <div class="absolute inset-0 z-0 opacity-10 dark:opacity-5 pointer-events-none">
      <svg class="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
        <defs>
          <pattern id="artDecoPattern" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
            <rect x="0" y="0" width="5" height="5" fill="rgba(0,0,0,0.1)"/>
            <rect x="5" y="5" width="5" height="5" fill="rgba(0,0,0,0.1)"/>
          </pattern>
        </defs>
        <rect x="0" y="0" width="100" height="100" fill="url(#artDecoPattern)"/>
      </svg>
    </div>

    <div class="art-deco-frame p-8 relative z-10">
      <h2 class="text-2xl md:text-3xl font-bold text-amber-900 dark:text-stone-100 mb-6 text-center tracking-wider uppercase drop-shadow-md group-hover:scale-105 transition-transform duration-300">
        Verification Required
      </h2>

      <div class="mb-6 text-center">
        <p class="text-sm text-lime-950 dark:text-stone-300 mb-4">Please verify you are not a robot.</p>
        <div class="w-48 h-20 bg-gradient-to-r from-amber-200 to-orange-300 dark:from-stone-700 dark:to-stone-600 rounded drop-shadow-lg mx-auto flex items-center justify-center
          border-2 border-amber-700 dark:border-stone-500
          transform rotate-1 skew-x-2 group-hover:rotate-0 group-hover:skew-x-0 transition-transform duration-500 ease-in-out animate-pulse-slight">
          <span class="text-3xl font-extrabold text-amber-800 dark:text-orange-300 tracking-widest select-none leading-none">A2k9X</span>
        </div>
        <button class="mt-4 text-xs text-amber-700 dark:text-stone-400 hover:text-amber-900 dark:hover:text-stone-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50">
          <i class="fas fa-sync-alt mr-1"></i> Regenerate Code
        </button>
      </div>

      <div class="mb-6 relative">
        <label for="captchaInput" class="sr-only">Enter CAPTCHA Code</label>
        <input type="text" id="captchaInput" placeholder="Enter code" class="block w-full px-4 py-3 rounded-md text-base bg-amber-50 dark:bg-stone-700 text-lime-950 dark:text-stone-200
          border-2 border-amber-600 dark:border-stone-500 placeholder-amber-400 dark:placeholder-stone-400
          focus:outline-none focus:ring-4 focus:ring-amber-500 dark:focus:ring-stone-400 focus:ring-opacity-50 dark:focus:ring-opacity-50
          transition-all duration-300 ease-in-out shadow-inner
          transform group-hover:-translate-y-0.5 group-hover:scale-[1.01]">
        <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none ">
          <svg class="h-5 w-5 text-amber-500 dark:text-stone-400" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M5.5 9V7a3.5 3.5 0 017 0v2h.5a2 2 0 012 2v5a2 2 0 01-2 2h-9a2 2 0 01-2-2v-5a2 2 0 012-2h.5zM8 7a1.5 1.5 0 013 0v2H8V7zm0 6a.5.5 0 01.5-.5h3a.5.5 0 010 1h-3a.5.5 0 01-.5-.5z" clip-rule="evenodd"/>
          </svg>
        </div>
      </div>

      <button type="submit" class="w-full py-3 rounded-md text-lg font-semibold
        bg-amber-800 hover:bg-amber-900 dark:bg-stone-600 dark:hover:bg-stone-700
        text-white dark:text-stone-100 shadow-xl
        transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 active:scale-95
        focus:outline-none focus:ring-4 focus:ring-amber-500 dark:focus:ring-stone-400 focus:ring-opacity-60 dark:focus:ring-opacity-60
        border-b-4 border-r-4 border-amber-900 dark:border-stone-800 drop-shadow-lg">
        Submit
      </button>
    </div>

    <!-- Art Deco Bottom Border Effect -->
    <div class="absolute bottom-0 left-0 w-full h-8 bg-amber-800 dark:bg-stone-600 opacity-75 group-hover:opacity-100 transition-opacity duration-300
      flex justify-around items-center -skew-x-12 transform origin-bottom-right">
      <div class="w-3 h-3 bg-white opacity-25 rounded-full"></div>
      <div class="w-3 h-3 bg-white opacity-25 rounded-full"></div>
      <div class="w-3 h-3 bg-white opacity-25 rounded-full"></div>
    </div>

  </div>
</div>