{% if heroes %}
<section class="franklin-hero" aria-label="Featured herbal products">
  {# Fixed decorative background: this never moves with the slides. #}
  <div class="franklin-hero__backdrop" aria-hidden="true">
    <span class="franklin-hero__leaf franklin-hero__leaf--one"></span>
    <span class="franklin-hero__leaf franklin-hero__leaf--two"></span>
    <span class="franklin-hero__leaf franklin-hero__leaf--three"></span>
    <span class="franklin-hero__leaf franklin-hero__leaf--four"></span>
    <span class="franklin-hero__leaf franklin-hero__leaf--five"></span>
    <span class="franklin-hero__glow franklin-hero__glow--one"></span>
    <span class="franklin-hero__glow franklin-hero__glow--two"></span>
  </div>

  <div id="franklinHeroCarousel"
       class="carousel slide carousel-fade franklin-hero__carousel"
       data-bs-ride="carousel"
       data-bs-interval="6500"
       data-bs-pause="hover"
       data-bs-touch="true">

    <div class="carousel-inner">
      {% for hero in heroes %}
        <article class="carousel-item{% if loop.first %} active{% endif %}">
          <div class="container franklin-hero__container">
            <div class="row align-items-center g-0 franklin-hero__row">

              <div class="col-lg-5 col-xl-5 franklin-hero__copy-column">
                <div class="franklin-hero__content">
                  {% if hero.subtitle %}
                    <div class="franklin-hero__eyebrow">
                      <span class="franklin-hero__eyebrow-leaf" aria-hidden="true"></span>
                      <span>{{ hero.subtitle }}</span>
                    </div>
                  {% endif %}

                  {% if hero.title %}
                    <h1 class="franklin-hero__title">{{ hero.title }}</h1>
                  {% endif %}

                  {% if hero.description %}
                    <div class="franklin-hero__description">{{ hero.description }}</div>
                  {% endif %}

                  {% if (hero.button1_text and hero.button1_link) or (hero.button2_text and hero.button2_link) %}
                    <div class="franklin-hero__actions">
                      {% if hero.button1_text and hero.button1_link %}
                        <a href="{{ hero.button1_link }}" class="btn franklin-hero__button franklin-hero__button--primary">
                          <span>{{ hero.button1_text }}</span>
                          <span class="franklin-hero__button-arrow" aria-hidden="true">→</span>
                        </a>
                      {% endif %}

                      {% if hero.button2_text and hero.button2_link %}
                        <a href="{{ hero.button2_link }}" class="btn franklin-hero__button franklin-hero__button--secondary">
                          <span>{{ hero.button2_text }}</span>
                          <span class="franklin-hero__button-arrow" aria-hidden="true">→</span>
                        </a>
                      {% endif %}
                    </div>
                  {% endif %}
                </div>
              </div>

              <div class="col-lg-7 col-xl-7 franklin-hero__visual-column">
                <div class="franklin-hero__visual">
                  <div class="franklin-hero__visual-halo" aria-hidden="true"></div>
                  <picture>
                    <source media="(max-width: 767.98px)" srcset="{{ hero.mobile_image }}">
                    <img src="{{ hero.desktop_image }}"
                         class="franklin-hero__product-image"
                         alt="{{ hero.title }}"
                         width="1100"
                         height="760"
                         {% if loop.first %}fetchpriority="high"{% else %}loading="lazy"{% endif %}>
                  </picture>
                </div>
              </div>

            </div>
          </div>
        </article>
      {% endfor %}
    </div>

    {% if heroes|length > 1 %}
      <div class="franklin-hero__navigation">
        <button class="franklin-hero__control" type="button" data-bs-target="#franklinHeroCarousel" data-bs-slide="prev" aria-label="Previous slide">
          <span aria-hidden="true">←</span>
        </button>

        <div class="carousel-indicators franklin-hero__indicators">
          {% for hero in heroes %}
            <button type="button"
                    data-bs-target="#franklinHeroCarousel"
                    data-bs-slide-to="{{ loop.index0 }}"
                    {% if loop.first %}class="active" aria-current="true"{% endif %}
                    aria-label="Slide {{ loop.index }}"></button>
          {% endfor %}
        </div>

        <button class="franklin-hero__control" type="button" data-bs-target="#franklinHeroCarousel" data-bs-slide="next" aria-label="Next slide">
          <span aria-hidden="true">→</span>
        </button>
      </div>
    {% endif %}
  </div>
</section>
{% endif %}