<style>
body.gnt-header-hidden .s-solutions .sticky-container.stick-active,
body.gnt-header-hidden .s-solutions .select-sticky-container.stick-active {
top: 0;
overflow-x: hidden;
}
body .s-solutions .sticky-container.stick-active,
body .s-solutions .select-sticky-container.stick-active {
top: 65px;
overflow-x: hidden;
}
@media (max-width: 1023px) {
body .s-solutions .sticky-container.stick-active,
body .s-solutions .select-sticky-container.stick-active {
top: 56px;
overflow-x: hidden;
}
}

.s-solutions {
overflow: unset;
}
.s-solutions .gnt-container {
gap: 0;
}
.s-solutions .section-title {
text-align: center;
}
.s-solutions .clean-cards-content {
width: 100%;
padding-top: 40px;
}
@media (max-width: 719px) {
.s-solutions .clean-cards-content {
padding-top: 16px;
}
}
.s-solutions .clean-cards-content .clean-cards-swiper {
display: flex;
justify-content: center;
overflow: unset;
}
.s-solutions .clean-cards-content .clean-cards-swiper .clean-cards-wrapper {
display: flex;
flex-wrap: wrap;
gap: 24px;
overflow: hidden;
}
@media (max-width: 1023px) {
.s-solutions .clean-cards-content .clean-cards-swiper .clean-cards-wrapper {
flex-wrap: nowrap;
overflow: unset;
gap: 0;
}
}
.s-solutions .clean-cards-content .clean-cards-swiper .clean-cards-wrapper .clean-cards-item {
height: auto;
width: calc((100% - 72px) / 4);
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 32px;
border-radius: 8px;
background: #f2f8fa;
border: 1px solid #f2f8fa;
text-align: center;
}
@media (max-width: 1280px) {
.s-solutions .clean-cards-content .clean-cards-swiper .clean-cards-wrapper .clean-cards-item {
padding: 24px;
}
}
@media (max-width: 1023px) {
.s-solutions .clean-cards-content .clean-cards-swiper .clean-cards-wrapper .clean-cards-item {
width: unset;
}
}
@media (max-width: 719px) {
.s-solutions .clean-cards-content .clean-cards-swiper .clean-cards-wrapper .clean-cards-item {
padding: 16px;
}
}
.s-solutions .clean-cards-content .clean-cards-swiper .clean-cards-wrapper .clean-cards-item:hover {
border: 1px solid #ec0000;
}
.s-solutions .clean-cards-content .clean-cards-swiper .clean-cards-wrapper .clean-cards-item .clean-cards-item-icon-container {
background: #deedf2;
}
.s-solutions .clean-cards-content .clean-cards-swiper .clean-cards-wrapper .clean-cards-item .clean-cards-item-icon-container .clean-cards-item-icon {
display: flex;
flex-shrink: 0;
width: 24px;
height: 25px;
background: #454c52;
}
.s-solutions .clean-cards-content .clean-cards-swiper .clean-cards-wrapper .clean-cards-item .clean-cards-item-text-container {
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
}
.s-solutions .clean-cards-content .clean-cards-swiper .clean-cards-wrapper .clean-cards-item .clean-cards-item-text-container p {
letter-spacing: -0.2px;
}
.s-solutions .clean-cards-content .clean-cards-swiper .clean-cards-wrapper .clean-cards-item .clean-cards-item-text-container a {
margin-top: auto;
border: 0;
}
.s-solutions .clean-cards-content .swiper-pagination-clean-card {
display: none;
line-height: 0;
text-align: center;
}
@media (max-width: 1023px) {
.s-solutions .clean-cards-content .swiper-pagination-clean-card {
display: block;
margin-top: 24px;
}
}
.s-solutions .clean-cards-content .swiper-pagination-clean-card .swiper-pagination-bullet {
background: #e4e4e4;
opacity: 1;
}
.s-solutions .clean-cards-content .swiper-pagination-clean-card .swiper-pagination-bullet.swiper-pagination-bullet-active {
background: #ec0800;
}
.s-solutions .sticky-container {
display: none;
}
.s-solutions .sticky-container.stick-active {
z-index: 10;
display: flex;
width: 100vw;
background-color: #fff;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
position: -webkit-sticky;
position: sticky;
}
.s-solutions .sticky-container.stick-active .gnt-container {
gap: 0;
flex-direction: row;
}
.s-solutions .sticky-container.stick-active .sticky-link {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
flex: 1;
padding: 16px;
border-bottom: 4px solid #fff;
transition: 300ms ease-in-out;
}
.s-solutions .sticky-container.stick-active .sticky-link.active {
border-bottom: 4px solid #ec0000;
}
.s-solutions .sticky-container.stick-active .sticky-link.active .gnt-icon {
background-color: #ec0000;
}
.s-solutions .sticky-container.stick-active .sticky-link.active h6 {
color: #ec0000;
}
.s-solutions .sticky-container.stick-active .sticky-link:not(.active):hover .gnt-icon {
background-color: #b7100f;
}
.s-solutions .sticky-container.stick-active .sticky-link:not(.active):hover h6 {
color: #b7100f;
}
.s-solutions .sticky-container.stick-active .sticky-link h6 {
text-wrap: nowrap;
}
.s-solutions .select-sticky-container {
display: none;
}
.s-solutions .select-sticky-container.stick-active {
z-index: 10;
display: flex;
width: 100vw;
position: -webkit-sticky;
position: sticky;
}
.s-solutions .select-sticky-container.stick-active.gn-select.active .gn-select-selected {
background: #f2f8fa;
}
.s-solutions .select-sticky-container.stick-active.gn-select.active .gn-select-selected::after {
margin-top: 0;
}
.s-solutions .select-sticky-container.stick-active.gn-select .gn-select-selected {
border: 0;
border-radius: 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
background: #fff;
padding: 16px;
}
.s-solutions .select-sticky-container.stick-active.gn-select .gn-select-selected::after {
margin-top: -8px;
}
.s-solutions .select-sticky-container.stick-active.gn-select .gn-select-selected .select-ellipsis a {
display: flex;
gap: 8px;
}
.s-solutions .select-sticky-container.stick-active.gn-select .gn-select-options {
border: 0;
border-radius: 0;
margin-top: 0;
margin-right: 12px;
}
.s-solutions .select-sticky-container.stick-active.gn-select .gn-select-options .gn-select-option-item {
border-bottom: 1px solid #deedf2;
padding: 0;
}
.s-solutions .select-sticky-container.stick-active.gn-select .gn-select-options .gn-select-option-item .gn-select-option-value {
width: 100%;
}
.s-solutions .select-sticky-container.stick-active.gn-select .gn-select-options .gn-select-option-item .gn-select-option-value .select-ellipsis {
width: 100%;
}
.s-solutions .select-sticky-container.stick-active.gn-select .gn-select-options .gn-select-option-item .gn-select-option-value .select-ellipsis a {
width: 100%;
padding: 16px;
display: flex;
gap: 8px;
}
.s-solutions .card-container {
width: 100%;
display: flex;
gap: 32px;
padding-block: 112px 0;
}
@media (max-width: 719px) {
.s-solutions .card-container {
padding-block: 24px;
}
}
.s-solutions .card-container .left-container {
display: flex;
max-width: 410px;
}
@media (max-width: 1280px) {
.s-solutions .card-container .left-container {
max-width: 310px;
}
}
.s-solutions .card-container .right-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 32px;
flex: 1 0 0;
}
.s-solutions .card-container .mobile-container {
display: flex;
flex-direction: column;
gap: 24px;
}
.s-solutions .card-container .header-container {
display: flex;
align-items: center;
gap: 18px;
align-self: stretch;
}
@media (max-width: 1023px) {
.s-solutions .card-container .header-container {
flex-direction: column;
align-items: flex-start;
}
}
@media (max-width: 719px) {
.s-solutions .card-container .header-container {
flex-direction: row;
}
}
@media (max-width: 719px) {
.s-solutions .card-container .header-container .title-container {
align-self: center;
}
}
.s-solutions .card-container .header-container .title-container .card-description {
text-wrap: pretty;
}
.s-solutions .card-container .card-image {
border-radius: 16px;
overflow: hidden;
}
@media (max-width: 719px) {
.s-solutions .card-container .card-image {
max-width: 110px;
max-height: 110px;
}
}
.s-solutions .card-container .card-image img {
width: 100%;
height: -webkit-fill-available;
object-fit: cover;
}
.s-solutions .card-container .card-taxes-container {
display: flex;
padding: 18px 24px;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 8px;
border-radius: 12px;
border: 1px solid #deedf2;
background: #fff;
}
@media (max-width: 719px) {
.s-solutions .card-container .card-taxes-container {
padding: 16px;
}
}
.s-solutions .card-container .card-taxes-container .options-container {
display: flex;
align-items: center;
gap: 8px;
text-wrap: nowrap;
}
@media (max-width: 719px) {
.s-solutions .card-container .card-taxes-container .options-container {
flex-direction: column;
align-items: flex-start;
gap: 0;
}
}
.s-solutions .card-container .card-taxes-container .options-container .options-wrapper {
display: flex;
align-items: center;
gap: 8px;
}
.s-solutions .card-container .card-taxes-container .options-container .options-wrapper .option-selector {
cursor: pointer;
display: flex;
padding: 4px 12px;
justify-content: center;
align-items: center;
gap: 8px;
border-radius: 29px;
border: 1px solid #b7dae5;
transition: 200ms ease-in;
}
.s-solutions .card-container .card-taxes-container .options-container .options-wrapper .option-selector.active {
border-color: #ec0000;
background: #ec0000;
color: #fff;
}
.s-solutions .card-container .card-taxes-container .options-container .options-wrapper .option-selector:not(.active):hover {
background: #b7dae5;
}
.s-solutions .card-container .card-taxes-container .taxes-container {
display: flex;
justify-content: center;
align-self: stretch;
gap: 24px;
}
@media (max-width: 719px) {
.s-solutions .card-container .card-taxes-container .taxes-container {
gap: 16px;
}
}
.s-solutions .card-container .card-taxes-container .taxes-container .tax-card:first-child {
padding-right: 24px;
border-right: 1px solid #e1e6eb;
}
@media (max-width: 719px) {
.s-solutions .card-container .card-taxes-container .taxes-container .tax-card:first-child {
padding-right: 16px;
}
}
.s-solutions .card-container .card-taxes-container .taxes-container .tax-card:last-child {
margin-right: 8px;
padding-left: 24px;
border-left: 1px solid #e1e6eb;
}
@media (max-width: 719px) {
.s-solutions .card-container .card-taxes-container .taxes-container .tax-card:last-child {
padding-left: 16px;
}
}
.s-solutions .card-container .card-taxes-container .taxes-container .gn-select .gn-select-selected {
padding: 0;
border: 0;
}
.s-solutions .card-container .card-taxes-container .taxes-container .gn-select .gn-select-selected .gn-select-option-value {
width: 100%;
}
.s-solutions .card-container .card-taxes-container .taxes-container .gn-select .gn-select-selected:after {
margin-top: 0px;
}
.s-solutions .card-container .card-taxes-container .taxes-container .gn-select .gn-select-options .gn-select-option-item {
padding: 8px;
}
.s-solutions .card-container .card-taxes-container .taxes-container .gn-select .gn-select-options .gn-select-option-item .select-ellipsis .p-small {
text-wrap: nowrap;
}
.s-solutions .card-container .price-container {
display: flex;
align-items: center;
gap: 4px;
}
.s-solutions .card-container .price-container .price-wrapper {
display: flex;
align-items: center;
}
.s-solutions .card-container .price-container .price-wrapper .integer {
line-height: 54px;
}
@media (max-width: 719px) {
.s-solutions .card-container .price-container .price-wrapper .integer {
line-height: 34px;
}
}
.s-solutions .card-container .bullets-container {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.s-solutions .card-container .bullets-container .bullet-item {
display: flex;
width: calc(33.3333333333% - 16px);
align-items: center;
gap: 8px;
}
@media (max-width: 1280px) {
.s-solutions .card-container .bullets-container .bullet-item {
width: calc(50% - 8px);
}
}
@media (max-width: 719px) {
.s-solutions .card-container .bullets-container .bullet-item {
width: 100%;
}
}
.s-solutions .card-container .bullets-container .bullet-item i {
width: 18px;
height: 18px;
background-color: #ec0000;
}
.s-solutions .card-container .buttons-container {
display: flex;
align-items: center;
gap: 16px;
}
.s-solutions .hidden {
display: none !important;
}

.gnt-container, .clean-cards-content {
width: 100%;
overflow: hidden;
box-sizing: border-box;
padding: 0;
margin: 0 auto;
}

.clean-cards-swiper {
width: 100%;
display: flex;
align-items: center;
}

.clean-cards-wrapper {
display: flex;
width: 100%;
overflow: hidden;
}

.clean-cards-wrapper .swiper-slide {
flex: 1 0 auto;
width: auto;
max-width: 100%;
box-sizing: border-box;
}

@media (max-width: 768px) {
.clean-cards-content, .clean-cards-swiper, .clean-cards-wrapper {
width: 100%;
}

.clean-cards-wrapper .swiper-slide {
width: 90%;
margin: 0 auto;
}
}

.s-solutions .clean-cards-content .clean-cards-swiper {
overflow: hidden;
}

@media (max-width: 719px) {
.s-solutions .clean-cards-content .clean-cards-swiper .clean-cards-wrapper .clean-cards-item {
width: 100%;
padding: 16px;
}
}

.s-solutions .sticky-container.stick-active, .s-solutions .select-sticky-container.stick-active {
top: 56px;
}

@media (max-width: 719px) {
.s-solutions .card-container, .s-solutions .card-container {
display: flex;
flex-direction: column;
}
}

.s-solutions .card-container .left-container,
.s-solutions .card-container .right-container {
display: flex;
width: 100%;
}

@media (max-width: 719px) {
.s-solutions .card-container {
display: block !important;
}
}

.s-solutions .card-container {
display: flex !important;
opacity: 1 !important;
visibility: visible !important;
}

.s-solutions .clean-cards-content .clean-cards-swiper .clean-cards-wrapper .clean-cards-item {
display: flex !important;
opacity: 1 !important;
}

.container-tag {
position: relative;
}

.seal-container-2 {
position: absolute;
top: -145px;
left: 196px;
right: 0;
width: 109px;
}

.seal {
width: 100%;
height: auto;
}

@media only screen and (max-width: 480px) {
.seal-container-2 {
display: none;
position: absolute;
top: -17px;
left: 219px;
right: 20px;
width: 99px;
z-index: 99;
}
}

@media only screen and (min-width: 1440px) {
.seal-container-2 {
position: absolute;
top: -160px;
left: 183px;
right: 0;
width: 120px;
}
}

</style>

<section id="solucoes" class="s-solutions gnt-section">

<div class="c-solutions gnt-container">
<h2 class="section-title">Escolha o produto ideal para seu negócio</h2>

<div class="clean-cards-content">
<div class="clean-cards-swiper swiper">
<div class="clean-cards-wrapper swiper-wrapper">
<!-- Generated by script -->
</div>
</div>

<div class="swiper-pagination-clean-card"></div>
</div>

<div class="sticky-container">
<div class="gnt-container">
Generated by script
</div>
</div>

<div class="select-sticky-container gn-select">
</div>

<div class="cards-container">
<!-- Generated by script -->
</div>
</div>
</section>

<script>
const solutionsData = [
{
id: 'get_mini',
name: 'Get Mini',
image: {
alt: 'Imagem Get Mini',
src: 'https://site.getnet.com.br/wp-content/uploads/2024/08/produtos-digitais-1.webp',
},
description: 'Pequena para o seu bolso. Grande para seu negócio.',
price: {
integer: '29',
decimals: ',00',
},
bullets: [
{
icon: 'check-circle',
text: 'Pagamento por aproximação, Pix, QR Code e Chip',
},
{
icon: 'shield',
text: 'PCI Compliance',
},
{
icon: 'safe',
text: 'Cofre por armazenamento de cartão R$ 0,20',
},
{
icon: 'cart',
text: 'Bateria com 12 horas de duração',
},
{
icon: 'dinheiro-refresh',
text: 'Conta e cartão grátis',
},
{
icon: 'card-paper',
text: 'Visor colorido',
},
{
icon: 'computador-dinheiro',
text: 'Comprovante via SMS',
},
{
icon: 'reload-refresh',
text: 'Comissão com recargas para celular',
},
{
icon: 'getpay',
text: '1 ano de garantia',
},
{
icon: 'seguranca',
text: 'Oferta válida para novos clientes',
},
],
buttons: [
{
type: 'gnt-button-primary',
label: 'quero contratar',
href: 'https://cadastro.getnet.com.br/#/oferta/236fd6213496463e8cedb3844feaad42/?p=carrinho',
attributes: {
'data-id': '236fd6213496463e8cedb3844feaad42',
'data-name': 'GET MINI',
'data-price': '0,00',
'data-brand': 'GETNET',
'data-category': 'ALUGUEL-1',
'data-type': 'lp-produtos-pessoa-fisica',
'data-value': 'adicionar-no-carrinho-get-mini',
'data-item': 'GET_MINI',
'data-events': 'ADD_TO_CART'
},
},
{
type: 'gnt-button-primary-outline',
label: 'saiba mais',
href: 'https://site.getnet.com.br/maquininha/get-mini/',
},
],
notes: null,
icon: 'store',
},
{
id: 'get_tap',
name: 'Get Tap',
image: {
alt: 'Imagem Get Tap',
src: 'https://site.getnet.com.br/wp-content/uploads/2024/07/get-tap.png',
},
description: 'Transforme seu celular em maquininha.',
price: null,
bullets: [
{
icon: 'check-circle',
text: 'Sem taxa de adesão, manutenção e aluguel',
},
{
icon: 'cartao',
text: 'Aceite as principais bandeiras',
},
{
icon: 'percent',
text: 'Taxas menores para você',
},
{
icon: 'machine',
text: 'Não precisa de maquininha',
},
{
icon: 'dinheiro',
text: 'Faça vendas de até R$ 200,00',
},
{
icon: 'smartwatch',
text: 'Receba com carteira digital em celular e relógio inteligente',
},
{
icon: 'cartao-dinheiro',
text: 'Pague apenas a taxa de cada transação realizada',
},
{
icon: 'seguranca',
text: 'Seguro e com Aplicativo Getnet para administrar suas vendas',
},
{
icon: 'android-half',
text: 'Para o seu celular com NFC e com Android 11 ou superior',
},
{
icon: 'contactless-card',
text: 'Receba pagamentos por aproximação: no débito, crédito, parcelado e muito mais',
},
],
buttons: [
{
type: 'gnt-button-primary',
label: 'quero contratar',
href: 'https://cadastro.getnet.com.br/#/oferta/f760727e93544397ae15f8fcf4209d2b/?p=carrinho',
attributes: {
'data-id': 'f760727e93544397ae15f8fcf4209d2b',
'data-name': 'Get Tap',
'data-price': '0,00',
'data-brand': 'GETNET',
'data-category': 'Compra',
'data-type': 'lp-produtos-pessoa-fisica',
'data-value': 'adicionar-no-carrinho-get-get-tap',
'data-item': 'GET_TAP',
'data-events': 'ADD_TO_CART'
},
},
{
type: 'gnt-button-primary-outline',
label: 'saiba mais',
href: 'https://site.getnet.com.br/get-tap/',
},
],
notes: null,
icon: 'contactless-phone',
},
{
id: 'get_pay',
name: 'Link de pagamento',
image: {
alt: 'Imagem Link de pagamento',
src: 'https://site.getnet.com.br/wp-content/uploads/2024/03/Link-de-pagamento.png',
},
description: 'Venda de onde estiver pelas redes sociais.',
price: null,
bullets: [
{
icon: 'check-circle',
text: 'Sem taxa de adesão, manutenção e aluguel*',
},
{
icon: 'globe',
text: '100% on-line e sem burocracia',
},
{
icon: 'caminhao',
text: 'Opção de inclusão do valor de frete de cobrança',
},
{
icon: 'settings',
text: 'Link personalizável com detalhes do produto ',
},
{
icon: 'menu',
text: 'Adicione os links de pagamento onde quiser.',
},
{
icon: 'share-2',
text: 'Compartilhe seu link pelas redes sociais',
},
{
icon: 'seguranca',
text: 'Segurança: Conte com o Antifraude da Getnet',
},
{
icon: 'cartao-dinheiro',
text: 'Você pode optar por receber via débito, crédito, pix e wallet.',
},
{
icon: 'whatsapp',
text: 'Levando o Link de Pagamento você também pode habilitar o WhatsApp Business para vender pelo catálogo.',
},
],
buttons: [
{
type: 'gnt-button-primary',
label: 'quero contratar',
href: 'https://site.getnet.com.br/link-de-pagamento/habilitar-getpay',
attributes: {
'data-id': 'a89496a74c4d46e396cfdadca6ddfaae',
'data-name': 'Link Getpay Básico',
'data-price': '0,00',
'data-brand': 'GETNET',
'data-category': 'ALUGUEL-1',
'data-type': 'lp-produtos-pessoa-fisica',
'data-value': 'adicionar-no-carrinho-get-link-pagamento-basico',
'data-item': 'LINK_PAGAMENTO_BASICO',
'data-events': 'ADD_TO_CART'
},
},
{
type: 'gnt-button-primary-outline',
label: 'saiba mais',
href: 'https://site.getnet.com.br/link-de-pagamento/',
},
],
notes: '*Apenas no plano Link Getpay Inicial',
icon: 'getpay',
},
{
id: 'whatsapp',
name: 'Venda no WhatsApp',
image: {
alt: 'Imagem WhatsApp',
src: 'https://site.getnet.com.br/wp-content/uploads/2024/03/whatsapp-banner-illustration.png',
},
description: 'Venda com segurança através do WhatsApp Business.',
price: null,
bullets: [
{
icon: 'check-circle',
text: 'Sem taxa de adesão, manutenção e aluguel',
},
{
icon: 'cartao',
text: 'Aceite as principais bandeiras',
},
{
icon: 'mao-dinheiro',
text: 'Venda a qualquer hora e onde seu cliente estiver',
},
{
icon: 'machine',
text: 'Não precisa de maquininha',
},
{
icon: 'user-hand',
text: 'Acompanhe seu cliente do começo ao pós venda',
},
{
icon: 'natural-legal-person',
text: 'Disponível para Pessoa Física e Jurídica',
},
{
icon: 'cartao-dinheiro',
text: 'Venda nos cartões de crédito e débito com a possibilidade de parcelamento.',
},
{
icon: 'whatsapp',
text: 'Ative a funcionalidade e receba pagamentos pelo WhatsApp Business em alguns instantes',
},
{
icon: 'menu',
text: 'Crie o seu próprio catálogo de produtos e compartilhe com seus clientes',
},
{
icon: 'seguranca',
text: 'Vendas seguras e protegidas. Conte com o Antifraude Getnet e as certificações PCI e ISO27001',
},
],
buttons: [
{
type: 'gnt-button-primary',
label: 'quero contratar',
href: 'https://cadastro.getnet.com.br/#/oferta/ff4320773bb44db197d173a55d75a507?p=carrinho',
attributes: {
'data-id': 'ff4320773bb44db197d173a55d75a507',
'data-name': 'WhatsApp',
'data-price': '0,00',
'data-brand': 'GETNET',
'data-category': 'ALUGUEL-1',
'data-type': 'lp-produtos-pessoa-fisica',
'data-value': 'adicionar-no-carrinho-get-whatsapp',
'data-item': 'WHATSAPP',
'data-events': 'ADD_TO_CART'
},
},
{
type: 'gnt-button-primary-outline',
label: 'saiba mais',
href: 'https://site.getnet.com.br/pagamentos-pelo-whatsapp/',
},
],
notes: null,
icon: 'whatsapp',
},
];

const taxes = {
get_mini: {
'2_dias': {
title: '2 dias',
installments: {
0: { title: 'Débito', tax: '1,89' },
1: { title: 'Crédito 1x', tax: '4,89' },
2: { title: 'Crédito 2x', tax: '6,29' },
3: { title: 'Crédito 3x', tax: '7,69' },
4: { title: 'Crédito 4x', tax: '9,09' },
5: { title: 'Crédito 5x', tax: '10,49' },
6: { title: 'Crédito 6x', tax: '11,89' },
7: { title: 'Crédito 7x', tax: '13,29' },
8: { title: 'Crédito 8x', tax: '14,69' },
9: { title: 'Crédito 9x', tax: '16,09' },
10: { title: 'Crédito 10x', tax: '17,49' },
11: { title: 'Crédito 11x', tax: '18,89' },
12: { title: 'Crédito 12x', tax: '20,29' },
},
},
'30_dias': {
title: '30 dias',
installments: {
0: { title: 'Débito', tax: '1,89' },
1: { title: 'Crédito 1x', tax: '2,99' },
2: { title: 'Crédito 2x', tax: '5,49' },
3: { title: 'Crédito 3x', tax: '6,54' },
4: { title: 'Crédito 4x', tax: '7,59' },
5: { title: 'Crédito 5x', tax: '8,64' },
6: { title: 'Crédito 6x', tax: '9,69' },
7: { title: 'Crédito 7x', tax: '10,74' },
8: { title: 'Crédito 8x', tax: '11,79' },
9: { title: 'Crédito 9x', tax: '12,84' },
10: { title: 'Crédito 10x', tax: '13,89' },
11: { title: 'Crédito 11x', tax: '14,94' },
12: { title: 'Crédito 12x', tax: '15,99' },
},
},
},
get_tap: {
'2_dias': {
title: '2 dias',
installments: {
0: { title: 'Débito', tax: '1,39' },
1: { title: 'Crédito 1x', tax: '3,55' },
2: { title: 'Crédito 2x', tax: '6,15' },
3: { title: 'Crédito 3x', tax: '7,30' },
4: { title: 'Crédito 4x', tax: '8,45' },
5: { title: 'Crédito 5x', tax: '9,60' },
6: { title: 'Crédito 6x', tax: '10,75' },
7: { title: 'Crédito 7x', tax: '11,90' },
8: { title: 'Crédito 8x', tax: '13,05' },
9: { title: 'Crédito 9x', tax: '14,20' },
10: { title: 'Crédito 10x', tax: '15,35' },
11: { title: 'Crédito 11x', tax: '16,50' },
12: { title: 'Crédito 12x', tax: '17,65' },
},
},
'30_dias': {
title: '30 dias',
installments: {
0: { title: 'Débito', tax: '1,39' },
1: { title: 'Crédito 1x', tax: '3,54' },
2: { title: 'Crédito 2x', tax: '6,14' },
3: { title: 'Crédito 3x', tax: '7,29' },
4: { title: 'Crédito 4x', tax: '8,44' },
5: { title: 'Crédito 5x', tax: '9,59' },
6: { title: 'Crédito 6x', tax: '10,74' },
7: { title: 'Crédito 7x', tax: '11,89' },
8: { title: 'Crédito 8x', tax: '13,04' },
9: { title: 'Crédito 9x', tax: '14,19' },
10: { title: 'Crédito 10x', tax: '15,34' },
11: { title: 'Crédito 11x', tax: '16,49' },
12: { title: 'Crédito 12x', tax: '17,64' },
},
},
conforme_parcelas: {
title: 'Conforme parcelas',
installments: {
0: { title: 'Débito', tax: '1,95' },
1: { title: 'Crédito 1x', tax: '3,09' },
2: { title: 'Crédito 2x', tax: '6,40' },
3: { title: 'Crédito 3x', tax: '6,40' },
4: { title: 'Crédito 4x', tax: '6,40' },
5: { title: 'Crédito 5x', tax: '6,40' },
6: { title: 'Crédito 6x', tax: '6,40' },
7: { title: 'Crédito 7x', tax: '6,40' },
8: { title: 'Crédito 8x', tax: '6,40' },
9: { title: 'Crédito 9x', tax: '6,40' },
10: { title: 'Crédito 10x', tax: '6,40' },
11: { title: 'Crédito 11x', tax: '6,40' },
12: { title: 'Crédito 12x', tax: '6,40' },
},
},
},
get_pay: {
'30_dias': {
title: '30 dias',
installments: {
0: { title: 'Débito', tax: '1,90' },
1: { title: 'Crédito 1x', tax: '3,50' },
2: { title: 'Crédito 2x', tax: '6,09' },
3: { title: 'Crédito 3x', tax: '7,14' },
4: { title: 'Crédito 4x', tax: '8,19' },
5: { title: 'Crédito 5x', tax: '9,24' },
6: { title: 'Crédito 6x', tax: '10,29' },
7: { title: 'Crédito 7x', tax: '11,34' },
8: { title: 'Crédito 8x', tax: '12,39' },
9: { title: 'Crédito 9x', tax: '13,44' },
10: { title: 'Crédito 10x', tax: '14,49' },
11: { title: 'Crédito 11x', tax: '15,54' },
12: { title: 'Crédito 12x', tax: '16,59' },
},
},
conforme_parcelas: {
title: 'Conforme parcelas',
installments: {
0: { title: 'Débito', tax: '1,90' },
1: { title: 'Crédito 1x', tax: '2,80' },
2: { title: 'Crédito 2x', tax: '3,00' },
3: { title: 'Crédito 3x', tax: '3,00' },
4: { title: 'Crédito 4x', tax: '3,00' },
5: { title: 'Crédito 5x', tax: '3,00' },
6: { title: 'Crédito 6x', tax: '3,00' },
7: { title: 'Crédito 7x', tax: '3,15' },
8: { title: 'Crédito 8x', tax: '3,15' },
9: { title: 'Crédito 9x', tax: '3,15' },
10: { title: 'Crédito 10x', tax: '3,15' },
11: { title: 'Crédito 11x', tax: '3,15' },
12: { title: 'Crédito 12x', tax: '3,15' },
},
},
},
whatsapp: {
'30_dias': {
title: '30 dias',
installments: {
0: { title: 'Débito', tax: '1,90' },
1: { title: 'Crédito 1x', tax: '3,50' },
2: { title: 'Crédito 2x', tax: '6,09' },
3: { title: 'Crédito 3x', tax: '7,14' },
4: { title: 'Crédito 4x', tax: '8,19' },
5: { title: 'Crédito 5x', tax: '9,24' },
6: { title: 'Crédito 6x', tax: '10,29' },
7: { title: 'Crédito 7x', tax: '11,34' },
8: { title: 'Crédito 8x', tax: '12,39' },
9: { title: 'Crédito 9x', tax: '13,44' },
10: { title: 'Crédito 10x', tax: '14,49' },
11: { title: 'Crédito 11x', tax: '15,54' },
12: { title: 'Crédito 12x', tax: '16,59' },
},
},
conforme_parcelas: {
title: 'Conforme parcelas',
installments: {
0: { title: 'Débito', tax: '1,90' },
1: { title: 'Crédito 1x', tax: '2,80' },
2: { title: 'Crédito 2x', tax: '3,00' },
3: { title: 'Crédito 3x', tax: '3,00' },
4: { title: 'Crédito 4x', tax: '3,00' },
5: { title: 'Crédito 5x', tax: '3,00' },
6: { title: 'Crédito 6x', tax: '3,00' },
7: { title: 'Crédito 7x', tax: '3,15' },
8: { title: 'Crédito 8x', tax: '3,15' },
9: { title: 'Crédito 9x', tax: '3,15' },
10: { title: 'Crédito 10x', tax: '3,15' },
11: { title: 'Crédito 11x', tax: '3,15' },
12: { title: 'Crédito 12x', tax: '3,15' },
},
},
},
};

const solutionsModule = (() => {
function Module() {
this.init = () => {
this.setupVariables();
this.initElements();

this.createCleanCardsItems();
this.setupSwiper();
this.createStickyContainer();

this.createCards();

this.observeElements();
};

this.setupVariables = () => {
this.isDesktop = this.isLaptop = this.isTablet = this.isMobile = false;
this.swiper = null;
this.lastScreenType = null;
this.installmentSelector = null;
this.card = {};
this.selectedLink = 'get_tap';

solutionsData.forEach((solution) => {
this.card[`${solution.id}SelectedInstallment`] = '12';
this.card[`${solution.id}Period`] = Object.keys(taxes[`${solution.id}`])[0];
});
};

this.initElements = () => {
this.sectionElement = document.querySelector('.s-solutions');
this.containerElement = this.sectionElement.querySelector('.c-solutions');
this.stickyContainer = this.sectionElement.querySelector('.sticky-container');
this.selectStickyContainer = this.sectionElement.querySelector('.select-sticky-container');
this.cleanCardsContent = this.sectionElement.querySelector('.clean-cards-content');
this.cleanCardsSwiperWrapper = this.cleanCardsContent.querySelector('.clean-cards-wrapper');
this.cardsContainer = this.sectionElement.querySelector('.cards-container');
};

this.createCards = () => {
this.cardsContainer.innerHTML = '';

solutionsData.forEach((solution, index) => {
const solutionCard = this.cardsContainer.appendChild(
Object.assign(document.createElement('div'), {
id: solution.id,
className: `card-container card-${solution.id}`,
style: "display: flex;"
})
);

this.createCardBody(solutionCard, solution);
this.setCardTaxesValues(solutionCard, solution.id);
});
console.log("passou")
};

this.createCardBody = (container, solution) => {
if (window.innerWidth > 719) {
this.createLeftContainer(container, solution);
this.createRightContainer(container, solution);
} else {
this.createMobileContainer(container, solution);
}
};

this.createLeftContainer = (container, solution) => {
const leftContainer = Object.assign(document.createElement('div'), {
className: 'left-container',
});

this.createCardImage(leftContainer, solution);

container.appendChild(leftContainer);
};

this.createRightContainer = (container, solution) => {
const rightContainer = Object.assign(document.createElement('div'), {
className: 'right-container',
});

this.createHeaderContainer(rightContainer, solution);
this.createCardBulletsContainer(rightContainer, solution);
this.createCardButtonsContainer(rightContainer, solution);
this.createCardNotes(rightContainer, solution);

container.appendChild(rightContainer);
};

this.createMobileContainer = (container, solution) => {
const mobileContainer = Object.assign(document.createElement('div'), {
className: 'mobile-container',
});

this.createHeaderContainer(mobileContainer, solution);
this.createCardTaxesContainer(mobileContainer, solution);
this.createCardBulletsContainer(mobileContainer, solution);
this.createCardButtonsContainer(mobileContainer, solution);

container.appendChild(mobileContainer);
};

this.createHeaderContainer = (container, solution) => {
const headerContainer = Object.assign(document.createElement('div'), {
className: 'header-container',
});

if (window.innerWidth > 719) {
this.createTitleContainer(headerContainer, solution);
this.createCardTaxesContainer(headerContainer, solution);
} else {
this.createCardImage(headerContainer, solution);
this.createTitleContainer(headerContainer, solution);
}

container.appendChild(headerContainer);
};

this.createTitleContainer = (container, solution) => {
const titleContainer = Object.assign(document.createElement('div'), {
className: 'title-container',
});

this.createCardName(titleContainer, solution);
this.createCardDescription(titleContainer, solution);
this.createPriceContainer(titleContainer, solution);

container.appendChild(titleContainer);
};

this.createCardImage = (container, solution) => {
container.appendChild(
Object.assign(document.createElement('div'), {
className: 'card-image',
innerHTML: `<img class='skip-lazy' src="${solution.image.src}" alt="${solution.image.alt}">`,
})
);
};

this.createCardName = (container, solution) => {
container.appendChild(
Object.assign(document.createElement('h4'), {
className: 'card-name',
innerHTML: `${solution.name}`,
})
);
};

this.createCardDescription = (container, solution) => {
container.appendChild(
Object.assign(document.createElement('p'), {
className: 'card-description',
innerHTML: `${solution.description}`,
})
);
};

this.createPriceContainer = (container, solution) => {
if (!solution.price) return;

const priceContainer = Object.assign(document.createElement('div'), {
className: 'price-container',
innerHTML: `
<div class="price-wrapper">
<p class="gnt-bold gnt-highlight currency">R$</p>
<h3 class="gnt-highlight integer">${solution.price.integer}</h3>
<p class="gnt-bold gnt-highlight decimal">${solution.price.decimals}</p>
</div>
<p class="per-month">p/mês</p>
`,
});

container.appendChild(priceContainer);
};

this.createCardTaxesContainer = (container, solution) => {
const taxesContainer = Object.assign(document.createElement('div'), {
className: 'card-taxes-container',
});

this.createPeriodOptionsContainer(taxesContainer, solution);
this.createTaxesContainer(taxesContainer, solution);

container.appendChild(taxesContainer);
};

this.createPeriodOptionsContainer = (container, solution) => {
const optionsContainer = Object.assign(document.createElement('div'), {
className: 'options-container',
innerHTML: '<p>Recebimento em</p>',
});

this.createPeriodOptionsWrapper(optionsContainer, solution);

container.appendChild(optionsContainer);
};

this.createTaxesContainer = (container, solution) => {
const taxesContainer = Object.assign(document.createElement('div'), {
className: 'taxes-container',
innerHTML: `
<div class="container-tag">
<div class="seal-container-2">
<img src="https://site.getnet.com.br/wp-content/uploads/2024/11/getnet_08_11_selo-1.png"
alt="selo black friday"
title="black friday"
class="seal"/>
</div>
</div>

<div class="tax-card">
<p class="debit-tax gnt-subtitle gnt-bold"></p>
<p class="p-small">Débito</p>
</div>
<div class="tax-card">
<p class="credit-tax gnt-subtitle gnt-bold"></p>
<p class="p-small">Crédito</p>
</div>
<div class="tax-card credit-12-tax">
<div class="credit-12-tax-selector gn-select"></div>
</div>
`,
});

this.creditTaxesSelector = taxesContainer.querySelector('.credit-12-tax-selector');

container.appendChild(taxesContainer);
};

this.setupCardTaxesSelect = (cardType, taxesRange, selectedInstallment, taxesSelector) => {
const select = Object.assign(document.createElement('select'), {
id: `${cardType}-taxes-select`,
name: 'taxes-select',
className: 'field-input',
});
select.setAttribute('data-eventcategory', 'lp-produtos-digitais');

Object.entries(this.getAllInstallments(cardType, taxesRange)).forEach(([id, installment]) => {
if (id != 0 && id != 1) {
const option = Object.assign(document.createElement('option'), {
selected: selectedInstallment === id,
value: id,
innerHTML: `<p class="gnt-subtitle gnt-bold">${installment.tax}%</p><p class="p-small">${installment.title}</p>`,
});
option.setAttribute('data-eventlabel', installment.eventLabel);
select.appendChild(option);
}
});

selectedInstallment = select.options[select.selectedIndex].value;
taxesSelector.innerHTML = '';
taxesSelector.appendChild(select);

this.installmentSelector = new GetnetSelect(taxesSelector, {});
};

this.setCardTaxesValues = (card, cardId) => {
const debitElement = card.querySelector('.debit-tax');
const creditElement = card.querySelector('.credit-tax');
const creditSelectorElement = card.querySelector('.credit-12-tax-selector');
const taxesPeriodSelected = taxes[cardId][this.card[`${cardId}Period`]];
const taxesInstallmentSelected = taxes[cardId][this.card[`${cardId}SelectedInstallment`]];

debitElement.innerText = taxesPeriodSelected.installments[0].tax + '%';
creditElement.innerText = taxesPeriodSelected.installments[1].tax + '%';

this.setupCardTaxesSelect(cardId, this.card[`${cardId}Period`], taxesInstallmentSelected, creditSelectorElement);
};

this.getAllInstallments = (cardType, taxesRange) => {
return taxes[cardType][taxesRange].installments;
};

this.createPeriodOptionsWrapper = (optionsContainer, solution) => {
const optionsWrapper = Object.assign(document.createElement('div'), {
className: 'options-wrapper',
});

this.createPeriodOptions(optionsWrapper, solution);

optionsContainer.appendChild(optionsWrapper);
};

this.createPeriodOptions = (optionsContainer, solution) => {
const solutionTaxes = taxes[solution.id];

Object.entries(solutionTaxes).forEach(([key, value], index) => {
const selectorOption = Object.assign(document.createElement('p'), {
className: `p-small option-selector`,
innerHTML: `${value.title}`,
});

selectorOption.setAttribute('option-value', key);
selectorOption.setAttribute('data-type', 'lp-produtos-digitais');
selectorOption.setAttribute('data-value', `${solution.id}-recebimento-${key}`);
selectorOption.addEventListener('click', this.handlePeriodSelection.bind(this));

if (index === 0) {
selectorOption.classList.add('active');
}

optionsContainer.appendChild(selectorOption);
});
};

this.handlePeriodSelection = (event) => {
const cardContainer = event.target.closest('.card-container');
const cardContainerId = cardContainer.getAttribute('id');
const cardPeriodOptions = document.querySelectorAll(`#${cardContainerId} .option-selector`);

cardPeriodOptions.forEach((option) => {
option.classList.remove('active');

const periodTarget = event.target.getAttribute('option-value');
periodTarget === option.getAttribute('option-value') && option.classList.add('active');

this.card[`${cardContainerId}Period`] = periodTarget;
});

this.setCardTaxesValues(cardContainer, cardContainerId);
};

this.createCardBulletsContainer = (container, solution) => {
const bulletContainer = Object.assign(document.createElement('div'), {
className: 'bullets-container',
});

this.createCardBulletItem(bulletContainer, solution);

container.appendChild(bulletContainer);
};

this.createCardBulletItem = (container, solution) => {
solution.bullets.forEach((bullet) => {
const bulletItem = Object.assign(document.createElement('div'), {
className: 'bullet-item',
});

this.createBulletIcon(bulletItem, bullet);
this.createBulletText(bulletItem, bullet);

container.appendChild(bulletItem);
});
};

this.createBulletIcon = (bulletItem, bullet) => {
bulletItem.appendChild(
Object.assign(document.createElement('i'), {
className: `gnt-icon ${bullet.icon}-icon`,
})
);
};

this.createBulletText = (bulletItem, bullet) => {
bulletItem.appendChild(
Object.assign(document.createElement('p'), {
className: `p-small`,
innerHTML: `${bullet.text}`,
})
);
};

this.createCardButtonsContainer = (container, solution) => {
const buttonsContainer = Object.assign(document.createElement('div'), {
className: 'buttons-container',
});

this.createButtons(buttonsContainer, solution.buttons);

container.appendChild(buttonsContainer);
};

var idx = 0;
this.createButtons = (buttonsContainer, buttons) => {

buttons.forEach((button, index) => {

if(index == 0){
buttonsContainer.appendChild(
Object.assign(document.createElement('a'), {
className: `gnt-button ${button.type} js-solucoes-produto js-gtm-trigger js-gtm-analytics`,
innerHTML: `${button.label}`,
href: `${button.href}`,
})
);

buttonsContainer.children[0].setAttribute('data-type', solutionsData[idx].buttons[0].attributes['data-type']);
buttonsContainer.children[0].setAttribute('data-value', solutionsData[idx].buttons[0].attributes['data-value']);
buttonsContainer.children[0].setAttribute('data-item', solutionsData[idx].buttons[0].attributes['data-item']);
buttonsContainer.children[0].setAttribute('data-id', solutionsData[idx].buttons[0].attributes['data-id']);
buttonsContainer.children[0].setAttribute('data-name', solutionsData[idx].buttons[0].attributes['data-name']);
buttonsContainer.children[0].setAttribute('data-price', solutionsData[idx].buttons[0].attributes['data-price']);
buttonsContainer.children[0].setAttribute('data-brand', solutionsData[idx].buttons[0].attributes['data-brand']);
buttonsContainer.children[0].setAttribute('data-category', solutionsData[idx].buttons[0].attributes['data-category']);
buttonsContainer.children[0].setAttribute('data-events', solutionsData[idx].buttons[0].attributes['data-events']);

idx = idx + 1;
}
else{
buttonsContainer.appendChild(
Object.assign(document.createElement('a'), {
className: `gnt-button ${button.type}`,
innerHTML: `${button.label}`,
href: `${button.href}`,
})
);
}
});

};

this.createCardNotes = (rightContainer, solution) => {
if (!solution.notes) return;

rightContainer.appendChild(
Object.assign(document.createElement('p'), {
className: 'p-tiny gnt-neutral-500',
innerHTML: `${solution.notes}`,
})
);
};

this.createCleanCardsItems = () => {
solutionsData.forEach((solution) => {
this.createCleanCardsItem(this.cleanCardsSwiperWrapper, solution);
});
};

this.createCleanCardsItem = (container, solution) => {
const cleanCardsItem = Object.assign(document.createElement('div'), {
className: 'clean-cards-item swiper-slide',
});

this.createCleanCardsItemIcon(cleanCardsItem, solution.icon);
this.createCleanCardsItemTextContainer(cleanCardsItem, solution);

container.appendChild(cleanCardsItem);
};

this.createCleanCardsItemIcon = (container, icon) => {
container.appendChild(
Object.assign(document.createElement('div'), {
className: `clean-cards-item-icon-container gnt-icon-container-56`,
innerHTML: `<i class="clean-cards-item-icon gnt-icon ${icon}-icon" />`,
})
);
};

this.createCleanCardsItemTextContainer = (container, solution) => {
const cleanCardsTextContainer = Object.assign(document.createElement('div'), {
className: 'clean-cards-item-text-container',
});

this.createCleanCardsItemTitle(cleanCardsTextContainer, solution.name);
this.createCleanCardsItemDescription(cleanCardsTextContainer, solution.description);
this.createCleanCardsItemButton(cleanCardsTextContainer, solution.id);

container.appendChild(cleanCardsTextContainer);
};

this.createCleanCardsItemTitle = (container, title) => {
container.appendChild(
Object.assign(document.createElement('h6'), {
className: 'clean-cards-item-title',
innerHTML: title,
})
);
};

this.createCleanCardsItemDescription = (container, description) => {
container.appendChild(
Object.assign(document.createElement('p'), {
className: 'clean-cards-item-description',
innerHTML: description,
})
);
};

this.createCleanCardsItemButton = (container, id) => {
container.appendChild(
Object.assign(document.createElement('a'), {
className: 'clean-cards-item-button gnt-button gnt-button-primary-outline js-gtm-trigger',
innerHTML: 'confira',
href: `#${id}`,
})
);
};

this.setupSwiper = () => {

if (this.swiper) {
this.swiper.destroy();
}

const currentScreenType = this.setupScreenSizeType();

if (this.lastScreenType !== currentScreenType) {
this.lastScreenType = currentScreenType;
this.swiper?.destroy();

if (this.isTablet || this.isMobile) {
this.swiper = new Swiper(`#solucoes .clean-cards-swiper`, {
slidesPerView: 1,
spaceBetween: 16,
pagination: {
el: `#solucoes .swiper-pagination-clean-card`,
clickable: true,
},
breakpoints: {
320: {
slidesPerView: 1,
},
450: {
slidesPerView: 1.2,
},
650: {
slidesPerView: 1.5,
},
},
});
}
}
};

this.onOptionSelect = (item) => {
const selectedValue = item.getAttribute('value');
// console.log(`Option selected: ${selectedValue}`);
};

this.setupSelectSticky = () => {
const select = Object.assign(document.createElement('select'), {
id: `select-sticky`,
name: 'select-sticky',
className: 'field-input',
});
select.setAttribute('data-eventcategory', 'lp-produtos-digitais');

solutionsData.forEach((solution) => {
const option = Object.assign(document.createElement('option'), {
selected: this.selectedLink === solution.id,
value: solution.id,
innerHTML: `<a href='#${solution.id}'><i class='gnt-icon ${solution.icon}-icon'></i><h6>${solution.name}</h6></a>`,
});
option.setAttribute('data-eventlabel', `select-${solution.id}`);
select.appendChild(option);
});

this.selectedLink = select.options[select.selectedIndex].value;
this.selectStickyContainer.innerHTML = '';
this.selectStickyContainer.appendChild(select);

this.installmentSelector = new GetnetSelect(this.selectStickyContainer, {
// handleSelectChange: this.onOptionSelect,
});
};

this.createStickyContainer = () => {
if (this.isMobile) {
this.stickyContainer.classList.add('hidden');
this.selectStickyContainer.classList.remove('hidden');

this.setupSelectSticky();
} else {
this.selectStickyContainer.classList.add('hidden');
this.stickyContainer.classList.remove('hidden');

this.stickyContainer.querySelector('.gnt-container').innerHTML = '';

solutionsData.forEach((solution) => {
this.stickyContainer.querySelector('.gnt-container').appendChild(
Object.assign(document.createElement('a'), {
className: `sticky-link link-${solution.id}`,
innerHTML: `<i class='gnt-icon ${solution.icon}-icon'></i><h6>${solution.name}</h6>`,
href: `#${solution.id}`,
})
);
});
}
};

this.hideOptions = (element) => {
element.classList.remove('stick-active');
};

this.showOptions = (element) => {
element.classList.add('stick-active');
};

this.handleCleanCardsContentIntersecting = (isIntersecting) => {
if (!isIntersecting) {
this.isMobile ? this.showOptions(this.selectStickyContainer) : this.showOptions(this.stickyContainer);
} else {
this.isMobile ? this.hideOptions(this.selectStickyContainer) : this.hideOptions(this.stickyContainer);
}
};

this.setLinkAsActive = (elementId) => {
if (this.isMobile) {
const stickyLinks = this.selectStickyContainer.querySelectorAll('.gn-select-option-item');
stickyLinks.forEach((link) => {
elementId === link.getAttribute('value') && link.click();
});
} else {
const stickyLinks = this.stickyContainer.querySelectorAll('.sticky-link');
stickyLinks.forEach((link) => link.classList.remove('active'));

this.stickyContainer.querySelector(`.link-${elementId}`).classList.add('active');
}
};

this.handleCardsIntersecting = (entry) => {
if (entry.isIntersecting) {
const activeCardId = entry.target.getAttribute('id');
this.setLinkAsActive(activeCardId);
}
};

this.observeElements = () => {
const observerCallback1 = (entries) => {
entries.forEach((entry) => {
if (entry.target === this.cleanCardsContent) {
this.handleCleanCardsContentIntersecting(entry.isIntersecting);
}
});
};

const observer1 = new IntersectionObserver(observerCallback1, {
root: null,
threshold: 0.1,
});

observer1.observe(this.cleanCardsContent);

const observerCallback2 = (entries) => {
entries.forEach((entry) => {
if (entry.target.classList.contains('card-container')) {
this.handleCardsIntersecting(entry);
}
});
};

const observer2 = new IntersectionObserver(observerCallback2, {
root: null,
threshold: 0.2,
});

const cardContainer = this.containerElement.querySelectorAll('.card-container');
cardContainer.forEach((card) => {
observer2.observe(card);
});
};

this.setupScreenSizeType = () => {

const width = window.innerWidth;
let screenType;

if (width < 600) {
this.isMobile = true;
this.isTablet = this.isLaptop = this.isDesktop = false;
screenType = 'mobile';
} else if (width < 992) {
this.isTablet = true;
this.isMobile = this.isLaptop = this.isDesktop = false;
screenType = 'tablet'
} else if (width < 1200) {
this.isLaptop = true;
this.isMobile = this.isTablet = this.isDesktop = false;
screenType = 'desktop'
}

return screenType
};

// this.setupScreenSizeType = () => {
// this.isDesktop = this.isLaptop = this.isTablet = this.isMobile = false;
// if (window.innerWidth < 600) {
// this.isMobile = true;
// return 'mobile';
// } else if (window.innerWidth < 992) {
// this.isTablet = true;
// return 'tablet';
// } else if (window.innerWidth < 1200) {
// this.isLaptop = true;
// return 'laptop';
// } else {
// this.isDesktop = true;
// return 'desktop';
// }
// };
}
return new Module();
})();

window.addEventListener('DOMContentLoaded', () => {
solutionsModule.createCards();

setTimeout(() => {
solutionsModule.setupSwiper();
solutionsModule.createStickyContainer();
solutionsModule.setLinkAsActive();
}, 100);
});

window.addEventListener('DOMContentLoaded', solutionsModule.init);

window.addEventListener('resize', function () {
solutionsModule.createCards();
solutionsModule.setupSwiper();
solutionsModule.createStickyContainer();
solutionsModule.setLinkAsActive ();
});

</script>