{#
/**
 * Space Video Hero Banner component.
 *
 * Props:
 * - banner_video: Media render array (Media → Video)
 * - title
 * - label
 * - primary_category
 * - secondary_category
 * - modifier_class
 */
#}

{% set primary = primary_category|default('')|trim %}
{% set secondary = secondary_category|default('')|trim %}

{% block video_hero_banner_block %}
<section class="video-banner style-2 ga-hero-banner-2 ga_space_component" role="banner">
  <div class="container relative mx-auto z-20 {{ modifier_class }}">
    <div class="top-content">
      {% if label|render|striptags|trim is not empty %}
        <span class="intro-label">
          {{ label }}
        </span>
      {% endif %}

      {% if primary or secondary %}
        <div class="category-wrapper">
          {% if primary %}
            <span class="primary_category">
              {{ primary }}
            </span>
          {% endif %}

          {% if secondary %}
            <span class="secondary_category">
              {{ secondary }}
            </span>
          {% endif %}
        </div>
      {% endif %}

      {% if title|render|striptags|trim is not empty %}
        <div class="heading max-w-798 mx-auto">
          {% include 'pulse:space-heading' with {
            content: title,
            tag_name: 'h1',
            align: 'none',
            spacing_bottom: 'large',
          } only %}
        </div>
      {% endif %}

      {% if video %}
        <div class="video-wrapper">
          <iframe
            width="560"
            height="315"
            src="{{ video }}"
            title="YouTube video player"
            frameborder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
            allowfullscreen>
          </iframe>
        </div>
      {% endif %}
    </div>
  </div>
</section>
{% endblock %}
