<?php
declare(strict_types=1);
/** @var array<int, array<string, mixed>> $banners */
if (!isset($banners) || $banners === []) {
    $banners = home_default_banners();
}
?>
    <!-- hero-area start -->
    <section class="ot-hero-3-area overflow-hidden p-relative">
      <div class="swiper ot-slider"
        data-slider-options='{"loop":true,"effect":"fade","autoHeight":false,"autoplay":{"delay":2800,"disableOnInteraction":false},"thumbs":{"swiper":".thumb-slider2"}}'>
        <div class="swiper-wrapper">
          <?php foreach ($banners as $b):
              $vp = trim((string)($b['video_path'] ?? ''));
              $isVideo = !empty($b['is_video']) && $vp !== '';
              $vMime = match (true) {
                  str_ends_with(strtolower($vp), '.webm') => 'video/webm',
                  str_ends_with(strtolower($vp), '.ogv') => 'video/ogg',
                  default => 'video/mp4',
              };
              ?>
          <div class="swiper-slide">
            <?php if ($isVideo): ?>
            <div class="ot-slider-inner-2 ot-slider-overlay-2 ot-bg-style">
              <video autoplay loop muted>
                <source src="<?= h(img_url($vp)) ?>" type="<?= h($vMime) ?>">
              </video>
            <?php else: ?>
            <div class="ot-slider-inner-2 ot-slider-overlay-2 ot-bg-style"
              data-background="<?= h(img_url($b['image_path'] ?? null)) ?>">
            <?php endif; ?>
              <div class="container">
                <div class="row">
                  <div class="col-xl-9 col-lg-9">
                    <div class="ot-slider-content z-index-3">
                      <h3 class="ot-slider-title mb-15" data-ani="slideinup" data-ani-delay="0.3s">
                        <?= h((string)($b['title'] ?? '')) ?>
                        <?= $b['highlight_html'] ?? '' ?>
                      </h3>
                      <p class="ot-sec-text mb-35 text-white" data-ani="slideinup" data-ani-delay="0.5s"><?= h((string)($b['subtitle'] ?? '')) ?></p>
                      <div class="ot-user-content mb-40 d-sm-flex gap-3 align-items-center" data-ani="slideinup"
                        data-ani-delay="0.7s">
                        <div class="ot-user-imgbox ot-slider-userbox">
                          <span class="ot-user-img">
                            <img src="<?= asset('assets/img/hero/h-user-2-1.png') ?>" alt="hero review">
                          </span>
                          <span class="ot-user-img">
                            <img src="<?= asset('assets/img/hero/h-user-2-2.png') ?>" alt="hero review">
                          </span>
                          <span class="ot-user-img">
                            <img src="<?= asset('assets/img/hero/h-user-2-3.png') ?>" alt="hero review">
                          </span>
                          <div class="ot-user-counter text-white">
                            <p class="purecounter fw-8 text-white mb-0" data-purecounter-duration="1"
                              data-purecounter-end="3">
                              3
                            </p>
                            k
                          </div>
                        </div>
                        <div class="ot-user-rating ot-slider-user-rating">
                          <p class="ot-user-text text-white">
                            <span class="fw-7">4.9</span> (3,2K customer
                            reviews)
                          </p>
                        </div>
                      </div>
                      <a href="contact.php" class="ot-btn-primary" data-ani="slideinup" data-ani-delay="0.9s">let’s
                        talk energy</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <?php endforeach; ?>
        </div>
      </div>
      <div class="ot-slider-thumb-area ot-slider-2-thumb-wrapp z-index-3">
        <div class="swiper ot-slider thumb-slider2 slider-tab"
          data-slider-options='{"loop":true,"autoplay":{"delay":2500,"disableOnInteraction":false},"centeredSlides":true,"slideToClickedSlide":true,"watchSlidesVisibility":true,"watchSlidesProgress":true,"centeredSlidesBounds":true,"spaceBetween":30,"breakpoints":{"768":{"slidesPerView":3},"576":{"slidesPerView":2},"0":{"slidesPerView":1}}}'>
          <div class="swiper-wrapper">
            <?php foreach ($banners as $b): ?>
            <div class="swiper-slide">
              <div class="tab-btn slider-2-thumb-sm">
                <?php home_hero_thumb_markup($b); ?>
              </div>
            </div>
            <?php endforeach; ?>
          </div>
        </div>
      </div>
    </section>
    <!-- hero-area end -->
