<section class="py-32 bg-[#F9F9F9] relative overflow-hidden" id="community">
  <!-- Subtle background elements -->
  <div class="absolute inset-0 bg-gradient-to-br from-white via-[#F9F9F9] to-gray-100"></div>
  <div class="absolute top-0 right-0 w-1/3 h-1/3 bg-gradient-to-bl from-gray-100 to-transparent opacity-70"></div>
  
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
    <div class="max-w-3xl mx-auto">
      <!-- Section header with elegant typography -->
      <div class="text-center mb-16">
        <span class="inline-block text-xs uppercase tracking-widest text-gray-500 mb-3" style="font-family: {{settings.fonts.body}}">Join Our Community</span>
        <h2 class="text-3xl sm:text-4xl font-light text-gray-900 mb-4" style="font-family: {{settings.fonts.heading}}">
          {{sections.community.title}}
        </h2>
        <div class="w-16 h-px bg-gray-300 mx-auto mb-6"></div>
        <p class="text-gray-600 font-light" style="font-family: {{settings.fonts.body}}">
          {{sections.community.subtitle}}
        </p>
      </div>
      
      <!-- Elegant subscription form -->
      <div class="bg-white border border-gray-100 shadow-sm p-10 transition-all duration-300 hover:shadow">
        <form class="space-y-6" id="subscribeForm">
          <div class="text-center mb-2">
            <p class="text-gray-500 font-light text-sm" style="font-family: {{settings.fonts.body}}">
              Enter your email address to receive updates, news and special offers.
            </p>
          </div>
          
          <div class="flex flex-col sm:flex-row gap-4">
            <div class="flex-1">
              <label for="email-input" class="sr-only">Email address</label>
              <input
                id="email-input"
                type="email"
                placeholder="Your email address"
                class="w-full px-6 py-3 bg-white border border-gray-200 focus:border-gray-300 focus:ring-1 focus:ring-gray-300 outline-none text-gray-900 transition-all duration-300 ease-out"
                style="font-family: {{settings.fonts.body}}"
                required
              />
            </div>
            <button
              type="submit"
              class="px-8 py-3 bg-gray-900 text-white font-light tracking-wide uppercase text-sm hover:bg-gray-800 transition-all duration-300 ease-out focus:outline-none focus:ring-1 focus:ring-gray-900 focus:ring-offset-2"
              style="font-family: {{settings.fonts.body}}"
            >
              {{sections.community.cta.label}}
            </button>
          </div>
          
          <div id="subscribeMsg" class="hidden">
            <div class="w-full text-center py-2 text-green-600 font-light text-sm" style="font-family: {{settings.fonts.body}}">
              <svg class="w-5 h-5 inline-block mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
              Thank you for subscribing!
            </div>
          </div>
          
          <div class="pt-4 border-t border-gray-100 text-center">
            <p class="text-xs text-gray-400 font-light" style="font-family: {{settings.fonts.body}}">
              By subscribing, you agree to our Privacy Policy and consent to receive updates from our company.
            </p>
          </div>
        </form>
      </div>
      
      <!-- Additional benefits section -->
      <div class="mt-16 grid grid-cols-1 md:grid-cols-3 gap-8">
        {% set benefits = sections.community.benefits | default([
          {icon: 'ri-mail-line', title: 'Newsletter', description: 'Receive our curated newsletter with the latest updates and exclusive content.'},
          {icon: 'ri-gift-line', title: 'Special Offers', description: 'Get access to special offers, promotions and early-bird discounts.'},
          {icon: 'ri-community-line', title: 'Community Access', description: 'Join our community of like-minded individuals and participate in discussions.'}
        ]) %}
        
        {% for benefit in benefits %}
        <div class="text-center">
          <div class="inline-flex items-center justify-center w-12 h-12 bg-gray-100 text-gray-500 mb-4">
            <i class="{{ benefit.icon }} text-xl"></i>
          </div>
          <h3 class="text-lg font-light text-gray-900 mb-2" style="font-family: {{settings.fonts.heading}}">{{ benefit.title }}</h3>
          <div class="w-8 h-px bg-gray-200 mx-auto mb-3"></div>
          <p class="text-gray-500 text-sm font-light" style="font-family: {{settings.fonts.body}}">{{ benefit.description }}</p>
        </div>
        {% endfor %}
      </div>
    </div>
  </div>
  
  <!-- Success dialog -->
  <div
    id="subscribeDialog"
    class="hidden fixed inset-0 bg-black/50 z-50 flex items-center justify-center backdrop-blur-sm"
    aria-live="polite"
  >
    <div class="bg-white p-10 shadow-lg max-w-md w-full mx-4 border border-gray-100">
      <div class="w-12 h-px bg-gray-300 mb-6"></div>
      <h3 class="text-2xl font-light text-gray-900 mb-4" style="font-family: {{settings.fonts.heading}}">
        Subscribed!
      </h3>
      <p class="text-gray-500 mb-8 font-light" style="font-family: {{settings.fonts.body}}">
        Thank you for joining our community. You'll start receiving updates and special offers soon.
      </p>
      <button
        onclick="document.getElementById('subscribeDialog').classList.add('hidden'); document.getElementById('email-input').focus();"
        class="px-8 py-3 bg-gray-900 text-white font-light tracking-wide uppercase text-sm hover:bg-gray-800 transition-all duration-300 ease-out focus:outline-none focus:ring-1 focus:ring-gray-900 focus:ring-offset-2"
        style="font-family: {{settings.fonts.body}}"
      >
        Close
      </button>
    </div>
  </div>
  
  <script>
    document
      .getElementById("subscribeForm")
      .addEventListener("submit", function (e) {
        e.preventDefault();
        const emailInput = this.querySelector('input[type="email"]');
        const email = emailInput.value.trim();
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (email && emailRegex.test(email)) {
          // Show inline confirmation
          document.getElementById("subscribeMsg").classList.remove("hidden");
          
          // Show dialog
          setTimeout(() => {
            document.getElementById("subscribeDialog").classList.remove("hidden");
          }, 500);
          
          this.reset();
        }
      });
  </script>
</section>