<section
  id="community"
  class="relative pt-40 pb-32 bg-gradient-to-br from-violet-600 via-indigo-700 to-purple-800 overflow-hidden"
>
  <!-- Animated background particles -->
  <div class="absolute inset-0 overflow-hidden pointer-events-none">
    <div class="absolute top-0 left-0 w-full h-full">
      <div class="absolute -top-10 -left-10 w-72 h-72 bg-white/10 rounded-full mix-blend-overlay filter blur-3xl animate-float"></div>
      <div class="absolute top-1/3 right-0 w-96 h-96 bg-pink-500/10 rounded-full mix-blend-overlay filter blur-3xl animate-float-delay"></div>
      <div class="absolute bottom-0 left-1/4 w-80 h-80 bg-indigo-300/10 rounded-full mix-blend-overlay filter blur-3xl animate-float-slow"></div>
    </div>
  </div>

  <!-- Overlap card with glass effect -->
  <div
    class="absolute inset-x-0 top-0 transform -translate-y-1/3 flex justify-center"
  >
    <div
      class="relative bg-white/90 backdrop-blur-sm rounded-3xl shadow-[0_20px_50px_rgba(76,29,149,0.2)] p-8 sm:p-12 w-11/12 md:w-2/3 lg:w-1/2 border border-white/50 overflow-hidden group"
    >
      <!-- Decorative elements -->
      <div class="absolute -top-20 -right-20 w-40 h-40 bg-gradient-to-br from-indigo-400/20 to-purple-400/20 rounded-full filter blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-700"></div>
      <div class="absolute -bottom-20 -left-20 w-40 h-40 bg-gradient-to-br from-violet-400/20 to-fuchsia-400/20 rounded-full filter blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-700"></div>
      
      <!-- Subtle pattern overlay -->
      <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiM5MzNFRkYiIGZpbGwtb3BhY2l0eT0iMC4wMyI+PHBhdGggZD0iTTM2IDM0aDR2NGgtNHptMCA4aDR2NGgtNHptLTh2LTRoNHY0aC00em0wIDhoNHY0aC00em0tOC04aDR2NGgtNHoiLz48L2c+PC9nPjwvc3ZnPg==')] opacity-50"></div>
      
      <div class="relative z-10">
        <!-- Animated badge -->
        <div class="inline-flex items-center px-3 py-1 rounded-full bg-indigo-100 text-indigo-600 text-sm font-medium mb-6 mx-auto">
          <span class="flex h-2 w-2 mr-2">
            <span class="animate-ping absolute inline-flex h-2 w-2 rounded-full bg-indigo-400 opacity-75"></span>
            <span class="relative inline-flex rounded-full h-2 w-2 bg-indigo-500"></span>
          </span>
          Join Our Community
        </div>
        
        <h2 class="text-3xl sm:text-4xl font-bold text-gray-800 text-center mb-4 bg-clip-text text-transparent bg-gradient-to-r from-indigo-800 to-purple-800">
          {{ sections.community.title }}
        </h2>
        
        <p class="text-gray-600 text-center mb-8">
          {{ sections.community.subtitle }}
        </p>
        
        <form
          id="subscribeFormA"
          class="flex flex-col sm:flex-row gap-4 justify-center"
        >
          <div class="relative flex-1 group/input">
            <input
              type="email"
              placeholder="Your email address"
              class="w-full px-6 py-3.5 border border-gray-200 rounded-full focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 transition-all duration-300 bg-white/80 backdrop-blur-sm"
              required
            />
            <div class="absolute inset-0 rounded-full bg-gradient-to-r from-indigo-500/20 to-purple-500/20 opacity-0 group-focus-within/input:opacity-100 transition-opacity duration-300 -z-10"></div>
          </div>
          
          <button
            type="submit"
            class="px-8 py-3.5 bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-semibold rounded-full hover:shadow-lg hover:shadow-indigo-500/25 transition-all duration-300 transform hover:-translate-y-0.5 active:translate-y-0 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
          >
            {{ sections.community.cta.label }}
          </button>
        </form>
        
        <!-- Success message with animation -->
        <div id="subscribeMsgA" class="hidden mt-6 text-center">
          <div class="inline-flex items-center px-4 py-2 bg-green-50 text-green-700 rounded-full">
            <svg class="w-5 h-5 mr-2 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
            <span>Thanks for joining our community!</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Fancy wave with animation -->
  <div
    class="absolute bottom-0 left-0 w-full overflow-hidden leading-none"
  >
    <svg
      class="relative block w-full h-24"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 1200 120"
      preserveAspectRatio="none"
    >
      <path 
        d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" 
        fill="#ffffff"
        opacity=".8"
        class="animate-wave"
      ></path>
      <path 
        d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" 
        fill="#ffffff"
        opacity=".5"
        class="animate-wave animation-delay-500"
      ></path>
      <path 
        d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z" 
        fill="#ffffff"
        class="animate-wave animation-delay-1000"
      ></path>
    </svg>
  </div>
</section>

<style>
  /* Custom animations */
  @keyframes float {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-10px, 10px); }
  }
  
  @keyframes float-delay {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(10px, -10px); }
  }
  
  @keyframes float-slow {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-15px, -10px); }
  }
  
  @keyframes wave {
    0%, 100% { transform: translateX(0) translateY(0); }
    50% { transform: translateX(-25px) translateY(10px); }
  }
  
  .animate-float {
    animation: float 15s ease-in-out infinite;
  }
  
  .animate-float-delay {
    animation: float-delay 18s ease-in-out infinite;
  }
  
  .animate-float-slow {
    animation: float-slow 20s ease-in-out infinite;
  }
  
  .animate-wave {
    animation: wave 15s ease-in-out infinite;
  }
  
  .animation-delay-500 {
    animation-delay: 0.5s;
  }
  
  .animation-delay-1000 {
    animation-delay: 1s;
  }
</style>

<script>
  document
    .getElementById("subscribeFormA")
    .addEventListener("submit", function (e) {
      e.preventDefault();
      const email = this.querySelector('input[type="email"]').value.trim();
      const valid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
      if (valid) {
        const successMsg = document.getElementById("subscribeMsgA");
        successMsg.classList.remove("hidden");
        successMsg.classList.add("animate-fade-in-up");
        this.reset();
      }
    });
</script>