@extends('webpages-templates-w029.frontend-public-default', [
    'menu' => 'contact',
  ]
)
@section('view-title', $data->headPageInfo->title)
@section('view-description', $data->headPageInfo->description)
@section('view-keywords', $data->headPageInfo->keywords)
@section('view-robots', $data->headPageInfo->robots)
@section('view-designer', $data->headPageInfo->designer)
@section('view-canonicalURL', $data->headPageInfo->canonicalURL)
@section('view-alternatesURL')
@foreach ($data->headPageInfo->alternatesURL as $langCode => $langURL)
<link rel="alternate" hreflang="{{ $langCode }}" href="{{ $langURL }}"/>
@endforeach
@endsection
@push('styles-head')
<!--<link rel="stylesheet" media="all" type="text/css" href="{{ $data->webpageIdentifier }}.css"/>-->
<!--<link rel="stylesheet" media="all" type="text/css" href="main.css"/>-->
@endpush
@push('scripts-head')
<!--<script type="text/javascript" src="{{ $data->webpageIdentifier }}.js" defer="defer"></script>-->
<!--<script type="text/javascript" src="main.js" defer="defer"></script>-->
<script defer="defer">
  window.addEventListener(`load`, (event) => {
    const carouselId01 = `welcome`; //§ PREFER KEBAB-CASE
    const carouselWelcome = new Swiper(`*[data-carousel-id="${ carouselId01 }"]`, {
//      autoHeight: true,
//      
      slidesPerView: 1,                                           // `auto`
      spaceBetween: 0,                                            // Distance between slides in px. If you use "margin" css property to the elements which go into Swiper in which you pass "spaceBetween" into, navigation might not work properly!
      centeredSlides: true,                                       //
      direction: `horizontal`,                                    // §[ `horizontal` | `vertical` ]§
      effect: `fade`,                                            // §[ `slide` | `fade` | `flip` | `coverflow` | `cube` | `creative` ]§ = Transition effect.
      speed: 300,                                                 // number = Duration of transition between slides (in ms)
      fadeEffect: {
        crossFade: true                                           // boolean = Enables slides cross fade, in order to avoid seeing content behind or underneath.
      },
      flipEffect: {},                                             //
      coverflowEffect: {},                                        //
      cubeEffect: {},                                             //
      creativeEffect: {},                                         //
      preventClicks: true,                                        // boolean = Set to true to prevent accidental unwanted clicks on links during swiping
      preventClicksPropagation: true,                             // boolean = Set to true to stop clicks event propagation on links during swiping
      initialSlide: 0,                                            // number = Index number of initial slide.
      rewind: true,                                               // USE LOOP OR REWIND! NOT BOTH
      loop: false,                                                // USE LOOP OR REWIND! NOT BOTH
      autoplay: {
        delay: 3000,                                              // number = Delay between transitions (in ms). If this parameter is not specified, auto play will be disabled
        disableOnInteraction: true,                               // boolean = Set to false and autoplay will not be disabled after user interactions (swipes), it will be restarted every time after interaction.
        pauseOnMouseEnter: false,                                 // boolean = When enabled autoplay will be paused on pointer (mouse) enter over Swiper container.
        reverseDirection:	false,                                  // boolean = Enables autoplay in reverse direction
        stopOnLastSlide: false,                                   // boolean = Enable this parameter and autoplay will be stopped when it reaches last slide (has no effect in loop mode)
        waitForTransition: true,                                  // boolean = When enabled autoplay will wait for wrapper transition to continue. Can be disabled in case of using Virtual Translate when your slider may not have transition
        // If you need to specify different delay for specific slides you can do it by using data-swiper-autoplay (in ms) attribute on slide: <div class="swiper-slide" data-swiper-autoplay="2000">
      },
      freeMode: {
        enabled: false,                                           // boolean = To enable/disable, indicated to be used with breakpoints or conditions.
        sticky: false,                                            // boolean = To enable/disable snap to slides positions in free mode
        momentum: true,                                           // boolean = If enabled, then slide will keep moving for a while after you release it
        minimumVelocity: 0.02,                                    // number = Minimum touchmove-velocity required to trigger free mode momentum
        momentumRatio: 1,                                         // number = Higher value produces larger momentum distance after you release slider
        momentumVelocityRatio: 1,                                 // number = Higher value produces larger momentum velocity after you release slider
        momentumBounce: true,                                     // boolean = Set to false if you want to disable momentum bounce in free mode
        momentumBounceRatio: 1,                                   // number = Higher value produces larger momentum bounce effect
      },
      allowTouchMove: true,                                       // boolean = If `false`, then the only way to switch the slide is use of external API functions like slidePrev or slideNext
      grabCursor: true,                                           // boolean = This option may improve a little desktop usability. If true, user will see the "grab" cursor when hover on Swiper.
      navigation: {
        enabled: false,                                            // boolean = To enable/disable, indicated to be used with breakpoints or conditions.
        nextEl: `*[data-carousel-control-next-id="${ carouselId01 }"]`, // string = CSS selector
        prevEl: `*[data-carousel-control-prev-id="${ carouselId01 }"]`, // string = CSS selector
        // [...]
      },
      pagination: {
        enabled: true,                                            // boolean = To enable/disable, indicated to be used with breakpoints or conditions.
        el: `*[data-carousel-pagination-id="${ carouselId01 }"]`, // string = CSS selector or HTML element of the container with pagination.
        type: `bullets`,                                         // §[ `progressbar` | `bullets` | `fraction` | `custom` ]§ = Type of pagination.
        clickable: false,                                         // boolean = If true then clicking on pagination button will cause transition to appropriate slide. Only for bullets pagination type!
        clickableClass: 'swiper-pagination-clickable',            // CSS class name set to pagination when it is clickable.
  //      renderBullet: function(index, className) {
  ////        return `<span class="${ className }">${ index + 1 }</span>`;
  //        return `<span class="${ className }"><div>${ index + startingYear }</div><div class="yearLineCall"></div></span>`;
  //      }
//        renderFraction: function (currentClass, totalClass) {
//          return `<span class="${ currentClass }"></span><div class="swiper-pagination-divider"></div><span class="${ totalClass }"></span>`;
//        }
        // [...]
      },
      scrollbar: {
        enabled: false,                                           // boolean = To enable/disable, indicated to be used with breakpoints or conditions.
        el: `*[data-carousel-scrollbar-id="${ carouselId01 }"]`,  // string = CSS selector or HTML element of the container with scrollbar.
        hide: true,                                               // boolean = Hide scrollbar automatically after user interaction.
        draggable: false,                                         // boolean = Set to true to enable make scrollbar draggable that allows you to control slider position.
        snapOnRelease: false,                                     // boolean = Set to true to snap slider position to slides when you release scrollbar.
        dragSize: `auto`,                                         // §[ `auto` | number ]§ = Size of scrollbar draggable element in px.
        scrollbarDisabledClass: `swiper-scrollbar-disabled`,     // string = CSS class name added on swiper container and scrollbar element when scrollbar is disabled by breakpoint.
        lockClass: `swiper-scrollbar-lock`,                       // string = Scrollbar element additional CSS class when it is disabled.
        dragClass: `swiper-scrollbar-drag`,                       // string = Scrollbar draggable element CSS class.
        horizontalClass: `swiper-scrollbar-horizontal`,           // string = CSS class name set to scrollbar in horizontal Swiper.
        verticalClass: `swiper-scrollbar-vertical`,               // string = CSS class name set to scrollbar in vertical Swiper.
      },
//      on: {                                                       // Register event handlers
//        slideChange: someFunction,
//        reachEnd: someFunction,
//      },
//      breakpoints: {                                              // Responsive breakpoints parameters, which override the defaults
//        320: { // when viewport width is >= 320px
//          slidesPerView: 2,
//          spaceBetween: 20,
//          allowTouchMove: true
//        },
//        480: { // when viewport width is >= 480px
//          slidesPerView: 3,
//          spaceBetween: 30,
//          allowTouchMove: true
//        },
//        768: { // when viewport width is >= 768px
//          slidesPerView: 4,
//          spaceBetween: 40,
//          allowTouchMove: true
//        },
//        1024: { // when viewport width is >= 1024px
//          slidesPerView: 4,
//          spaceBetween: 40,
//          allowTouchMove: false
//        },
//        1280: { // when viewport width is >= 1280px
//          slidesPerView: 4,
//          spaceBetween: 40,
//          allowTouchMove: false
//        },
//        1920: { // when viewport width is >= 1920px
//          slidesPerView: 4,
//          spaceBetween: 40,
//          allowTouchMove: false
//        }
//      }
    });
  });
</script>

<script defer="defer">
window.addEventListener(`load`, (event) => {
  const carouselId02 = `company-highlights`; //§ PREFER KEBAB-CASE
  const carouselCompanyHighlights = new Swiper(`*[data-carousel-id="${ carouselId02 }"]`, {
    slidesPerView: 1,                                           // `auto`
    spaceBetween: 0,                                            // Distance between slides in px. If you use "margin" css property to the elements which go into Swiper in which you pass "spaceBetween" into, navigation might not work properly!
    centeredSlides: false,                                      //
    direction: `horizontal`,                                    // §[ `horizontal` | `vertical` ]§
    effect: `slide`,                                            // §[ `slide` | `fade` | `flip` | `coverflow` | `cube` | `creative` ]§ = Transition effect.
    speed: 300,                                                 // number = Duration of transition between slides (in ms)
    fadeEffect: {
      crossFade: true                                           // boolean = Enables slides cross fade, in order to avoid seeing content behind or underneath.
    },
    flipEffect: {},                                             //
    coverflowEffect: {},                                        //
    cubeEffect: {},                                             //
    creativeEffect: {},                                         //
    preventClicks: true,                                        // boolean = Set to true to prevent accidental unwanted clicks on links during swiping
    preventClicksPropagation: true,                             // boolean = Set to true to stop clicks event propagation on links during swiping
    initialSlide: 0,                                            // number = Index number of initial slide.
    rewind: true,                                               // USE LOOP OR REWIND! NOT BOTH
    loop: false,                                                // USE LOOP OR REWIND! NOT BOTH
    autoplay: false, /* {
      delay: 3000,                                              // number = Delay between transitions (in ms). If this parameter is not specified, auto play will be disabled
      disableOnInteraction: true,                               // boolean = Set to false and autoplay will not be disabled after user interactions (swipes), it will be restarted every time after interaction.
      pauseOnMouseEnter: false,                                 // boolean = When enabled autoplay will be paused on pointer (mouse) enter over Swiper container.
      reverseDirection:	false,                                  // boolean = Enables autoplay in reverse direction
      stopOnLastSlide: false,                                   // boolean = Enable this parameter and autoplay will be stopped when it reaches last slide (has no effect in loop mode)
      waitForTransition: true,                                  // boolean = When enabled autoplay will wait for wrapper transition to continue. Can be disabled in case of using Virtual Translate when your slider may not have transition
      // If you need to specify different delay for specific slides you can do it by using data-swiper-autoplay (in ms) attribute on slide: <div class="swiper-slide" data-swiper-autoplay="2000">
    }, */
    freeMode: {
      enabled: false,                                           // boolean = To enable/disable, indicated to be used with breakpoints or conditions.
      sticky: false,                                            // boolean = To enable/disable snap to slides positions in free mode
      momentum: true,                                           // boolean = If enabled, then slide will keep moving for a while after you release it
      minimumVelocity: 0.02,                                    // number = Minimum touchmove-velocity required to trigger free mode momentum
      momentumRatio: 1,                                         // number = Higher value produces larger momentum distance after you release slider
      momentumVelocityRatio: 1,                                 // number = Higher value produces larger momentum velocity after you release slider
      momentumBounce: true,                                     // boolean = Set to false if you want to disable momentum bounce in free mode
      momentumBounceRatio: 1,                                   // number = Higher value produces larger momentum bounce effect
    },
    allowTouchMove: true,                                       // boolean = If `false`, then the only way to switch the slide is use of external API functions like slidePrev or slideNext
    grabCursor: false,                                          // boolean = This option may improve a little desktop usability. If true, user will see the "grab" cursor when hover on Swiper.
    navigation: {
      enabled: true,                                            // boolean = To enable/disable, indicated to be used with breakpoints or conditions.
      nextEl: `*[data-carousel-control-next-id="${ carouselId02 }"]`, // string = CSS selector
      prevEl: `*[data-carousel-control-prev-id="${ carouselId02 }"]`, // string = CSS selector
      // [...]
    },
    pagination: {
      enabled: true,                                            // boolean = To enable/disable, indicated to be used with breakpoints or conditions.
      el: `*[data-carousel-pagination-id="${ carouselId02 }"]`, // string = CSS selector or HTML element of the container with pagination.
      type: `bullets`,                                          // §[ `progressbar` | `bullets` | `fraction` | `custom` ]§ = Type of pagination.
      clickable: true,                                          // boolean = If true then clicking on pagination button will cause transition to appropriate slide. Only for bullets pagination type!
      clickableClass: 'swiper-pagination-clickable',            // CSS class name set to pagination when it is clickable.
//      renderBullet: function(index, className) {
////        return `<span class="${ className }">${ index + 1 }</span>`;
//        return `<span class="${ className }"><div>${ index + startingYear }</div><div class="yearLineCall"></div></span>`;
//      }
      // [...]
    },
    scrollbar: {
      enabled: false,                                            // boolean = To enable/disable, indicated to be used with breakpoints or conditions.
      el: `*[data-carousel-scrollbar-id="${ carouselId02 }"]`,  // string = CSS selector or HTML element of the container with scrollbar.
      hide: true,                                               // boolean = Hide scrollbar automatically after user interaction.
      draggable: false,                                         // boolean = Set to true to enable make scrollbar draggable that allows you to control slider position.
      snapOnRelease: false,                                     // boolean = Set to true to snap slider position to slides when you release scrollbar.
      dragSize: `auto`,                                         // §[ `auto` | number ]§ = Size of scrollbar draggable element in px.
      scrollbarDisabledClass: `swiper-scrollbar-disabled`,     // string = CSS class name added on swiper container and scrollbar element when scrollbar is disabled by breakpoint.
      lockClass: `swiper-scrollbar-lock`,                       // string = Scrollbar element additional CSS class when it is disabled.
      dragClass: `swiper-scrollbar-drag`,                       // string = Scrollbar draggable element CSS class.
      horizontalClass: `swiper-scrollbar-horizontal`,           // string = CSS class name set to scrollbar in horizontal Swiper.
      verticalClass: `swiper-scrollbar-vertical`,               // string = CSS class name set to scrollbar in vertical Swiper.
    },
//    on: {                                                       // Register event handlers
//      slideChange: someFunction,
//      reachEnd: someFunction,
//    },
//    breakpoints: {                                              // Responsive breakpoints parameters, which override the defaults
//      320: { // when viewport width is >= 320px
//        slidesPerView: 2,
//        spaceBetween: 20,
//        allowTouchMove: true
//      },
//      480: { // when viewport width is >= 480px
//        slidesPerView: 3,
//        spaceBetween: 30,
//        allowTouchMove: true
//      },
//      768: { // when viewport width is >= 768px
//        slidesPerView: 4,
//        spaceBetween: 40,
//        allowTouchMove: true
//      },
//      1024: { // when viewport width is >= 1024px
//        slidesPerView: 4,
//        spaceBetween: 40,
//        allowTouchMove: false
//      },
//      1280: { // when viewport width is >= 1280px
//        slidesPerView: 4,
//        spaceBetween: 40,
//        allowTouchMove: false
//      },
//      1920: { // when viewport width is >= 1920px
//        slidesPerView: 4,
//        spaceBetween: 40,
//        allowTouchMove: false
//      }
//    }
  });
});
</script>
<script defer="defer">
let carouselSuppliers = null;
  
window.addEventListener(`load`, (event) => {
  const carouselId03 = `suppliers`; //§ PREFER KEBAB-CASE
//  const carouselSuppliers = new Swiper(`*[data-carousel-id="${ carouselId03 }"]`, {
  carouselSuppliers = new Swiper(`*[data-carousel-id="${ carouselId03 }"]`, {
    slidesPerView: `auto`,                                           // `auto`
    spaceBetween: 25,                                            // Distance between slides in px. If you use "margin" css property to the elements which go into Swiper in which you pass "spaceBetween" into, navigation might not work properly!
    centeredSlides: true,                                      //
    direction: `horizontal`,                                    // §[ `horizontal` | `vertical` ]§
    effect: `slide`,                                            // §[ `slide` | `fade` | `flip` | `coverflow` | `cube` | `creative` ]§ = Transition effect.
    speed: 300,                                                 // number = Duration of transition between slides (in ms)
    fadeEffect: {
      crossFade: true                                           // boolean = Enables slides cross fade, in order to avoid seeing content behind or underneath.
    },
    flipEffect: {},                                             //
    coverflowEffect: {},                                        //
    cubeEffect: {},                                             //
    creativeEffect: {},                                         //
    preventClicks: true,                                        // boolean = Set to true to prevent accidental unwanted clicks on links during swiping
    preventClicksPropagation: true,                             // boolean = Set to true to stop clicks event propagation on links during swiping
    initialSlide: 0,                                            // number = Index number of initial slide.
    rewind: false,                                               // USE LOOP OR REWIND! NOT BOTH
    loop: true,                                                // USE LOOP OR REWIND! NOT BOTH
    autoplay: false, /* {
      delay: 3000,                                              // number = Delay between transitions (in ms). If this parameter is not specified, auto play will be disabled
      disableOnInteraction: true,                               // boolean = Set to false and autoplay will not be disabled after user interactions (swipes), it will be restarted every time after interaction.
      pauseOnMouseEnter: false,                                 // boolean = When enabled autoplay will be paused on pointer (mouse) enter over Swiper container.
      reverseDirection:	false,                                  // boolean = Enables autoplay in reverse direction
      stopOnLastSlide: false,                                   // boolean = Enable this parameter and autoplay will be stopped when it reaches last slide (has no effect in loop mode)
      waitForTransition: true,                                  // boolean = When enabled autoplay will wait for wrapper transition to continue. Can be disabled in case of using Virtual Translate when your slider may not have transition
      // If you need to specify different delay for specific slides you can do it by using data-swiper-autoplay (in ms) attribute on slide: <div class="swiper-slide" data-swiper-autoplay="2000">
    }, */
    freeMode: {
      enabled: false,                                           // boolean = To enable/disable, indicated to be used with breakpoints or conditions.
      sticky: true,                                            // boolean = To enable/disable snap to slides positions in free mode
      momentum: false,                                           // boolean = If enabled, then slide will keep moving for a while after you release it
      minimumVelocity: 0.02,                                    // number = Minimum touchmove-velocity required to trigger free mode momentum
      momentumRatio: 1,                                         // number = Higher value produces larger momentum distance after you release slider
      momentumVelocityRatio: 1,                                 // number = Higher value produces larger momentum velocity after you release slider
      momentumBounce: true,                                     // boolean = Set to false if you want to disable momentum bounce in free mode
      momentumBounceRatio: 1,                                   // number = Higher value produces larger momentum bounce effect
    },
    allowTouchMove: true,                                       // boolean = If `false`, then the only way to switch the slide is use of external API functions like slidePrev or slideNext
    grabCursor: false,                                          // boolean = This option may improve a little desktop usability. If true, user will see the "grab" cursor when hover on Swiper.
    navigation: {
      enabled: true,                                            // boolean = To enable/disable, indicated to be used with breakpoints or conditions.
      nextEl: `*[data-carousel-control-next-id="${ carouselId03 }"]`, // string = CSS selector
      prevEl: `*[data-carousel-control-prev-id="${ carouselId03 }"]`, // string = CSS selector
      // [...]
    },
    pagination: {
      enabled: false,                                            // boolean = To enable/disable, indicated to be used with breakpoints or conditions.
      el: `*[data-carousel-pagination-id="${ carouselId03 }"]`, // string = CSS selector or HTML element of the container with pagination.
      type: `bullets`,                                          // §[ `progressbar` | `bullets` | `fraction` | `custom` ]§ = Type of pagination.
      clickable: false,                                         // boolean = If true then clicking on pagination button will cause transition to appropriate slide. Only for bullets pagination type!
      clickableClass: 'swiper-pagination-clickable',            // CSS class name set to pagination when it is clickable.
//      renderBullet: function(index, className) {
////        return `<span class="${ className }">${ index + 1 }</span>`;
//        return `<span class="${ className }"><div>${ index + startingYear }</div><div class="yearLineCall"></div></span>`;
//      }
      // [...]
    },
    scrollbar: {
      enabled: false,                                            // boolean = To enable/disable, indicated to be used with breakpoints or conditions.
      el: `*[data-carousel-scrollbar-id="${ carouselId03 }"]`,  // string = CSS selector or HTML element of the container with scrollbar.
      hide: true,                                               // boolean = Hide scrollbar automatically after user interaction.
      draggable: false,                                         // boolean = Set to true to enable make scrollbar draggable that allows you to control slider position.
      snapOnRelease: false,                                     // boolean = Set to true to snap slider position to slides when you release scrollbar.
      dragSize: `auto`,                                         // §[ `auto` | number ]§ = Size of scrollbar draggable element in px.
      scrollbarDisabledClass: `swiper-scrollbar-disabled`,     // string = CSS class name added on swiper container and scrollbar element when scrollbar is disabled by breakpoint.
      lockClass: `swiper-scrollbar-lock`,                       // string = Scrollbar element additional CSS class when it is disabled.
      dragClass: `swiper-scrollbar-drag`,                       // string = Scrollbar draggable element CSS class.
      horizontalClass: `swiper-scrollbar-horizontal`,           // string = CSS class name set to scrollbar in horizontal Swiper.
      verticalClass: `swiper-scrollbar-vertical`,               // string = CSS class name set to scrollbar in vertical Swiper.
    },
    on: {                                                       // Register event handlers
      slideChange: updateSectionBackground,
//      slideChange: updateSectionBackground(),
//      reachEnd: someFunction,
    },
    breakpoints: {                                              // Responsive breakpoints parameters, which override the defaults
//      320: { // when viewport width is >= 320px
//        slidesPerView: 2,
//        spaceBetween: 20,
//        allowTouchMove: true
//      },
//      480: { // when viewport width is >= 480px
//        slidesPerView: 3,
//        spaceBetween: 30,
//        allowTouchMove: true
//      },
//      768: { // when viewport width is >= 768px
//        slidesPerView: 4,
//        spaceBetween: 40,
//        allowTouchMove: true
//      },
      1024: { // when viewport width is >= 1024px
        slidesPerView: 4,
        spaceBetween: 50,
        allowTouchMove: false
      },
//      1280: { // when viewport width is >= 1280px
//        slidesPerView: 4,
//        spaceBetween: 40,
//        allowTouchMove: false
//      },
//      1920: { // when viewport width is >= 1920px
//        slidesPerView: 4,
//        spaceBetween: 40,
//        allowTouchMove: false
//      }
    }
  });
});

// Get the section element whose background you want to change
const targetSection = document.querySelector('section.suppliers');

// Define your background images (only 3 in this case)
const backgroundImages = [
  'url("/assets-audiotec/images/piero-smart-home-remote-control.1920x532.jpg")',
  'url("/assets-audiotec/images/jl-audio-e-sub-e110-subwoofer-living-room.1920x532.jpg")',
  'url("/assets-audiotec/images/bowers-wilkins-800-series-diamond-tweeter-close-up.1920x532.jpg")',
];

// Function to update the background image
//function updateSectionBackground() {
//  // Get the current active slide index (realIndex is crucial for loop mode)
//  const activeSlideRealIndex = carouselSuppliers.realIndex ?? 0;
//
//  // Calculate the index for the background image using the modulo operator
//  // This will cycle through the backgroundImages array:
//  // 0 % 3 = 0
//  // 1 % 3 = 1
//  // 2 % 3 = 2
//  // 3 % 3 = 0
//  // 4 % 3 = 1
//  // 5 % 3 = 2
//  // 6 % 3 = 0
//  // etc.
//  const backgroundImageIndex = activeSlideRealIndex % backgroundImages.length;
//
//  // Set the background image based on the calculated index
//  targetSection.style.backgroundImage = backgroundImages[backgroundImageIndex];
//  targetSection.style.backgroundSize = 'cover';         // Optional: cover the entire section
//  targetSection.style.backgroundPosition = 'center center'; // Optional: center the background
//  targetSection.style.transition = 'background-image 0.5s ease-in-out'; // Optional: smooth transition
//}
function updateSectionBackground() {
  // Check if carouselSuppliers is a valid Swiper instance
  if (carouselSuppliers && carouselSuppliers.realIndex !== undefined) {
    // Get the current active slide index (realIndex is crucial for loop mode)
    const activeSlideRealIndex = carouselSuppliers.realIndex;

    // Calculate the index for the background image using the modulo operator
    // This will cycle through the backgroundImages array:
    // 0 % 3 = 0
    // 1 % 3 = 1
    // 2 % 3 = 2
    // 3 % 3 = 0
    // 4 % 3 = 1
    // 5 % 3 = 2
    // 6 % 3 = 0
    // etc.
    const backgroundImageIndex = activeSlideRealIndex % backgroundImages.length;

    // Set the background image based on the calculated index
//    targetSection.style.backgroundImage = backgroundImages[backgroundImageIndex];
    document.querySelector('section.suppliers').style.backgroundImage = backgroundImages[backgroundImageIndex];
  } else {
    // Optionally, handle the case where carouselSuppliers is not ready
    console.warn("Swiper instance (carouselSuppliers) is not ready or not found.");
  }
}

// Initial background set when the page loads
//updateSectionBackground();

// Listen for Swiper's 'slideChange' event
//carouselSuppliers.on('slideChange', function () {
//  updateSectionBackground();
//});

// Remember to also add this CSS for a smooth transition:
/*
.your-section-class {
  transition: background-image 0.5s ease-in-out;
}
*/
</script>
@endpush
@section('webpage-structure')
<main>
  <h1 style="display: none">Audiotec Caxias</h1>
  <section class="swiper" data-carousel-id="welcome">
    <h2 style="display: none"></h2>
    <div class="swiper-wrapper">
      @foreach ($contentCarouselWelcome as $key => $slide)
      <div class="swiper-slide">
        <div class="slide-caption">
          <h3>{!! $slide->heading !!}</h3>
          <p>{!! $slide->paragraph !!}</p>
          <a class="" target="_self" rel="" href="{!! $slide->ctaDestination !!}">{!! $slide->ctaAnchorText !!}</a>
        </div>
        <div class="slide-media">
          @if (pathinfo($slide->media->src, PATHINFO_EXTENSION) == "mp4")
<!-- Use the subtag "zxx" when the text is known to be not in any language: lang="zxx" -->
          <video id="" class="slide-media" lang="§"
                 preload="auto" crossorigin="anonymous"
                 width="{!! $slide->media->mediaWidth !!}" height="{!! $slide->media->mediaHeight !!}"
                 poster="{!! $slide->media->poster !!}"
                 playsinline="playsinline" loop="loop" autoplay="autoplay" muted="muted">
            <source lang="§" type="video/mp4" src="{!! $slide->media->src !!}"/>
          </video>
          @else
          <picture id="" class="slide-media">
            <img id="" class="" alt=""
                 crossorigin="anonymous" referrerpolicy="strict-origin-when-cross-origin"
                 decoding="auto" loading="lazy" fetchpriority="auto"
                 width="{!! $slide->media->mediaWidth !!}" height="{!! $slide->media->mediaHeight !!}" sizes=""
                 srcset="{!! $slide->media->srcSet !!}"
                 src="{!! $slide->media->src !!}"/>
          </picture>
          @endif
        </div>
      </div>
      @endforeach
    </div>
<!--    <div class="swiper-button-prev" data-carousel-control-prev-id="welcome"></div>-->
<!--    <div class="swiper-button-next" data-carousel-control-next-id="welcome"></div>-->
    <div class="swiper-pagination" data-carousel-pagination-id="welcome"></div>
<!--    <div class="swiper-scrollbar" data-carousel-scrollbar-id="welcome"></div>-->
  </section>
  <section class="home-automation service presentation">
    <h2><strong>Automação</strong> do Projeto ao Produto</h2>
    <p>Design excepcional, tecnologia de ponta e todo o conforto que você merece! Ao escolher a Audiotec, conectamos você às melhores marcas do mercado. Entregamos aos nossos clientes uma experiência completa em high-end, com projetos exclusivos que transformam ambientes e momentos com alta performance.</p>
  </section>
  <section class="swiper" data-carousel-id="company-highlights">
    <h2 style="display: none"></h2>
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <h3>Paixão por Áudio e Vídeo</h3>
        <p>Somos apaixonados por cinema, obcecados em encontrar a sintonia perfeita e dedicados a levar alta performance em tecnologia aos nossos clientes.</p>
        <picture id="" class="">
          <img id="" class="" alt=""
               crossorigin="anonymous" referrerpolicy="strict-origin-when-cross-origin"
               decoding="auto" loading="lazy" fetchpriority="auto"
               width="1920" height="375" sizes=""
               srcset="/assets-audiotec/images/bowers-wilkins-speaker-close-up.1920x375.jpg 1920w,
                       /assets-audiotec/images/bowers-wilkins-speaker-close-up.3840x750.jpg 3840w"
               src="/assets-audiotec/images/bowers-wilkins-speaker-close-up.1920x375.jpg"/>
        </picture>
      </div>
      <div class="swiper-slide">
        <h3>Revenda Som Maior</h3>
        <p>Referência no Estado, atuamos como revenda autorizada da Som Maior há mais de 25 anos. Uma parceria que dá o tom à qualidade do nosso trabalho.</p>
        <picture id="" class="">
          <img id="" class="" alt=""
               crossorigin="anonymous" referrerpolicy="strict-origin-when-cross-origin"
               decoding="auto" loading="lazy" fetchpriority="auto"
               width="1920" height="375" sizes=""
               srcset="/assets-audiotec/images/audiotec-caxias-store-facade.1920x375.jpg 1920w,
                       /assets-audiotec/images/audiotec-caxias-store-facade.3840x750.jpg 3840w"
               src="/assets-audiotec/images/audiotec-caxias-store-facade.1920x375.jpg"/>
        </picture>
      </div>
      <div class="swiper-slide">
        <h3>Atendimento Afinado</h3>
        <p>Somos reconhecidos pela excelência do projeto ao pós-venda. Atuamos com proximidade junto aos nossos fornecedores, garantindo manutenção segura e atualizações de sistemas e equipamentos.</p>
        <picture id="" class="">
          <img id="" class="" alt=""
               crossorigin="anonymous" referrerpolicy="strict-origin-when-cross-origin"
               decoding="auto" loading="lazy" fetchpriority="auto"
               width="1920" height="375" sizes=""
               srcset="/assets-audiotec/images/som-maior-logo-on-audio-background.1920x375.jpg 1920w,
                       /assets-audiotec/images/som-maior-logo-on-audio-background.3840x750.jpg 3840w"
               src="/assets-audiotec/images/som-maior-logo-on-audio-background.1920x375.jpg"/>
        </picture>
      </div>
      <div class="swiper-slide">
        <h3>Exclusivo para Você</h3>
        <p>Assinamos mais de mil projetos que transformam ambientes em todo o Brasil. Da movelaria ao cabeamento, do contato com o arquiteto à seleção dos equipamentos, todos os projetos são personalizados.</p>
        <picture id="" class="">
          <img id="" class="" alt=""
               crossorigin="anonymous" referrerpolicy="strict-origin-when-cross-origin"
               decoding="auto" loading="lazy" fetchpriority="auto"
               width="1920" height="375" sizes=""
               srcset="/assets-audiotec/images/bowers-wilkins-802d2-speakers.1920x375.jpg 1920w,
                       /assets-audiotec/images/bowers-wilkins-802d2-speakers.3840x750.jpg 3840w"
               src="/assets-audiotec/images/bowers-wilkins-802d2-speakers.1920x375.jpg"/>
        </picture>
      </div>
    </div>
    <div class="swiper-button-prev" data-carousel-control-prev-id="company-highlights"></div>
    <div class="swiper-button-next" data-carousel-control-next-id="company-highlights"></div>
    <div class="swiper-pagination" data-carousel-pagination-id="company-highlights"></div>
<!--    <div class="swiper-scrollbar" data-carousel-scrollbar-id="company-highlights"></div>-->
  </section>
  <section class="layout-split">
    <h2 style="display: none"></h2>
    <div class="layout-split">
      <h3>Automação</h3>
      <p>Deixe para a tecnologia resolver! Nossos projetos de automação inteligente dão mais liberdade para você aproveitar a vida com conforto. Com nós, o projeto é completamente personalizado.</p>
      <picture id="" class="">
        <img id="" class="" alt=""
             crossorigin="anonymous" referrerpolicy="strict-origin-when-cross-origin"
             decoding="auto" loading="lazy" fetchpriority="auto"
             width="513" height="251" sizes=""
             srcset="/assets-audiotec/images/home-automation-system-touchscreen.513x251.jpg 513w,
                     /assets-audiotec/images/home-automation-system-touchscreen.1026x502.jpg 1026w"
             src="/assets-audiotec/images/home-automation-system-touchscreen.513x251.jpg"/>
      </picture>
    </div>
    <div class="layout-split">
      <h3>Infraestrutura</h3>
      <p>Ambientes mais organizados e equipamentos seguros! Com sistemas de cabeamento centralizados, você tem manutenção simplificada e tecnologia protegida.</p>
      <picture id="" class="">
        <img id="" class="" alt=""
             crossorigin="anonymous" referrerpolicy="strict-origin-when-cross-origin"
             decoding="auto" loading="lazy" fetchpriority="auto"
             width="513" height="251" sizes=""
             srcset="/assets-audiotec/images/audiotec-caxias-bowers-wilkins-700-series-speakers.513x251.jpg 513w,
                     /assets-audiotec/images/audiotec-caxias-bowers-wilkins-700-series-speakers.1026x502.jpg 1026w"
             src="/assets-audiotec/images/audiotec-caxias-bowers-wilkins-700-series-speakers.513x251.jpg"/>
      </picture>
    </div>
    <div class="layout-split">
      <h3>Audiovisual</h3>
      <p>Equipamentos de tecnologia High Fidelity que garantem máxima fidelidade de som e imagem. Transforme qualquer ambiente em uma sala de cinema ou no show do seu artista favorito. Descubra todas as marcas parceiras e selecione a que se adequa ao seu projeto.</p>
      <picture id="" class="">
        <img id="" class="" alt=""
             crossorigin="anonymous" referrerpolicy="strict-origin-when-cross-origin"
             decoding="auto" loading="lazy" fetchpriority="auto"
             width="513" height="251" sizes=""
             srcset="/assets-audiotec/images/person-watching-home-teather.513x251.jpg 513w,
                     /assets-audiotec/images/person-watching-home-teather.1026x502.jpg 1026w"
             src="/assets-audiotec/images/person-watching-home-teather.513x251.jpg"/>
      </picture>
    </div>
    <div class="layout-split">
      <h3>Acervo de Seminovos</h3>
      <p>Uma excelente opção de custo-benefício para quem deseja investir em equipamentos de áudio e vídeo high-end ou se desfazer um item de alto desempenho. Contamos com um acervo completo das melhores marcas do mercado.</p>
      <picture id="" class="">
        <img id="" class="" alt=""
             crossorigin="anonymous" referrerpolicy="strict-origin-when-cross-origin"
             decoding="auto" loading="lazy" fetchpriority="auto"
             width="513" height="251" sizes=""
             srcset="/assets-audiotec/images/marantz-amplifier-audio-equipment.513x251.jpg 513w,
                     /assets-audiotec/images/marantz-amplifier-audio-equipment.1026x502.jpg 1026w"
             src="/assets-audiotec/images/marantz-amplifier-audio-equipment.513x251.jpg"/>
      </picture>
    </div>
  </section>
  <section class="suppliers">
    <h2>Revenda Oficial das Marcas que São Referência</h2>
    <div class="swiper" data-carousel-id="suppliers">
      <div class="swiper-wrapper">
        @foreach ($contentSuppliers as $key => $slide)
        <div class="swiper-slide">
          <picture id="" class="slide-media">
            <img id="" class="" alt=""
                 crossorigin="anonymous" referrerpolicy="strict-origin-when-cross-origin"
                 decoding="auto" loading="lazy" fetchpriority="auto"
                 width="{!! $slide->media->mediaWidth !!}" height="{!! $slide->media->mediaHeight !!}" sizes=""
                 srcset="{!! $slide->media->srcSet !!}"
                 src="{!! $slide->media->src !!}"/>
          </picture>
        </div>
        @endforeach
      </div>
      <div class="swiper-button-prev" data-carousel-control-prev-id="suppliers"></div>
      <div class="swiper-button-next" data-carousel-control-next-id="suppliers"></div>
<!--      <div class="swiper-pagination" data-carousel-pagination-id="suppliers"></div>-->
<!--      <div class="swiper-scrollbar" data-carousel-scrollbar-id="suppliers"></div>-->
    </div>
  </section>
  <section class="swiper" data-carousel-id="company-highlights">
    <h2 style="display: none"></h2>
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <h3>Faça um Upgrade</h3>
        <p>Seu equipamento antigo Audiotec é altamente valorizado na substituição por um novo. Atualize seu sistema high-end com a gente, aproveite para conhecer opções que se encaixam no orçamento do seu projeto.</p>
        <picture id="" class="">
          <img id="" class="" alt=""
               crossorigin="anonymous" referrerpolicy="strict-origin-when-cross-origin"
               decoding="auto" loading="lazy" fetchpriority="auto"
               width="1920" height="375" sizes=""
               srcset="/assets-audiotec/images/projector-home-theater-setup.1920x375.jpg 1920w,
                       /assets-audiotec/images/projector-home-theater-setup.3840x750.jpg 3840w"
               src="/assets-audiotec/images/projector-home-theater-setup.1920x375.jpg"/>
        </picture>
      </div>
      <div class="swiper-slide">
        <h3>Sonorização de Ambientes</h3>
        <p>Tenha um sistema de áudio multiroom onde precisar. Somos especialistas na sonorização de ambientes corporativos e residenciais. Das salas de reuniões aos cinemas, da sala de TV aos ginásios, conte com o afinamento no nosso atendimento.</p>
        <picture id="" class="">
          <img id="" class="" alt=""
               crossorigin="anonymous" referrerpolicy="strict-origin-when-cross-origin"
               decoding="auto" loading="lazy" fetchpriority="auto"
               width="1920" height="375" sizes=""
               srcset="/assets-audiotec/images/bowers-wilkins-home-theater-speakers.1920x375.jpg 1920w,
                       /assets-audiotec/images/bowers-wilkins-home-theater-speakers.3840x750.jpg 3840w"
               src=""/>
        </picture>
      </div>
    </div>
    <div class="swiper-button-prev" data-carousel-control-prev-id="company-highlights"></div>
    <div class="swiper-button-next" data-carousel-control-next-id="company-highlights"></div>
    <div class="swiper-pagination" data-carousel-pagination-id="company-highlights"></div>
<!--    <div class="swiper-scrollbar" data-carousel-scrollbar-id="company-highlights"></div>-->
  </section>
  <section class="home-automation service highlights">
    <h2>Funcionalidades que Melhoram<br/>a Maneira como Você Vive</h2>
    <div class="home-automation highlight universality">
      <h3>Você imaginou, nós automatizamos!</h3>
      <p>A sua imaginação é o limite para a automação. Não perca tempo ligando e desligando interruptores, ajustando termostatos ou se preocupando com trancas de portas, deixe que dispositivos inteligentes cuidem disso de forma automática.</p>
      <picture id="" class="" style="display: none">
        <img id="" class="" alt=""
             crossorigin="anonymous" referrerpolicy="strict-origin-when-cross-origin"
             decoding="auto" loading="lazy" fetchpriority="auto"
             width="533" height="307" sizes=""
             srcset="/assets-audiotec/images/digital-door-lock-keypad-entry.533x307.jpg 533w,
                     /assets-audiotec/images/digital-door-lock-keypad-entry.1066x613.jpg 1066w"
             src="/assets-audiotec/images/digital-door-lock-keypad-entry.533x307.jpg"/>
      </picture>
    </div>
    <div class="home-automation highlight application">
      <h3>Personalize o app do seu jeito</h3>
      <p>Um app de automação totalmente configurável. Inclua fotos dos ambientes, selecione os controles favoritos, crie ícones personalizados e muito mais.</p>
      <picture id="" class="" style="display: none">
        <img id="" class="" alt=""
             crossorigin="anonymous" referrerpolicy="strict-origin-when-cross-origin"
             decoding="auto" loading="lazy" fetchpriority="auto"
             width="386" height="393" sizes=""
             srcset="/assets-audiotec/images/woman-using-smartphone-app.386x393.jpg 386w,
                     /assets-audiotec/images/woman-using-smartphone-app.771x785.jpg 771w"
             src="/assets-audiotec/images/woman-using-smartphone-app.386x393.jpg"/>
      </picture>
    </div>
    <div class="home-automation highlight setup">
      <h3>Configuração simplificada</h3>
      <p>O aplicativo de automação permite quantos usuários você quiser incluir. A família completa pode cuidar dos acionamentos e o melhor: configure para um usuário e compartilhe as definições com os demais!</p>
      <picture id="" class="" style="display: none">
        <img id="" class="" alt=""
             crossorigin="anonymous" referrerpolicy="strict-origin-when-cross-origin"
             decoding="auto" loading="lazy" fetchpriority="auto"
             width="533" height="345" sizes=""
             srcset="/assets-audiotec/images/smart-lighting-app-control-phone.533x345.jpg 533w,
                     /assets-audiotec/images/smart-lighting-app-control-phone.1066x690.jpg 1066w"
             src="/assets-audiotec/images/smart-lighting-app-control-phone.533x345.jpg"/>
      </picture>
    </div>
    <div class="home-automation highlight support">
      <h3>Assistência remota</h3>
      <p>Para quem preza por privacidade, a manutenção e ajustes finos do seu sistema podem ser feitos à distância.</p>
      <picture id="" class="" style="display: none">
        <img id="" class="" alt=""
             crossorigin="anonymous" referrerpolicy="strict-origin-when-cross-origin"
             decoding="auto" loading="lazy" fetchpriority="auto"
             width="386" height="259" sizes=""
             srcset="/assets-audiotec/images/customer-service-representative-headset.386x259.jpg 386w,
                     /assets-audiotec/images/customer-service-representative-headset.771x517.jpg 771w"
             src="/assets-audiotec/images/customer-service-representative-headset.386x259.jpg"/>
      </picture>
    </div>
    <div class="home-automation highlight voice-command">
      <h3>Controle de voz</h3>
      <p>Conecte seu sistema de automação às assistentes inteligentes mais populares. O comando por voz deixa tudo ainda mais prático!</p>
      <picture id="" class="" style="display: none">
        <img id="" class="" alt=""
             crossorigin="anonymous" referrerpolicy="strict-origin-when-cross-origin"
             decoding="auto" loading="lazy" fetchpriority="auto"
             width="395" height="259" sizes=""
             srcset="/assets-audiotec/images/smart-home-automated-window-blinds.395x259.jpg 395w,
                     /assets-audiotec/images/smart-home-automated-window-blinds.790x517.jpg 790w"
             src="/assets-audiotec/images/smart-home-automated-window-blinds.395x259.jpg"/>
      </picture>
    </div>
    <div class="home-automation highlight sustainability">
      <h3>Economia de energia e custos</h3>
      <p>Reduza o desperdício de energia, com benefícios para a sua conta de luz e ao meio ambiente. Com pequenas ações, você pode transformar a sua pegada de carbono.</p>
      <picture id="" class="" style="display: none">
        <img id="" class="" alt=""
             crossorigin="anonymous" referrerpolicy="strict-origin-when-cross-origin"
             decoding="auto" loading="lazy" fetchpriority="auto"
             width="526" height="259" sizes=""
             srcset="/assets-audiotec/images/globe-on-moss-environment.526x259.jpg 526w,
                     /assets-audiotec/images/globe-on-moss-environment.1051x517.jpg 1051w"
             src="/assets-audiotec/images/globe-on-moss-environment.526x259.jpg"/>
      </picture>
    </div>
  </section>
  <section class="home-automation service cta">
    <a class="" target="_self" rel="" href="#§">Solicite Mais Informações Sobre Automação</a>
  </section>
  
{{-- SECTION DISABLED BY BRUNO DOS S. PIEROSAN 20250516, UNTIL CONTENT IS PROVIDED--}}
  <section class="customers-testimonials" style="display: none;">
    <h2>Ouça o que Clientes Reais Tem a Falar Sobre a Audiotec</h2>
    <div class="swiper" data-carousel-id="customers-testimonials">
      <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
      </div>
      <div class="swiper-button-prev" data-carousel-control-prev-id="customers-testimonials"></div>
      <div class="swiper-button-next" data-carousel-control-next-id="customers-testimonials"></div>
<!--      <div class="swiper-pagination" data-carousel-pagination-id="customers-testimonials"></div>-->
<!--      <div class="swiper-scrollbar" data-carousel-scrollbar-id="customers-testimonials"></div>-->
    </div>
  </section>
</main>
@endsection