Retro_Vintage_Captcha_Component

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4 font-mono select-none">
  <div class="w-full max-w-sm rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 scale-95 md:scale-100
              bg-gradient-to-br from-purple-300 via-pink-300 to-red-300
              dark:from-purple-800 dark:via-pink-800 dark:to-red-800 dark:border dark:border-gray-700">
    <div class="p-6 space-y-6">
      <header class="flex items-center justify-between border-b-2 border-dashed border-gray-700/50 dark:border-gray-200/50 pb-4 mb-4">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 tracking-wider uppercase drop-shadow-md">
          SYSTEM CHECK
        </h2>
        <svg class="h-8 w-8 text-gray-700 dark:text-gray-300 animate-pulse" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 111.955 0 0112 2.928c-2.483.9-4.502 2.766-5.836 5.011zm0 0c-1.334 2.245-2.001 4.707-2.001 7.218 0 3.738 2.059 6.829 5.838 6.829 3.78 0 5.838-3.091 5.838-6.829 0-2.511-.667-4.973-2.001-7.218z" />
        </svg>
      </header>

      <div class="mt-4 mb-6 space-y-4">
        <p class="text-sm text-gray-700 dark:text-gray-200">
          Help us confirm you are not a robot by solving the puzzle below. We appreciate your cooperation.
        </p>

        <div class="bg-checkerboard-light dark:bg-checkerboard-dark p-4 rounded-md border-2 border-purple-600 dark:border-pink-600 shadow-inner flex flex-col items-center justify-center space-y-4">
          <p class="text-lg font-semibold text-gray-800 dark:text-gray-100 drop-shadow-sm">Click all squares with:</p>
          <div class="flex items-center space-x-2 text-2xl font-extrabold text-red-700 dark:text-yellow-400 uppercase tracking-widest">
            <img src="https://picsum.photos/40/40?random=11" alt="Target Object" class="w-8 h-8 rounded-full border-2 border-red-500 dark:border-yellow-400 object-cover">
            <span>VINTAGE CARS</span>
          </div>
          <div class="grid grid-cols-3 gap-2 w-full max-w-xs aspect-square p-2 bg-gray-50 dark:bg-gray-800 rounded-md border border-gray-300 dark:border-gray-700">
            <!-- Replace with actual image selections or logic -->
            <div class="captcha-grid-item group" role="button" aria-label="Image for captcha">
              <img src="https://picsum.photos/150/150?random=1" alt="Random image 1" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
              <div class="captcha-overlay"></div>
            </div>
            <div class="captcha-grid-item group" role="button" aria-label="Image for captcha">
              <img src="https://picsum.photos/150/150?random=2" alt="Random image 2" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
              <div class="captcha-overlay"></div>
            </div>
            <div class="captcha-grid-item group selected" role="button" aria-label="Image for captcha">
              <img src="https://picsum.photos/150/150?random=3" alt="Random image 3" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
              <div class="captcha-overlay"></div>
            </div>
            <div class="captcha-grid-item group" role="button" aria-label="Image for captcha">
              <img src="https://picsum.photos/150/150?random=4" alt="Random image 4" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
              <div class="captcha-overlay"></div>
            </div>
            <div class="captcha-grid-item group selected" role="button" aria-label="Image for captcha">
              <img src="https://picsum.photos/150/150?random=5" alt="Random image 5" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
              <div class="captcha-overlay"></div>
            </div>
            <div class="captcha-grid-item group" role="button" aria-label="Image for captcha">
              <img src="https://picsum.photos/150/150?random=6" alt="Random image 6" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
              <div class="captcha-overlay"></div>
            </div>
            <div class="captcha-grid-item group selected" role="button" aria-label="Image for captcha">
              <img src="https://picsum.photos/150/150?random=7" alt="Random image 7" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
              <div class="captcha-overlay"></div>
            </div>
            <div class="captcha-grid-item group" role="button" aria-label="Image for captcha">
              <img src="https://picsum.photos/150/150?random=8" alt="Random image 8" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
              <div class="captcha-overlay"></div>
            </div>
            <div class="captcha-grid-item group" role="button" aria-label="Image for captcha">
              <img src="https://picsum.photos/150/150?random=9" alt="Random image 9" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
              <div class="captcha-overlay"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="flex justify-between items-center pt-4 border-t-2 border-dashed border-gray-700/50 dark:border-gray-200/50">
        <button type="button" class="transition-all duration-200
                       rounded-md py-2 px-4 text-xs font-bold uppercase tracking-wider
                       bg-blue-600 hover:bg-blue-700 text-white shadow-md
                       dark:bg-blue-700 dark:hover:bg-blue-800 dark:shadow-lg
                       focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
                       dark:focus:ring-offset-gray-900">
          <svg class="inline-block mr-1 h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004 12c0 2.21.896 4.21 2.344 5.656M4 20v-5h.582m15.356-2A8.001 8.001 0 0020 12c0-2.21-.896-4.21-2.344-5.656" />
          </svg>
          Reload
        </button>
        <button type="submit" class="transition-all duration-200
                        rounded-md py-2 px-6 text-base font-bold uppercase tracking-wider
                        bg-green-600 hover:bg-green-700 text-white shadow-md
                        dark:bg-lime-600 dark:hover:bg-lime-700 dark:shadow-lg
                        focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2
                        dark:focus:ring-lime-500 dark:focus:ring-offset-gray-900">
          Verify
        </button>
      </div>

      <footer class="text-center text-xs text-gray-700 dark:text-gray-300 opacity-70 mt-6">
        <p>&copy; 1996 - <span id="current-year"></span> CyberCorp Security Inc.</p>
      </footer>
    </div>
  </div>
</div>

<style>
  /* Base grid item styling */
  .captcha-grid-item {
    position: relative;
    width: 100%;
    padding-top: 100%; /* 1:1 Aspect Ratio */
    overflow: hidden;
    border-radius: 4px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease-in-out;
  }

  .captcha-grid-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s ease-in-out;
    filter: grayscale(20%); /* Faded retro look */
  }

  .captcha-grid-item:hover {
    border-color: #6d28d9; /* Deep Purple */
    box-shadow: 0 0 0 2px #6d28d9; /* Focus ring effect */
  }

  .dark .captcha-grid-item:hover {
    border-color: #db2777; /* Deep Pink */
    box-shadow: 0 0 0 2px #db2777;
  }

  .captcha-grid-item.selected {
    border-color: #10B981; /* Emerald Green */
    filter: brightness(1.2) contrast(1.1);
    box-shadow: 0 0 0 3px #10B981;
  }

  .dark .captcha-grid-item.selected {
    border-color: #84cc16; /* Lime Green */
    filter: brightness(1.2) contrast(1.1);
    box-shadow: 0 0 0 3px #84cc16;
  }

  /* Overlay to indicate selection */
  .captcha-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(162, 28, 175, 0.4); /* Purple overlay */
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .dark .captcha-overlay {
    background-color: rgba(219, 39, 119, 0.4); /* Pink overlay */
  }

  .captcha-grid-item.selected .captcha-overlay {
    opacity: 1;
    background-color: rgba(16, 185, 129, 0.6); /* Emerald Green overlay */
  }

  .dark .captcha-grid-item.selected .captcha-overlay {
    background-color: rgba(132, 204, 22, 0.6); /* Lime Green overlay */
  }

  .captcha-overlay::after {
    content: '\2713'; /* Checkmark symbol */
    font-size: 3rem;
    font-weight: bold;
    color: white;
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
  }

  /* Checkerboard Background Pattern */
  .bg-checkerboard-light {
    background-image: linear-gradient(45deg, #e0e0e0 25%, transparent 25%),
                      linear-gradient(-45deg, #e0e0e0 25%, transparent 25%),
                      linear-gradient(45deg, transparent 75%, #e0e0e0 75%),
                      linear-gradient(-45deg, transparent 75%, #e0e0e0 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  }

  .dark .bg-checkerboard-dark {
    background-image: linear-gradient(45deg, #333 25%, transparent 25%),
                      linear-gradient(-45deg, #333 25%, transparent 25%),
                      linear-gradient(45deg, transparent 75%, #333 75%),
                      linear-gradient(-45deg, transparent 75%, #333 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  }
</style>

<script>
  // This script is purely for demonstration purposes to update the year and toggle 'selected' class.
  // In a real application, this logic would be handled by a framework or backend.
  document.addEventListener('DOMContentLoaded', () => {
    const currentYearSpan = document.getElementById('current-year');
    if (currentYearSpan) {
      currentYearSpan.textContent = new Date().getFullYear();
    }

    document.querySelectorAll('.captcha-grid-item').forEach(item => {
      item.addEventListener('click', () => {
        item.classList.toggle('selected');
      });
    });

    // Optional: Simulate dark mode toggle for demonstration outside Tailwind playground
    // In a real app, this would be handled by a global state/preference system
    const toggleDarkMode = () => {
      document.documentElement.classList.toggle('dark');
    };
    // Example: Add a button to toggle dark mode for testing (not part of the component itself)
    // const darkToggleBtn = document.createElement('button');
    // darkToggleBtn.textContent = 'Toggle Dark Mode';
    // darkToggleBtn.onclick = toggleDarkMode;
    // document.body.prepend(darkToggleBtn);
  });
</script>