  <section id="pricing" class="py-20"{% if sections.pricing.background.color %} style="background-color: {{ sections.pricing.background.color }};"{% endif %}>
    <div class="container mx-auto px-4">
      <div class="text-center max-w-3xl mx-auto mb-8">
        <h2 class="text-4xl md:text-5xl font-bold mb-4">{{ sections.pricing.title }}</h2>
        <p class="text-lg text-gray-600">{{ sections.pricing.subtitle }}</p>
      </div>
      <div class="flex justify-center items-center mb-12">
        <span class="text-gray-600 mr-3">Monthly</span>
        <label class="relative inline-flex items-center cursor-pointer">
          <input type="checkbox" id="pricing-toggle" class="sr-only peer">
          <div class="w-14 h-7 bg-gray-200 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:border-gray-300 after:border after:rounded-full after:h-6 after:w-6 after:transition-all peer-checked:bg-primary"></div>
          <span class="text-gray-600 ml-3">Yearly <span class="text-xs text-primary font-medium ml-1">Save 20%</span></span>
        </label>
      </div>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
        {% for plan in sections.pricing.plans %}
        <div class="bg-white rounded-lg shadow-sm border{% if plan.highlighted %} border-2 border-primary overflow-hidden transform md:scale-105{% else %} border-gray-100 overflow-hidden{% endif %}">
          {% if plan.highlighted %}
          <div class="absolute top-0 right-0 bg-primary text-white text-xs font-bold px-3 py-1">MOST POPULAR</div>
          {% endif %}
          
          <div class="p-6">
            <h3 class="text-xl font-semibold mb-2">{{ plan.name }}</h3>
            <p class="text-gray-600 mb-4">{{ plan.subtitle }}</p>
            <div class="mb-6">
              <span class="text-4xl font-bold monthly-price">{{ sections.pricing.currency }}{{ plan.price.monthly }}</span>
              <span class="text-4xl font-bold yearly-price hidden">{{ sections.pricing.currency }}{{ plan.price.yearly }}</span>
              <span class="text-gray-500 billing-period">/month</span>
            </div>
            <ul class="space-y-3 mb-6">
              {% for feature in plan.features %}
              <li class="flex items-center">
                <span class="w-5 h-5 flex items-center justify-center text-primary mr-2"><i class="ri-check-line"></i></span>
                <span>{{ feature }}</span>
              </li>
              {% endfor %}
            </ul>
            <a href="{{ plan.cta.url }}" class="group relative block w-full py-4 px-6 text-center font-semibold whitespace-nowrap transition-all duration-300 transform hover:scale-105 hover:shadow-lg focus:outline-none focus:ring-4 focus:ring-primary/20
            {% if plan.highlighted %} 
            bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-xl shadow-md hover:from-blue-700 hover:to-purple-700
            {% else %} 
            bg-white text-primary border-2 border-primary rounded-xl hover:bg-primary hover:text-white
            {% endif %}">
              {{ plan.cta.label }}
              <svg class="w-4 h-4 ml-2 inline-block group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
              </svg>
            </a>
          </div>
        </div>
        {% endfor %}
      </div>
      {% if sections.pricing.customSolution %}
      <div class="mt-12 text-center">
        <p class="text-gray-600 mb-6">{{ sections.pricing.customSolution.description }}</p>
        <a href="{{ sections.pricing.customSolution.url }}" class="group inline-flex items-center px-6 py-3 text-primary font-semibold border-2 border-primary rounded-xl hover:bg-primary hover:text-white transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-primary/20">
          {{ sections.pricing.customSolution.label }}
          <svg class="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
          </svg>
        </a>
      </div>
      {% endif %}
    </div>
  </section>