@extends('webpages-templates.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="preload" as="image" type="image/jpeg" href="/assets/images/dev-miscellaneous/pecas-e-fendas.jpg"/>
@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 type="text/javascript" defer="defer">
  let loadingOverlay = null;
  window.addEventListener(`DOMContentLoaded`, (event) => {
    console.log(`SCRIPT PULA SEÇÃO: START DOMContentLoaded`);
    loadingOverlay = document.querySelector(`*.loading.overlay.pingfeng`);
//    setTimeout(() => {
//      loadingOverlay.classList.add(`fully-loaded`);
//    }, 3000); // 1000 milliseconds = 1 second
  });
  
   window.addEventListener(`load`, (event) => {
     console.log(`SCRIPT PULA SEÇÃO: START load`);
     loadingOverlay.dataset.loadingState = "concluded";
     document.querySelector(`main > *.loading.overlay.pingfeng + *`).scrollIntoView(); // Scroll page to the immediate element after the loading overlay
   });
</script>
<script>
  window.addEventListener(`load`, (event) => {
    const carouselId01 = `products-type-01`;
    const carouselProductsType01 = new Swiper(`*[data-carousel-id="${ carouselId01 }"]`, {
    slidesPerView: `auto`,                                      // `auto`
    slidesOffsetBefore: 0,
    spaceBetween: 68,                                           // 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: true,                                            // 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: true,                                            // 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>`;
//      }
      // [...]
    },
    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
//      }
//    }
    });
    const carouselId02 = `products-type-02`;
    const carouselProductsType02 = new Swiper(`*[data-carousel-id="${ carouselId02 }"]`, {
    slidesPerView: `auto`,                                      // `auto`
    slidesOffsetBefore: 0,
    spaceBetween: 68,                                           // 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: true,                                            // 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: 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: 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="${ 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>
@endpush
@section('webpage-structure')
<main>
{{-- <section id="loading-overlay" class="loading overlay pingfeng parallax"> --}}
<section id="loading-overlay" class="loading overlay pingfeng" data-loading-state="ongoing">
  <h1><strong>Peças</strong> que marcam <strong>fendas</strong> no tempo</h1>
</section>
<div class="wrapper custom-faux-parallax">
<nav class="products">
<!--
  <div class="search-bar">
    <input type="text" placeholder="Procurar">
    <button>→</button>
  </div>
-->
  <form id="product-search" class="search product search-bar" action="{{ route('product-search.' . app()->getLocale(), []) }}" method="GET">
    <button type="submit" class="">
      <picture id="" class="">
        <img id="" class="" alt=""
             crossorigin="" referrerpolicy=""
             decoding="async" loading="lazy" fetchpriority="high"
             width="" height="" sizes=""
             srcset=""
             src="/assets/icon-magnifying-glass.svg"/>
        →
      </picture>
    </button>
    <input type="text" class="search product" name="search" minlength="3" required="required" placeholder="Procurar"/>
  </form>
  
  
  
  
  <div class="products-lines">
    <div class="products-line" data-selected="true">
      <h2 class="products-line name">Essential</h2>
      <p class="products-line description">O melhor da Universum em peças e acabamentos.</p>
    </div>
    <div class="products-line" data-selected="false">
      <h2 class="products-line name">Basic</h2>
      <p class="products-line description">Seleção de peças da Universum com acabamentos à pronta-entrega.</p>
    </div>
  </div>
  <div class="products-categories">
    <div class="category">
      <h3>ENVOLVIMENTO</h3>
      <ul>
        <li><a class="" target="_self" rel="" href="#{{ Str::kebab($data->products_types[0]->short_name) }}">{{ $data->products_types[0]->short_name }}</a></li> {{-- Aparador --}}
        <li><a class="" target="_self" rel="" href="#{{ Str::kebab($data->products_types[1]->short_name) }}">{{ $data->products_types[1]->short_name }}</a></li> {{-- Bancos --}}
        <li><a class="" target="_self" rel="" href="#{{ Str::kebab($data->products_types[2]->short_name) }}">{{ $data->products_types[2]->short_name }}</a></li> {{-- Espelhos --}}
        <li><a class="" target="_self" rel="" href="#{{ Str::kebab($data->products_types[3]->short_name) }}">{{ $data->products_types[3]->short_name }}</a></li> {{-- Mesa de centro --}}
        <li><a class="" target="_self" rel="" href="#{{ Str::kebab($data->products_types[4]->short_name) }}">{{ $data->products_types[4]->short_name }}</a></li> {{-- Mesa lateral --}}
        <li><a class="" target="_self" rel="" href="#{{ Str::kebab($data->products_types[5]->short_name) }}">{{ $data->products_types[5]->short_name }}</a></li> {{-- Módulo sofá --}}
        {{-- EMPTY CATEGORY WORKAROUND OMISSION <li><a class="" target="_self" rel="" href="#{{ Str::kebab($data->products_types[6]->short_name) }}">{{ $data->products_types[6]->short_name }}</a></li> {{-- Painel --}}
        <li><a class="" target="_self" rel="" href="#{{ Str::kebab($data->products_types[7]->short_name) }}">{{ $data->products_types[7]->short_name }}</a></li> {{-- Poltronas --}}
        <li><a class="" target="_self" rel="" href="#{{ Str::kebab($data->products_types[8]->short_name) }}">{{ $data->products_types[8]->short_name }}</a></li> {{-- Rack --}}
      </ul>
    </div>
    <div class="category">
      <h3>ENCONTRO</h3>
      <ul>
        <li><a class="" target="_self" rel="" href="#{{ Str::kebab($data->products_types[9]->short_name) }}">{{ $data->products_types[9]->short_name }}</a></li>  {{-- Buffets --}}
        <li><a class="" target="_self" rel="" href="#{{ Str::kebab($data->products_types[18]->short_name) }}">{{ $data->products_types[18]->short_name }}</a></li>  {{-- Consoles --}}
        <li><a class="" target="_self" rel="" href="#{{ Str::kebab($data->products_types[10]->short_name) }}">{{ $data->products_types[10]->short_name }}</a></li>  {{-- Carro bar --}}
        <li><a class="" target="_self" rel="" href="#{{ Str::kebab($data->products_types[11]->short_name) }}">{{ $data->products_types[11]->short_name }}</a></li>  {{-- Cristaleira --}}
        {{-- EMPTY CATEGORY WORKAROUND OMISSION <li><a class="" target="_self" rel="" href="#{{ Str::kebab($data->products_types[12]->short_name) }}">{{ $data->products_types[12]->short_name }}</a></li>  {{-- Mesa bistrô --}}
        <li><a class="" target="_self" rel="" href="#{{ Str::kebab($data->products_types[13]->short_name) }}">{{ $data->products_types[13]->short_name }}</a></li>  {{-- Mesa de jantar --}}
      </ul>
    </div>
    <div class="category">
      <h3>DESCANSO</h3>
      <ul>
        <li><a class="" target="_self" rel="" href="#{{ Str::kebab($data->products_types[14]->short_name) }}">{{ $data->products_types[14]->short_name }}</a></li>  {{-- Cama --}}
        <li><a class="" target="_self" rel="" href="#{{ Str::kebab($data->products_types[15]->short_name) }}">{{ $data->products_types[15]->short_name }}</a></li>  {{-- Gaveteiro --}}
        <li><a class="" target="_self" rel="" href="#{{ Str::kebab($data->products_types[16]->short_name) }}">{{ $data->products_types[16]->short_name }}</a></li>  {{-- Mesa de Cabeceira --}}
        {{-- EMPTY CATEGORY WORKAROUND OMISSION <li><a class="" target="_self" rel="" href="#{{ Str::kebab($data->products_types[17]->short_name) }}">{{ $data->products_types[17]->short_name }}</a></li>  {{-- Mancebo --}}
      </ul>
    </div>
  </div>
</nav>
</div>
</main>

<style>
  section.loading.overlay.pingfeng[data-loading-state="concluded"] {
      background: transparent url(/public_html/assets/images/dev-miscellaneous/pecas-e-fendas.jpg) center / 110% auto no-repeat fixed padding-box border-box !important;
  }
  section.loading.overlay.pingfeng[data-loading-state="concluded"] {
      background-size: cover !important;
  }
  @media (max-width: 1300px){
    .wrapper section.products-type > * {
        margin-left: 160px !important;
    }
    nav.products {
        grid-template-areas:
            "gaSearch gaSearch"
            "gaLines gaLines"
            "gaTypes gaTypes" !important;
        grid-template:
            "gaSearch gaSearch" auto
            "gaLines gaLines" auto
            "gaTypes gaTypes" auto !important;
        padding: 30px 20px !important;
    }
  }
  @media (max-width: 700px){
    nav.products {
        display: flex !important;
        flex-direction: column !important;
    }
    .wrapper section.products-type > * {
        margin-left: 60px !important;
    }
  }
  @media only screen and (min-width: 320px) and (max-width: 479px) {
    section.loading.overlay.pingfeng {
        height: 60vh !important;
        min-height: 460px !important;
    }
    section.loading.overlay.pingfeng > h1 {
        font: normal normal 100 normal 5rem / 1.2 "acumin-pro-wide", sans-serif !important;
        font-size: clamp(40px, 15vw, 40px) !important;
    }
    nav.products > form.search-bar {
        width: 100%;
    }
    nav.products > form.search-bar > input {
      width: 100%;
    }
  }
</style>
@endsection