{% assign showcase_data = page.ai_showcase %}

<section class="ai_showcase_wrapper" id="ai_showcase_section">
  <div class="header-box anim-header">
    <p class="font-serif sub-title">{{ showcase_data.subtitle }}</p>
    <h2 class="main-title">{{ showcase_data.title }}</h2>
    <p class="desc-text">{{ showcase_data.description }}</p>
  </div>

  <div class="dashboard-container">
    
    <div class="col-stack">
      <div class="metric-card anim-element">
        <div>
          <p class="card-heading">{{ showcase_data.projected_labor.label }}</p>
          <div class="card-value font-serif c-blue">
            <span class="count-num" 
                  data-target="{{ showcase_data.projected_labor.target }}" 
                  data-decimals="{{ showcase_data.projected_labor.decimals }}" 
                  data-prefix="" 
                  data-suffix="{{ showcase_data.projected_labor.suffix }}">0</span>
          </div>
        </div>
        <span class="status-badge">{{ showcase_data.projected_labor.badge }}</span>
      </div>

      <div class="metric-card anim-element">
        <div>
          <p class="card-heading">{{ showcase_data.sales_prediction.label }}</p>
          <div class="card-value font-serif c-dark">
            <span class="count-num" 
                  data-target="{{ showcase_data.sales_prediction.target }}" 
                  data-decimals="{{ showcase_data.sales_prediction.decimals }}" 
                  data-prefix="{{ showcase_data.sales_prediction.prefix }}" 
                  data-suffix="{{ showcase_data.sales_prediction.suffix }}">0</span>
          </div>
        </div>
        <p class="card-note">{{ showcase_data.sales_prediction.note }}</p>
      </div>

      <div class="split-row">
        <div class="metric-card anim-element">
          <p class="card-heading">{{ showcase_data.coverage_score.label }}</p>
          <div class="card-value font-serif c-emerald">
            <span class="count-num" 
                  data-target="{{ showcase_data.coverage_score.target }}" 
                  data-decimals="{{ showcase_data.coverage_score.decimals }}" 
                  data-prefix="" 
                  data-suffix="{{ showcase_data.coverage_score.suffix }}">0</span>
          </div>
          <p class="card-note">{{ showcase_data.coverage_score.note }}</p>
        </div>
        <div class="metric-card anim-element">
          <p class="card-heading">{{ showcase_data.ai_suggestions.label }}</p>
          <div class="card-value font-serif c-blue">
            <span class="count-num" 
                  data-target="{{ showcase_data.ai_suggestions.target }}" 
                  data-decimals="{{ showcase_data.ai_suggestions.decimals }}" 
                  data-prefix="" 
                  data-suffix="{{ showcase_data.ai_suggestions.suffix }}">0</span>
          </div>
          <p class="card-note">{{ showcase_data.ai_suggestions.note }}</p>
        </div>
      </div>
    </div>

    <div class="col-center">
      <div class="center-media anim-element">

          {% assign main_image = '' %}
            {% if showcase_data.center_media.i_image %}
            {% capture main_image %}{% picture direct-url_410 pages/{{showcase_data.center_media.i_image }} %}{% endcapture %} 
            <img src="{{ main_image }}" alt="{{ showcase_data.center_media.i_image | remove: '.png' | replace: '-',' ' | replace: '_',' ' }}" />
          {% endif %}
        
        <div class="glass-box">
          <p class="glass-label">{{ showcase_data.center_media.risk_label }}</p>
          <div class="glass-row">
            <span class="font-serif" style="font-size: 2rem; font-weight: 600;">
              <span class="count-num" 
                    data-target="{{ showcase_data.center_media.risk_target }}" 
                    data-decimals="0" 
                    data-prefix="" 
                    data-suffix="%">0</span>
            </span>
            <div class="track-bg">
              <div class="fill-bar" id="risk-progress-bar" data-width="{{ showcase_data.center_media.risk_target }}%"></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-stack">
      <div class="split-row">
        <div class="metric-card anim-element">
          <p class="card-heading">{{ showcase_data.shift_risk.label }}</p>
          <div class="card-value font-serif c-orange">{{ showcase_data.shift_risk.value }}</div>
          <p class="card-note">{{ showcase_data.shift_risk.note }}</p>
        </div>
        <div class="metric-card anim-element">
          <p class="card-heading">{{ showcase_data.demand_trend.label }}</p>
          <div class="card-value font-serif c-emerald">{{ showcase_data.demand_trend.value }}</div>
          <p class="card-note">{{ showcase_data.demand_trend.note }}</p>
        </div>
      </div>

      <div class="metric-card anim-element">
        <p class="card-heading">{{ showcase_data.heatmap.label }}</p>
        <div class="heatmap-layout">
          {% for row in showcase_data.heatmap.matrix %}
            {% for cell in row %}
              <div class="heatmap-node h-{{ cell }}"></div>
            {% endfor %}
          {% endfor %}
        </div>
      </div>
    </div>

  </div>
</section>