<section id="challenges" class="py-20 bg-white relative">
  <!-- Dotted SVG pattern -->
  <svg
    class="absolute top-0 left-0 w-32 h-32 text-accent/20"
    viewBox="0 0 100 100"
    fill="none"
  >
    <defs>
      <pattern
        id="dots"
        x="0"
        y="0"
        width="6"
        height="6"
        patternUnits="userSpaceOnUse"
      >
        <circle cx="1" cy="1" r="1" fill="currentColor" />
      </pattern>
    </defs>
    <rect width="100" height="100" fill="url(#dots)" />
  </svg>

  <div class="max-w-7xl mx-auto px-6">
    <div class="text-center mb-12" data-aos="zoom-in">
      <h2 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-900">
        {{ sections.challenges.title }}
      </h2>
      <p class="text-gray-600 mt-4 max-w-2xl mx-auto">
        {{ sections.challenges.subtitle }}
      </p>
    </div>

    <div class="columns-1 sm:columns-2 lg:columns-3 gap-6 space-y-6">
      {% for item in sections.challenges.items %}
      <div
        class="break-inside-avoid bg-secondary/5 p-8 rounded-3xl shadow-md hover:shadow-lg transition-shadow duration-300"
        data-aos="flip-left"
      >
        <div
          class="flex items-center justify-center w-14 h-14 bg-{{ item.color }}-100 rounded-full mb-4"
        >
          <i class="{{ item.icon }} text-{{ item.color }}-500 text-2xl"></i>
        </div>
        <h3 class="text-xl font-semibold text-gray-800 mb-2">
          {{ item.label }}
        </h3>
        <p class="text-gray-600">{{ item.value }}</p>
      </div>
      {% endfor %}
    </div>
  </div>
</section>
