<section id="community" class="py-32 bg-gradient-to-br from-slate-50 to-gray-100 relative overflow-hidden">
  <!-- Decorative background elements -->
  <div class="absolute inset-0 overflow-hidden pointer-events-none">
    <div class="absolute -top-24 -right-24 w-96 h-96 bg-primary/5 rounded-full"></div>
    <div class="absolute -bottom-24 -left-24 w-96 h-96 bg-primary/5 rounded-full"></div>
    <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-primary/3 rounded-full"></div>
    
    <!-- Subtle grid pattern -->
    <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiMxMTExMTEiIGZpbGwtb3BhY2l0eT0iMC4wMiI+PHBhdGggZD0iTTM2IDM0aDR2NGgtNHptMCA4aDR2NGgtNHptLTh2LTRoNHY0aC00em0wIDhoNHY0aC00em0tOC04aDR2NGgtNHoiLz48L2c+PC9nPjwvc3ZnPg==')] opacity-40"></div>
  </div>

  <div class="max-w-7xl mx-auto px-6 relative z-10">
    <div class="grid lg:grid-cols-2 gap-16 items-center">
      <!-- Text side with enhanced styling -->
      <div class="relative">
        <!-- Decorative accent -->
        <div class="absolute -left-6 top-0 h-full w-1 bg-gradient-to-b from-primary/80 via-primary/50 to-primary/10 rounded-full"></div>
        
        <!-- Badge -->
        <div class="inline-flex items-center px-3 py-1 rounded-full bg-primary/10 text-primary text-sm font-medium mb-6">
          <span class="flex h-2 w-2 mr-2">
            <span class="animate-ping absolute inline-flex h-2 w-2 rounded-full bg-primary opacity-75"></span>
            <span class="relative inline-flex rounded-full h-2 w-2 bg-primary"></span>
          </span>
          Community
        </div>
        
        <h2 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6 leading-tight">
          {{ sections.community.title }}
        </h2>
        
        <p class="text-lg text-gray-600 mb-8 leading-relaxed max-w-xl">
          {{ sections.community.subtitle }}
        </p>
        
        <!-- Features list -->
        <div class="space-y-4 mb-8">
          <div class="flex items-start">
            <div class="flex-shrink-0 h-6 w-6 rounded-full bg-primary/10 flex items-center justify-center mt-1">
              <svg class="h-4 w-4 text-primary" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
              </svg>
            </div>
            <p class="ml-3 text-gray-600">Get exclusive updates and early access to new products</p>
          </div>
          <div class="flex items-start">
            <div class="flex-shrink-0 h-6 w-6 rounded-full bg-primary/10 flex items-center justify-center mt-1">
              <svg class="h-4 w-4 text-primary" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
              </svg>
            </div>
            <p class="ml-3 text-gray-600">Join a community of like-minded enthusiasts</p>
          </div>
          <div class="flex items-start">
            <div class="flex-shrink-0 h-6 w-6 rounded-full bg-primary/10 flex items-center justify-center mt-1">
              <svg class="h-4 w-4 text-primary" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
              </svg>
            </div>
            <p class="ml-3 text-gray-600">Receive special offers and discounts</p>
          </div>
        </div>
      </div>

      <!-- Form card side with enhanced styling -->
      <div class="relative">
        <!-- Multiple decorative elements -->
        <div class="absolute -top-6 -right-6 w-24 h-24 bg-primary/10 rounded-full blur-xl"></div>
        <div class="absolute -bottom-6 -left-6 w-24 h-24 bg-primary/10 rounded-full blur-xl"></div>
        
        <!-- Main card with glass effect -->
        <div class="relative bg-white/80 backdrop-blur-sm p-8 sm:p-10 rounded-3xl shadow-xl border border-white/50">
          <div class="absolute inset-0 bg-gradient-to-br from-white via-white to-primary/5 rounded-3xl"></div>
          
          <!-- Card content -->
          <div class="relative z-10">
            <div class="flex items-center justify-between mb-8">
              <h3 class="text-xl font-bold text-gray-900">Join our newsletter</h3>
              <div class="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center">
                <svg class="h-5 w-5 text-primary" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                </svg>
              </div>
            </div>
            
            <form id="subscribeFormB" class="space-y-5">
              <!-- Fancy input with floating label -->
              <div class="relative">
                <input
                  type="email"
                  id="email"
                  placeholder=" "
                  class="peer w-full px-5 py-4 bg-white/50 backdrop-blur-sm border border-gray-200 rounded-xl focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all duration-300"
                  required
                />
                <label 
                  for="email"
                  class="absolute text-sm text-gray-500 duration-300 transform -translate-y-4 scale-75 top-4 z-10 origin-[0] left-5 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4 peer-focus:text-primary"
                >
                  Enter your email
                </label>
              </div>
              
              <!-- Fancy button with gradient hover effect -->
              <button
                type="submit"
                class="group w-full py-4 bg-primary text-white font-medium rounded-xl hover:shadow-lg hover:shadow-primary/20 transition-all duration-300 relative overflow-hidden"
              >
                <span class="absolute inset-0 w-full h-full bg-gradient-to-r from-primary-light to-primary transition-transform duration-300 transform translate-x-full group-hover:translate-x-0"></span>
                <span class="relative">{{ sections.community.cta.label }}</span>
              </button>
            </form>
            
            <!-- Success message with animation -->
            <div id="subscribeMsgB" class="hidden mt-6 transform transition-all duration-500 opacity-0 translate-y-4" data-success>
              <div class="flex items-center p-4 bg-primary/10 rounded-xl">
                <div class="flex-shrink-0 w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center">
                  <svg class="h-5 w-5 text-primary" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                  </svg>
                </div>
                <div class="ml-3">
                  <p class="text-primary font-medium">🎉 You're in!</p>
                  <p class="text-sm text-gray-600">Thank you for joining our community.</p>
                </div>
              </div>
            </div>
            
            <!-- Privacy note -->
            <p class="mt-6 text-xs text-gray-500 text-center">
              By subscribing, you agree to our Privacy Policy and consent to receive updates.
            </p>
          </div>
        </div>
        
        <!-- Decorative elements -->
        <div class="absolute -top-4 -right-4 w-16 h-16 bg-primary/20 rounded-full animate-pulse"></div>
        <div class="absolute -bottom-4 -left-4 w-16 h-16 bg-primary/20 rounded-full animate-pulse animation-delay-700"></div>
      </div>
    </div>
  </div>
</section>

<style>
  /* Custom animations */
  @keyframes pulse {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 0.5; }
  }
  
  .animate-pulse {
    animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  
  .animation-delay-700 {
    animation-delay: 0.7s;
  }
</style>

<script>
  document
    .getElementById("subscribeFormB")
    .addEventListener("submit", function (e) {
      e.preventDefault();
      const email = this.querySelector("input").value.trim();
      if (/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
        const successMsg = document.getElementById("subscribeMsgB");
        successMsg.classList.remove("hidden");
        // Add a small delay to allow the display:none to be removed before animating
        setTimeout(() => {
          successMsg.classList.remove("opacity-0", "translate-y-4");
        }, 10);
        this.reset();
      }
    });
</script>