<section id="pricing" class="py-24 bg-white relative overflow-hidden">
  <!-- Background elements -->
  <div class="absolute inset-0 bg-gradient-to-br from-blue-50 to-indigo-50 opacity-30"></div>
  <div class="absolute inset-0 overflow-hidden">
    <div class="absolute inset-0 opacity-[0.03]" aria-hidden="true">
      <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <pattern id="pricing-grid" width="40" height="40" patternUnits="userSpaceOnUse">
            <path d="M0 0h40v40H0z" fill="none" />
            <path d="M0 0h1v40H0zm40 0v1H0V0zm0 40h-1V0h1zM0 40v-1h40v1z" fill="currentColor" />
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#pricing-grid)" />
      </svg>
    </div>
  </div>
  
  <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <!-- Section header -->
    <div class="text-center max-w-3xl mx-auto mb-16" data-aos="fade-up">
      {% if sections.pricing.badge %}
      <span class="inline-block px-4 py-1 rounded-full text-sm font-medium bg-indigo-100 text-indigo-700 mb-4">
        {{ sections.pricing.badge }}
      </span>
      {% endif %}
      <h2 class="text-4xl font-bold text-gray-900 mb-4">
        {{ sections.pricing.title }}
      </h2>
      <p class="text-lg text-gray-600 max-w-2xl mx-auto">
        {{ sections.pricing.subtitle }}
      </p>
    </div>
    
    <!-- Billing toggle if available -->
    {% if sections.pricing.billing_options %}
    <div class="flex justify-center mb-12" data-aos="fade-up" data-aos-delay="100">
      <div class="inline-flex items-center bg-gray-100 rounded-full p-1">
        {% for option in sections.pricing.billing_options %}
        <button 
          class="px-6 py-2 rounded-full text-sm font-medium transition-all duration-300 {% if loop.index0 == 0 %}bg-white text-indigo-600 shadow-sm{% else %}text-gray-600 hover:text-indigo-600{% endif %}"
          data-billing-option="{{ option.value }}"
        >
          {{ option.label }}
        </button>
        {% endfor %}
      </div>
    </div>
    {% endif %}
    
    <!-- Pricing plans -->
    <div class="grid md:grid-cols-3 gap-8">
      {% for plan in sections.pricing.plans %}
      <div 
        class="bg-white rounded-2xl shadow-lg border {% if plan.featured %}border-indigo-200 ring-4 ring-indigo-100 relative{% else %}border-gray-100{% endif %} transition-all duration-300 hover:shadow-xl"
        data-aos="fade-up" 
        data-aos-delay="{{ loop.index0 * 100 }}"
      >
        {% if plan.featured %}
        <div class="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
          <span class="inline-block px-4 py-1 rounded-full text-sm font-medium bg-indigo-600 text-white shadow-md">
            {{ plan.featured_label|default('Most Popular') }}
          </span>
        </div>
        {% endif %}
        
        <div class="p-8">
          <!-- Plan header -->
          <div class="text-center mb-8">
            <h3 class="text-2xl font-bold text-gray-900 mb-2">{{ plan.name }}</h3>
            <p class="text-gray-600">{{ plan.description }}</p>
            
            <!-- Price -->
            <div class="mt-6">
              <div class="flex items-center justify-center">
                <span class="text-gray-900 text-4xl font-bold">{{ plan.currency_symbol }}</span>
                <span class="text-gray-900 text-6xl font-bold">{{ plan.price }}</span>
              </div>
              <div class="text-gray-500 mt-1">{{ plan.billing_period }}</div>
            </div>
          </div>
          
          <!-- Features list -->
          <div class="space-y-4 mb-8">
            {% for feature in plan.features %}
            <div class="flex items-start">
              <svg class="w-5 h-5 text-indigo-500 mr-3 flex-shrink-0" 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>
              <span class="text-gray-600">{{ feature }}</span>
            </div>
            {% endfor %}
          </div>
          
          <!-- CTA button -->
          <div class="mt-8">
            <a 
              href="{{ plan.cta_url }}" 
              class="block w-full py-3 px-6 text-center rounded-lg font-medium transition-all duration-300 {% if plan.featured %}bg-indigo-600 text-white hover:bg-indigo-700{% else %}bg-gray-100 text-gray-800 hover:bg-gray-200{% endif %}"
            >
              {{ plan.cta_label }}
            </a>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
    
    <!-- Additional information -->
    {% if sections.pricing.additional_info %}
    <div class="mt-16 text-center" data-aos="fade-up" data-aos-delay="300">
      <div class="max-w-3xl mx-auto">
        <h3 class="text-2xl font-semibold text-gray-900 mb-4">{{ sections.pricing.additional_info.title }}</h3>
        <p class="text-gray-600">{{ sections.pricing.additional_info.description }}</p>
        
        {% if sections.pricing.additional_info.items %}
        <div class="mt-8 grid md:grid-cols-3 gap-6">
          {% for item in sections.pricing.additional_info.items %}
          <div class="bg-gray-50 rounded-lg p-6">
            <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 mx-auto mb-4">
              <i class="{{ item.icon }}" aria-hidden="true"></i>
            </div>
            <h4 class="text-lg font-medium text-gray-900 mb-2">{{ item.title }}</h4>
            <p class="text-gray-600 text-sm">{{ item.description }}</p>
          </div>
          {% endfor %}
        </div>
        {% endif %}
      </div>
    </div>
    {% endif %}
    
    <!-- FAQ section if available -->
    {% if sections.pricing.faq %}
    <div class="mt-16" data-aos="fade-up" data-aos-delay="400">
      <div class="max-w-3xl mx-auto">
        <h3 class="text-2xl font-semibold text-gray-900 mb-8 text-center">{{ sections.pricing.faq.title }}</h3>
        
        <div class="space-y-6">
          {% for item in sections.pricing.faq.items %}
          <div class="bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden">
            <button class="w-full flex items-center justify-between p-6 text-left focus:outline-none" data-accordion-toggle>
              <span class="text-lg font-medium text-gray-900">{{ item.question }}</span>
              <svg class="w-5 h-5 text-gray-500 transform transition-transform duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
              </svg>
            </button>
            <div class="px-6 pb-6 hidden" data-accordion-content>
              <p class="text-gray-600">{{ item.answer }}</p>
            </div>
          </div>
          {% endfor %}
        </div>
      </div>
    </div>
    {% endif %}
  </div>
</section>
