{% assign hero = page.hero_v3 %}

<div class="hero_v3_wrap">
  <div class="hero_wrapper_container">
    <div class="hero_content_main">
      <div class="row align-items-center">
        <div class="col-md-6 mb-4 mb-md-0">
          <h1 class="hero_title mb-4 hero_anim_item">
            {{ hero.t_title }} <span>{{ hero.t_subtitle }}</span>
          </h1>
          <p class="hero_desc mb-4 hero_anim_item">
            {{ hero.t_description }}
          </p>
          {% if hero.cta %}
            <div class="hero_anim_item">
              <a href="{{site.url}}{{ hero.cta.p_link | relative_url }}" class="btn_custom">
                {{ hero.cta.t_text }}
              </a>
            </div>
          {% endif %}
        </div>

        <div class="col-md-6">
          <div class="media_container hero_anim_media">
            <div class="main_image_wrapper">
              
              <video autoplay muted loop playsinline poster="{{ video_poster_path }}" preload="auto" loading="eager" fetchpriority="high">
                <source src="{{ site.url }}/assets/videos/{{ hero.media.p_video }}" type="video/mp4"></source>
              </video>
            </div>

            {% if hero.media.recommendation %}
              <div class="floating_rec_card hero_anim_rec">
                <div class="badge_recommendation">
                  <svg class="custom_svg_icon" viewBox="0 0 24 24">
                    <path d="M12 2L14.4 7.6L20 10L14.4 12.4L12 18L9.6 12.4L4 10L9.6 7.6L12 2Z" />
                  </svg>
                  {{ hero.media.recommendation.badge }}
                </div>
                <p class="rec_text">
                  {{ hero.media.recommendation.text }}
                </p>
              </div>
            {% endif %}

            {% if hero.media.analytics %}
              <div class="floating_analytics_card hero_anim_score">
                <div class="analytics_label">{{ hero.media.analytics.label }}</div>
                <div class="analytics_value">{{ hero.media.analytics.value }}</div>
                <div class="chart_label">{{ hero.media.analytics.chart_label }}</div>
                <div class="mini_chart">
                  {% for bar in hero.media.analytics.bars %}
                    <div class="mini_bar{% if bar.active %} active{% endif %}" style="height: {{ bar.height }}%;"></div>
                  {% endfor %}
                </div>
              </div>
            {% endif %}
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="bottom_curved_wrapper">
    <div class="bottom_shelf_bg"></div>

    <div class="container position-relative">
      <div class="slope_wing slope_left"></div>
      <div class="slope_wing slope_right"></div>

      <div class="stats_card_container">
        <div class="row g-3">
          {% for stat in hero.stats %}
            <div class="col-6 col-lg-3">
              <div class="stat_box hero_anim_stat">
                <div class="stat_icon">
                  {% case stat.icon %}
                    {% when "store" %}
                      <svg viewBox="0 0 24 24"><path d="M4 4h16v2H4V4zm2 4h12v12H6V8zm2 2v8h8v-8H8z"/></svg>
                    {% when "users" %}
                      <svg viewBox="0 0 24 24"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>
                    {% when "clock" %}
                      <svg viewBox="0 0 24 24"><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm4.2 14.2L11 13V7h1.5v5.2l4.5 2.7-.8 1.3z"/></svg>
                    {% when "support" %}
                      <svg viewBox="0 0 24 24"><path d="M12 1a9 9 0 0 0-9 9v7c0 1.66 1.34 3 3 3h3v-8H5v-2c0-3.87 3.13-7 7-7s7 3.13 7 7v2h-4v8h3c1.66 0 3-1.34 3-3v-7a9 9 0 0 0-9-9z"/></svg>
                  {% endcase %}
                </div>
                <div class="stat_number">
                  {% if stat.counter_target %}
                    <span class="stat_counter" data-target="{{ stat.counter_target }}">0</span>{{ stat.suffix }}
                  {% else %}
                    {{ stat.static_value }}
                  {% endif %}
                </div>
                <p class="stat_desc">{{ stat.description }}</p>
              </div>
            </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</div>