{% assign cap_data = page.ai_schedule_capabilities %}

{% if cap_data %}
<section class="ai-sched-cap-section py-5">
  <div class="container py-4">
    <!-- Header -->
    {% if cap_data.t_title or cap_data.t_title2 or cap_data.t_description or cap_data.t_subtitle %}
    <div class="text-center mb-4">
      {% if cap_data.t_subtitle %}
        <span class="ai-sched-cap-badge mb-2">{{ cap_data.t_subtitle }}</span>
      {% endif %}

      {% if cap_data.t_title or cap_data.t_title2 %}
        <h2 class="display-6 tracking-tight">
          {{ cap_data.t_title }} 
          {% if cap_data.t_title2 %}
            <span>{{ cap_data.t_title2 }}</span>
          {% endif %}
        </h2>
      {% endif %}

      {% if cap_data.t_description %}
        <p class="ai-sched-cap-description text-secondary mx-auto mt-3">
          {{ cap_data.t_description }}
        </p>
      {% endif %}

      <!-- Pill Nav -->
      {% assign has_tab_names = false %}
      {% for tab in cap_data.tabs %}
        {% if tab.name and tab.name != "" %}
          {% assign has_tab_names = true %}
          {% break %}
        {% endif %}
      {% endfor %}

      {% if has_tab_names %}
        <div class="ai-sched-cap-pill-container mt-3" id="aiSchedCapPillTabs">
          {% for tab in cap_data.tabs %}
            {% if tab.name and tab.name != "" %}
              <button 
                type="button" 
                class="ai-sched-cap-tab-btn {% if forloop.first %}active{% endif %}"
                data-target-pane="#ai-sched-tab-{{ forloop.index0 }}">
                {{ tab.name }}
              </button>
            {% endif %}
          {% endfor %}
        </div>
      {% endif %}
    </div>
    {% endif %}

    <!-- Main Dynamic Block -->
    <div class="row g-4 align-items-center justify-content-center mt-2">
      <!-- Left List -->
      <div class="col-md-8">
        <div class="ai-sched-cap-card">
          {% for tab in cap_data.tabs %}
            <div class="ai-sched-cap-tab-group {% if forloop.first %}active{% endif %}" id="ai-sched-tab-{{ forloop.index0 }}">
              {% for item in tab.items %}
                {% capture processed_url %}{% picture direct-url_410 pages/{{ item.i_image }} %}{% endcapture %}
                <div class="ai-sched-cap-row {% if forloop.first and forloop.parentloop.first %}active{% endif %}" 
                     data-img="{{ processed_url | strip }}"
                     data-alt="{{ item.t_title | escape }}">
                  <div class="ai-sched-cap-row-header">
                    {% if item.icon %}{{ item.icon }}{% endif %}
                    {% if item.t_title %}<span>{{ item.t_title }}</span>{% endif %}
                  </div>
                  {% if item.t_description %}
                    <div class="ai-sched-cap-row-desc">
                      {{ item.t_description }}
                    </div>
                  {% endif %}
                </div>
              {% endfor %}
            </div>
          {% endfor %}
        </div>
      </div>

      <!-- Right Image Viewport -->
      <div class="col-md-4">
        <div class="ai-sched-cap-img-wrapper">
          {% assign default_tab = cap_data.tabs | first %}
          {% assign default_item = default_tab.items | first %}
          {% capture first_image_url %}{% picture direct-url_410 pages/{{ default_item.i_image }} %}{% endcapture %}
          <img id="aiSchedCapPreviewImg" 
               src="{{ first_image_url | strip }}" 
               alt="{{ default_item.t_title | escape }}" />
        </div>
      </div>
    </div>
  </div>
</section>
{% endif %}