const sectionVideo = `
                        <section id='s-video' class="s-video" style="background-color: #fff;">
                            <div class="container-fluid">
                                <div class="row">
									<div class="col-12 col-md-6 mb-6 mb-md-0 text-center d-flex flex-row align-items-center justify-content-center">
                                        <div class="row estatico">                                            
											<h5>Estampas autorais para quem vive o futebol de verdade</h5>
											<h1>Viva a Paixão. Vista a Arte.</h1>
											<p>Na Futebol Ink, transformamos grandes momentos do futebol em estampas cheias de estilo, história e emoção. Criamos artes únicas, inspiradas em ídolos e jogadas icônicas, sempre respeitando os direitos autorais. Nossas camisetas unem expressão, design e autenticidade, feitas para quem quer vestir o jogo com personalidade e atitude.</p></p>
                                        </div>
                                    </div>
									<div class="col-12 col-md-6 mb-6 mb-md-0 text-center box-video-yt">
                                        <video src="https://sistema.universoink.com.br/futebolink/theme/video.mp4" autoplay="" loop="" muted="muted" playsinline="" controlslist="nodownload" style="border-radius: 6px;" alt="" class="img-fluid"></video>
                                    </div>
                                    <!--<div class="col-12 col-md-6 mb-6 mb-md-0 text-center box-video-yt">
                                        <div id="s-video-yt">
                                            <iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 12px 12px 0 0;" src="https://www.youtube.com/embed/0x1eZfDbVlk" title="Conheça nosso parque gráfico e toda nossa inovação em impressão digital em papelão" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                                        </div>
									
                                    </div>-->
                                </div>
                            </div>
                        </section>`

                                
					
const botoesCat = `<section id="segmentosEcotevi">
  <div class="container">
    <h2 class="mb-2 text-center">Nossas Linhas</h2>
    <p class="mb-5 text-center text-muted">Nossas linhas possuem faixas de idade sugeridas mas estão disponíveis em todos os tamanhos!</p>

    <div class="row g-4 align-items-stretch">
      <!-- Esquerda: quadrado grande -->
      <div class="col-12 col-md-6">
        <a href="http://kids.futebolink.com.br/loja/produtos-categorias/8IRQPKNJ/2-a-5-anos.html"
           class="tile tile--lg segmento1">
        </a>
      </div>

      <!-- Direita: dois botões empilhados -->
      <div class="col-12 col-md-6 d-flex flex-column gap-4 stack mt-4 mt-sm-0">
        <a href="http://kids.futebolink.com.br/loja/produtos-categorias/8CMEQKNJ/6-a-9-anos.html"
           class="tile segmento2 flex-fill">
        </a>

        <a href="http://kids.futebolink.com.br/loja/produtos-categorias/0RMHQKNJ/10-a-12-anos.html"
           class="tile segmento3 flex-fill">
        </a>
      </div>
    </div>
  </div>
</section>

`

function verificarHorario() {
    const agora = new Date();
    const horaAtual = agora.getHours();
    return horaAtual
}



$( document ).ready(function() {

$('#innerAdicionais').after(`<div class="container py-3" id="innerBotoes">
  <div class="d-flex align-items-center actions-slim botoes">
    <!-- Botão 1: Descubra seu tamanho -->
    <button class="btn btn-link btn-action d-inline-flex align-items-center"
            data-toggle="modal" data-target="#modalTamanho" type="button">
      <!-- Ícone cabide -->
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <path d="M12 7a2.5 2.5 0 1 0-2.5-2.5"/><path d="M12 7v2.2l8.1 5.3a2 2 0 0 1 .9 1.7v.8H3v-.8a2 2 0 0 1 .9-1.7L12 9.2"/>
      </svg>
      <span>Descubra seu tamanho</span>
    </button>

    <!-- Separador opcional -->
    <span class="text-muted">|</span>

    <!-- Botão 2: Tabela de Medidas -->
    <button class="btn btn-link btn-action d-inline-flex align-items-center"
            data-toggle="modal" data-target="#modalTabela" type="button">
      <!-- Ícone régua -->
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <rect x="3" y="7" width="18" height="10" rx="2" ry="2"></rect>
        <path d="M7 7v4M11 7v3M15 7v4M19 7v3"></path>
      </svg>
      <span>Tabela de Medidas</span>
    </button>
  </div>
</div>

<!-- Modal: Descubra seu tamanho -->
<div class="modal fade" id="modalTamanho" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content">
      <button type="button" class="btn-close ms-auto m-2" data-dismiss="modal" aria-label="Fechar">X</button>
      <div class="modal-body text-center">
        <img src="https://kids.futebolink.com.br/loja/theme/medidas.png"
             alt="Guia de tamanho" class="img-fluid modal-img">
      </div>
    </div>
  </div>
</div>

<!-- Modal: Tabela de Medidas -->
<div class="modal fade" id="modalTabela" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content">
      <button type="button" class="btn-close ms-auto m-2" data-dismiss="modal" aria-label="Fechar">X</button>
      <div class="modal-body text-center">
        <img src="https://kids.futebolink.com.br/loja/theme/estampas.png"
             alt="Tabela de medidas" class="img-fluid modal-img">
      </div>
    </div>
  </div>
</div>`)

$(".js-info-medidas").on("click", function() {
  			if ($(".js-icone-medidas.fa-chevron-up").length > 0) {
  				$(".js-icone-medidas").removeClass('fa-chevron-up');
  				$(".js-icone-medidas").addClass('fa-chevron-down');
  				$("#innerMedidas .card-body").addClass('d-none');
  			} else {
  				$(".js-icone-medidas").removeClass('fa-chevron-down');
  				$(".js-icone-medidas").addClass('fa-chevron-up');
  				$("#innerMedidas .card-body").removeClass('d-none');
  			}
		});

    $('#innerMedidas').after(`<div class="col-12 mb-4" id="innerEstampas">
    <div class="card">
        <div class="card-header js-info-estampas">
            <div class="row mt-3">
                <div class="col-10"><h3 class="s-produtos-detalhes-subtitulo">Tamanho das Estampas</h3></div>
                <div class="col-2"><i class="fa-chevron-up fas s-produtos-detalhes-subtitulo-icone js-icone-estampas"></i></div>
            </div>
        </div>
        <div class="card-body"><div class="row">
        <figure class="tabela-estampas mb-3">
        <img
          src="/loja/theme/estampas.png"
          alt="Tabela de estampas ? Guia de tamanhos"
          class="img-fluid rounded shadow-sm"
          loading="lazy"
          width="1200"
          height="900"
        >
    </figure></div></div>
    </div>
</div>`)

$(".js-info-estampas").on("click", function() {
  			if ($(".js-icone-estampas.fa-chevron-up").length > 0) {
  				$(".js-icone-estampas").removeClass('fa-chevron-up');
  				$(".js-icone-estampas").addClass('fa-chevron-down');
  				$("#innerEstampas .card-body").addClass('d-none');
  			} else {
  				$(".js-icone-estampas").removeClass('fa-chevron-down');
  				$(".js-icone-estampas").addClass('fa-chevron-up');
  				$("#innerEstampas .card-body").removeClass('d-none');
  			}
		});

$('#s-produtos-destaque').after(botoesCat)

//},1000);

    $('#s-categorias-blocos').before(`<section id="jsMiniBanners1">
											<div class="conteudojsMiniBanner">
												<div class="container">
													<div class="row d-flex align-items-center boxjsMinibanner">
														<div class="col-6 col-md-3">
															<a href="#"><img src="/loja/theme/images/banner/mini-banner-1.png" alt="mini-banner-1" class="img-fluid"></a>
														</div>
														<div class="col-6 col-md-3">
															<a href="#"><img src="/loja/theme/images/banner/mini-banner-2.png" alt="mini-banner-1" class="img-fluid"></a>
														</div>
														<div class="col-6 col-md-3">
															<a href="#"><img src="/loja/theme/images/banner/mini-banner-3.png" alt="mini-banner-1" class="img-fluid"></a>
														</div>
														<div class="col-6 col-md-3">
															<a href="#"><img src="/loja/theme/images/banner/mini-banner-4.png" alt="mini-banner-1" class="img-fluid"></a>
														</div>
													</div>
												</div>
											</div>
										</section>`);

    setTimeout(function(){
        $('.card.s-produtos-card').each(function() {
        if ($(this).find('#consulte').length) {
            $(this).find('.s-produtos-card-valor-por-span, .s-produtos-destaque-card-valor-unidade, .card-text.s-produtos-card-valor').remove();
        }
        $('.s-produtos-card-titulo').after(`
`);
});
$('.s-produtos-card-titulo').after(`
  <div class="mt-1 mb-1">
    <small class="text-muted d-block">Disponível nas cores</small>
    <div style="display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:4px;">
      <span title="Branco"        style="width:14px;height:14px;border-radius:50%;background:#fff;border:1px solid rgba(0,0,0,.25);display:inline-block;"></span>
      <span title="Azul"          style="width:14px;height:14px;border-radius:50%;background:#0d6efd;border:1px solid rgba(0,0,0,.12);display:inline-block;"></span>
      <span title="Amarelo"       style="width:14px;height:14px;border-radius:50%;background:#ffc107;border:1px solid rgba(0,0,0,.12);display:inline-block;"></span>
      <span title="Vermelho"      style="width:14px;height:14px;border-radius:50%;background:#dc3545;border:1px solid rgba(0,0,0,.12);display:inline-block;"></span>
      <span title="Verde"         style="width:14px;height:14px;border-radius:50%;background:#198754;border:1px solid rgba(0,0,0,.12);display:inline-block;"></span>

      <span title="Verde Musgo"   style="width:14px;height:14px;border-radius:50%;background:#556B2F;border:1px solid rgba(0,0,0,.12);display:inline-block;"></span>
      <span title="Rosa Pink"     style="width:14px;height:14px;border-radius:50%;background:#FF1493;border:1px solid rgba(0,0,0,.12);display:inline-block;"></span>
      <span title="Cinza Mescla"  style="width:14px;height:14px;border-radius:50%;background:#B3B3B3;border:1px solid rgba(0,0,0,.2);display:inline-block;"></span>
      <span title="Azul Marinho"  style="width:14px;height:14px;border-radius:50%;background:#001F3F;border:1px solid rgba(0,0,0,.12);display:inline-block;"></span>
      <span title="Laranja"       style="width:14px;height:14px;border-radius:50%;background:#FD7E14;border:1px solid rgba(0,0,0,.12);display:inline-block;"></span>
      <span title="Amarelo Ouro"  style="width:14px;height:14px;border-radius:50%;background:#FFA000;border:1px solid rgba(0,0,0,.12);display:inline-block;"></span>
      <span title="Rosa Bebê"     style="width:14px;height:14px;border-radius:50%;background:#FFC0CB;border:1px solid rgba(0,0,0,.12);display:inline-block;"></span>
      <span title="Azul Turquesa" style="width:14px;height:14px;border-radius:50%;background:#40E0D0;border:1px solid rgba(0,0,0,.12);display:inline-block;"></span>
      <span title="Roxo"          style="width:14px;height:14px;border-radius:50%;background:#6F42C1;border:1px solid rgba(0,0,0,.12);display:inline-block;"></span>
    </div>
  </div>
`);



    }, 2000)

    $('#checkbox_termos_uso').prop('checked', 'true')
    $('#s-produtos-vendidos > div > div > div:nth-child(1) > div > h2').text('Promoções')
    $('#s-produtos-destaque > div > div > div:nth-child(1) > div > h2').text('Os mais vendidos')


    setTimeout(function(){
   
        $('#innerOrcamentoDetalhes').insertAfter('#innerFinalizar')
                               
	
        $('#s-produtos-lancamento').after(sectionVideo); 

		$('#s-video').insertAfter('#s-produtos-lancamento');

		// fcnParceirosSlider();


        /*$("#footer > div.s-footer > div > div > div:nth-child(6)").append(trustPilot);*/

		if ($('#homeID').length > 0) {
			document.querySelector("#s-newsletter .s-newsletter .s-newsletter-texto").innerHTML = "Cadastre-se e receba<br>novidades.<br><span>Ofertas exclusivas e muito mais.</span>";
			$('#footer > div:nth-child(3)').insertBefore('#s-newsletter');
			$('.eapps-instagram-feed-content').insertBefore('#s-newsletter');
			$("#eapps-instagram-feed-1 > a").removeAttr("style");
		}


		if ($('#innerGabarito').length > 0){
			$('#innerGabarito').insertAfter('#innerEnvieArquivoListagem');
		}
		if (document.URL.indexOf('/produtos-detalhes/') > 0) {
			$('#innerObservacoes').insertBefore('#innerFrete');
			document.querySelector("#innerFrete .input-group-text").innerText ='Simular frete';
		}

		// if ($('#navbarCategoriasHorizontal').length > 0) {
		// 	$('#navbarCategoriasHorizontal > ul > li:nth-child(6)').after(`<li class="nav-item dropdown dmenu"><a class="nav-link dropdown-toggle" href="https://vrlabel.pp1.dev.br/loja/busca/?buscaPor=promo" id="innerMNUCat_promo">Promo&ccedil;&otilde;es</a></li>`);
		// }
    }, 3000);

    $(document).on("click", '.js-chatbot-icon-fechar', function (event) {
        event.preventDefault();
        $('.js-chatbot-icon').remove();
    });
    
    $('#s-produtos-lancamento').before(`<div class="banner-container" id="mascotes">
  <img src="/loja/theme/images/banner/mascotes.png" alt="Banner promocional" class="img-fluid w-100 d-block">
</div>`);

    
})