Luxury_Premium_CAPTCHA_Weather_Component

<div class="font-sans antialiased bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 min-h-screen p-4 sm:p-8 flex items-center justify-center">
  <div class="max-w-4xl w-full bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.01] border border-gray-200 dark:border-gray-700">
    <div class="p-6 sm:p-10">
      <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 sm:mb-8 pb-4 border-b border-gray-100 dark:border-gray-700">
        <h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 dark:text-gray-100 leading-tight tracking-tight mb-2 sm:mb-0">
          ClimateGuard Verification
        </h1>
        <div class="flex items-center space-x-3 text-gray-500 dark:text-gray-400">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9.663 17h4.673M12 10.333v4.334m-6.75 0h13.5c.621 0 1.125-.504 1.125-1.125V10.5m1.5-4.5h-16.5a1.125 1.125 0 00-1.125 1.125v12.75c0 .621.504 1.125 1.125 1.125h16.5c.621 0 1.125-.504 1.125-1.125V7.875c0-.621-.504-1.125-1.125-1.125z" />
          </svg>
          <span class="text-sm sm:text-base font-medium">Secure Access to Climate Data</span>
        </div>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-8 lg:gap-12">
        <div class="flex flex-col">
          <h2 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-5">Verify You Are Human</h2>
          <p class="text-gray-600 dark:text-gray-300 text-lg mb-6 leading-relaxed">
            To proceed and access comprehensive climate data, please complete the security challenge below.
            This helps us ensure data integrity and protect against automated access.
          </p>

          <div class="bg-gray-50 dark:bg-gray-700 rounded-2xl p-4 sm:p-6 shadow-inner border border-gray-100 dark:border-gray-600 mb-6">
            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-4">Click on all images containing <span class="text-blue-600 dark:text-blue-400">'Stratocumulus Clouds'</span>:</p>
            <div class="grid grid-cols-3 gap-2 sm:gap-3">
              <button aria-label="Image 1" class="relative w-full aspect-square rounded-lg overflow-hidden focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-600 group">
                <img src="https://picsum.photos/id/1041/300/200" alt="Image showing clouds" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110">
                <div class="absolute inset-0 bg-blue-600/30 dark:bg-blue-800/30 opacity-0 group-focus:opacity-100 group-hover:opacity-100 flex items-center justify-center transition-opacity duration-300">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                  </svg>
                </div>
              </button>
              <button aria-label="Image 2" class="relative w-full aspect-square rounded-lg overflow-hidden focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-600 group">
                <img src="https://picsum.photos/id/1018/300/200" alt="Image showing clouds" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110">
                <div class="absolute inset-0 bg-blue-600/30 dark:bg-blue-800/30 opacity-0 group-focus:opacity-100 group-hover:opacity-100 flex items-center justify-center transition-opacity duration-300">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                  </svg>
                </div>
              </button>
              <button aria-label="Image 3" class="relative w-full aspect-square rounded-lg overflow-hidden focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-600 group">
                <img src="https://picsum.photos/id/23/300/200" alt="Image showing clouds" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110">
                <div class="absolute inset-0 bg-blue-600/30 dark:bg-blue-800/30 opacity-0 group-focus:opacity-100 group-hover:opacity-100 flex items-center justify-center transition-opacity duration-300">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                  </svg>
                </div>
              </button>
              <button aria-label="Image 4" class="relative w-full aspect-square rounded-lg overflow-hidden focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-600 group">
                <img src="https://picsum.photos/id/1053/300/200" alt="Image showing clouds" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110">
                <div class="absolute inset-0 bg-blue-600/30 dark:bg-blue-800/30 opacity-0 group-focus:opacity-100 group-hover:opacity-100 flex items-center justify-center transition-opacity duration-300">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                  </svg>
                </div>
              </button>
              <button aria-label="Image 5" class="relative w-full aspect-square rounded-lg overflow-hidden focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-600 group">
                <img src="https://picsum.photos/id/10/300/200" alt="Image showing clouds" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110">
                <div class="absolute inset-0 bg-blue-600/30 dark:bg-blue-800/30 opacity-0 group-focus:opacity-100 group-hover:opacity-100 flex items-center justify-center transition-opacity duration-300">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                  </svg>
                </div>
              </button>
              <button aria-label="Image 6" class="relative w-full aspect-square rounded-lg overflow-hidden focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-600 group">
                <img src="https://picsum.photos/id/1004/300/200" alt="Image showing clouds" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110">
                <div class="absolute inset-0 bg-blue-600/30 dark:bg-blue-800/30 opacity-0 group-focus:opacity-100 group-hover:opacity-100 flex items-center justify-center transition-opacity duration-300">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                  </svg>
                </div>
              </button>
            </div>
            <div class="flex justify-between items-center mt-6">
              <button type="button" class="flex items-center text-sm font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors duration-200">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004 16.087v-2.383m1.342 8.868L9.932 20m5.39-16.712L15.932 4.07m-5.463 8.356L2 10.978L6 6L10 10.978L6 14L2 10.978" />
                </svg>
                New Challenge
              </button>
              <button type="button" class="flex items-center text-sm font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors duration-200">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M19.898 8.016l-3.69-3.69A2.25 2.25 0 0014.545 3H9.455c-.876 0-1.724.35-2.355.981L3.414 8.016m16.484 0l-3.69 3.69-3.69 3.69-3.69-3.69-3.69-3.69m7.38 0L9.454 3c-.876-.35-1.724-.981-2.355-2.355L3.414.016M12 21a9 9 0 100-18 9 9 0 000 18z" />
                </svg>
                Audio Challenge
              </button>
            </div>
          </div>

          <button type="submit" class="w-full py-4 text-lg font-bold bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 text-white rounded-xl shadow-lg transition-all duration-300 transform active:scale-95 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-600">
            Validate Access
            <span class="ml-2 inline-block transition-transform group-hover:translate-x-1">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0zM4 10a1 1 0 011-1h9a1 1 0 110 2H5a1 1 0 01-1-1z" clip-rule="evenodd" />
              </svg>
            </span>
          </button>

        </div>

        <div class="space-y-8">
          <div>
            <h2 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-5">Current Weather Overview</h2>
            <div class="bg-gradient-to-br from-blue-500 to-blue-700 dark:from-blue-700 dark:to-blue-900 rounded-2xl p-6 sm:p-8 text-white shadow-xl transform transition-all duration-300 hover:scale-[1.02]">
              <div class="flex justify-between items-center mb-4">
                <div>
                  <p class="text-5xl font-extrabold">24°C</p>
                  <p class="text-xl font-medium">London</p>
                </div>
                <img src="https://www.flaticon.com/svg/static/icons/svg/861/861056.svg" alt="Sunny icon" class="w-20 h-20 filter drop-shadow-lg">
              </div>
              <div class="grid grid-cols-2 gap-4 text-sm">
                <div class="flex items-center">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
                    <path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                  </svg>
                  <span>Wind: 15 km/h</span>
                </div>
                <div class="flex items-center">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v1m0 16v1m9-9h1M3 12H2m8.006-7.82l-.956-.956M15.82 4.18l.956-.956m-7.82 15.64l-.956.956m7.82-15.64l.956.956m-7.82 15.64l.956.956m-7.82 15.64l-.956.956M4.18 15.82l-.956.956m-1.956-6.75l.956-.956m15.64 7.82l.956.956M4.18 4.18l-.956-.956" />
                  </svg>
                  <span>Humidity: 65%</span>
                </div>
                <div class="flex items-center">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.7L13.257 21a2 2 0 01-3.514 0L6.343 16.7A8 8 0 1117.657 16.7z" />
                  </svg>
                  <span>UV Index: 7 (High)</span>
                </div>
                <div class="flex items-center">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9.663 17h4.673M12 10.333v4.334m-6.75 0h13.5c.621 0 1.125-.504 1.125-1.125V10.5m1.5-4.5h-16.5a1.125 1.125 0 00-1.125 1.125v12.75c0 .621.504 1.125 1.125 1.125h16.5c.621 0 1.125-.504 1.125-1.125V7.875c0-.621-.504-1.125-1.125-1.125z" />
                  </svg>
                  <span>Precipitation: 0%</span>
                </div>
              </div>
            </div>
          </div>

          <div>
            <h2 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-5">Global Climate Data Insights</h2>
            <div class="bg-gray-50 dark:bg-gray-700 rounded-2xl p-6 sm:p-8 shadow-inner border border-gray-100 dark:border-gray-600">
              <div class="flex items-start mb-4">
                <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Climate scientist profile" class="w-16 h-16 rounded-full mr-4 shadow-lg border-2 border-blue-500 dark:border-blue-400">
                <p class="text-gray-700 dark:text-gray-200 text-lg">
                  "Recent data indicates a significant increase in global average temperatures. Urgent action is needed."
                  <br>
                  <span class="font-medium text-blue-600 dark:text-blue-400 text-sm">- Dr. Elara Vance, Climatologist</span>
                </p>
              </div>
              <ul class="list-none space-y-3 text-gray-600 dark:text-gray-300">
                <li class="flex items-center text-base">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M3 6a3 3 0 013-3h10a2 2 0 012 2v8a2 2 0 01-2 2H6a3 3 0 01-3-3V6zm4 0a1 1 0 011-1h2a1 1 0 110 2H8a1 1 0 01-1-1zm1 3a1 1 0 100 2h2a1 1 0 100-2H8z" clip-rule="evenodd" />
                  </svg>
                  Average Global Temperature: <span class="font-semibold ml-1 text-gray-800 dark:text-gray-100">+1.2°C since pre-industrial levels</span>
                </li>
                <li class="flex items-center text-base">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
                    <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
                  </svg>
                  CO2 Concentration: <span class="font-semibold ml-1 text-gray-800 dark:text-gray-100">419 ppm (Parts Per Million)</span>
                </li>
                <li class="flex items-center text-base">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3 text-blue-500" 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.586l-2.293 2.293A1 1 0 0015 13.586V15h3a2 2 0 012 2v2a2 2 0 01-2 2H2a2 2 0 01-2-2v-2a2 2 0 012-2h3.586l2.293-2.293A1 1 0 0010.586 1L1 18.293V18h3.586l2.293-2.293A1 1 0 006 14.586V1h3a2 2 0 012 2v1H6zm4 0V5a1 1 0 00-1-1H9a1 1 0 00-1 1v1h2z" clip-rule="evenodd" />
                  </svg>
                  Sea Level Rise: <span class="font-semibold ml-1 text-gray-800 dark:text-gray-100">~3.6 mm/year</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      <div class="mt-8 pt-6 border-t border-gray-100 dark:border-gray-700 text-center text-gray-500 dark:text-gray-400 text-sm">
        <p>&copy; 2023 ClimateGuard. All rights reserved. Your data security is our priority.</p>
      </div>
    </div>
  </div>
</div>