{% assign section_data = section | default: section_controls.pricing_plans %}
{% assign items = pricing.items | default: pricing | default: pricing_plans %}
{% if items
  and items.size > 0
  or section_data.kicker
  or section_data.title
  or section_data.subtitle
%}
  <section class="section pricing-catalog section-inner-page" data-reveal>
    <div class="container-fluid px-3 px-lg-4">
      <div class="listing-hero-shell listing-hero-shell-wide" style="margin-bottom:24px;">
        <div class="listing-hero-copy">
          {% if section_data.kicker or section_data.title %}
            <span class="eyebrow">{{ section_data.kicker | default: section_data.title }}</span>
          {% endif %}
          {% if section_data.subtitle or section_data.title %}
            <h1>{{ section_data.subtitle | default: section_data.title }}</h1>
          {% endif %}
        </div>
      </div>
      <div class="pricing-catalog-grid">
        {% for plan in items limit: section_data.count %}
          <article class="pricing-card">
            <div class="pricing-card-head">
              {% if plan.tag %}
                <span class="eyebrow">{{ plan.tag }}</span>
              {% endif %}
              <h3>{{ plan.title }}</h3>
              {% if plan.subtitle %}
                <p>{{ plan.subtitle }}</p>
              {% endif %}
            </div>
            <div class="pricing-card-price">
              {{
                plan.primary_price_formatted
                | default: plan.price_formatted
                | default: plan.price
              }}
            </div>
            {% if plan.description %}
              <div class="rich-content">{{ plan.description | raw }}</div>
            {% endif %}
            <ul class="feature-list">
              {% for feature in plan.features %}
                <li>{{ feature }}</li>
              {% endfor %}
            </ul>
            {% if plan.checkout_url or plan.cta_url %}
              <a class="btn btn-primary" href="{{ plan.checkout_url | default: plan.cta_url }}">
                {{ plan.cta_text | default: plan.cta | default: 'Choose plan' }}
              </a>
            {% endif %}
          </article>
        {% endfor %}
      </div>
    </div>
  </section>
{% endif %}