jQuery(function($){

	$(document).ready(function(){
		
		$('.mnd_block_03_carousel').slick({
			dots: true,
			infinite: false,
			speed: 300,
			slidesToShow: 4,
			slidesToScroll: 4,
			arrows: false,
			responsive: [
			  {
				breakpoint: 1100,
				settings: {
				  slidesToShow: 2,
				  slidesToScroll: 2,
				  infinite: false,
				  dots: true,
				  variableWidth: true,
				}
			  },
			  {
				breakpoint: 575,
				settings: {
				  slidesToShow: 1,
				  slidesToScroll: 1,
				  variableWidth: true,
				}
			  },

			]
		  });
		

		  $('.mnd_block_04_carousel').slick({
			dots: true,
			infinite: false,
			speed: 300,
			slidesToShow: 4,
			slidesToScroll: 4,
			arrows: false,
			responsive: [
			  {
				breakpoint: 1100,
				settings: {
				  slidesToShow: 2,
				  slidesToScroll: 2,
				  infinite: false,
				  dots: true,
				  variableWidth: true,
				}
			  },
			  {
				breakpoint: 575,
				settings: {
				  slidesToShow: 1,
				  slidesToScroll: 1,
				  variableWidth: true,
				}
			  },

			]
		  });

		  
		  $('.mnd_block_05_carousel').slick({
			dots: true,
			infinite: false,
			speed: 300,
			slidesToShow: 4,
			slidesToScroll: 4,
			arrows: false,
			responsive: [
			  {
				breakpoint: 1100,
				settings: {
				  slidesToShow: 2,
				  slidesToScroll: 2,
				  infinite: false,
				  dots: true,
				  variableWidth: true,
				}
			  },
			  {
				breakpoint: 575,
				settings: {
				  slidesToShow: 1,
				  slidesToScroll: 1,
				  variableWidth: true,
				}
			  },

			]
		  });


		  $('.mnd_block_06_carousel').slick({
			dots: true,
			infinite: false,
			speed: 300,
			slidesToShow: 4,
			slidesToScroll: 4,
			arrows: false,
			responsive: [
			  {
				breakpoint: 1100,
				settings: {
				  slidesToShow: 2,
				  slidesToScroll: 2,
				  infinite: false,
				  dots: true,
				  variableWidth: true,
				}
			  },
			  {
				breakpoint: 575,
				settings: {
				  slidesToShow: 1,
				  slidesToScroll: 1,
				  variableWidth: true,
				}
			  },

			]
		  });

		  $('.gyp_feedback_block').slick({
			dots: true,
			infinite: false,
			speed: 300,
			slidesToShow: 4,
			slidesToScroll: 4,
			arrows: false,
			responsive: [
			  {
				breakpoint: 1100,
				settings: {
				  slidesToShow: 2,
				  slidesToScroll: 2,
				  infinite: false,
				  dots: true,
				  variableWidth: true,
				}
			  },
			  {
				breakpoint: 575,
				settings: {
				  slidesToShow: 1,
				  slidesToScroll: 1,
				  variableWidth: true,
				}
			  },

			]
		  });
		  

		  function initSlick() {
			$('#gyp_block_03_carousel').slick({
			  dots: true,
			  infinite: false,
			  speed: 300,
			  slidesToShow: 4,
			  slidesToScroll: 4,
			  arrows: false,
			  responsive: [
				{
				  breakpoint: 1100,
				  settings: {
					slidesToShow: 2,
					slidesToScroll: 2,
					infinite: false,
					dots: true,
					variableWidth: true,
				  }
				},
				{
				  breakpoint: 575,
				  settings: {
					slidesToShow: 2,
					slidesToScroll: 1,
					variableWidth: true,
				  }
				},
				{
					breakpoint: 480,
					settings: {
					  slidesToShow: 1,
					  slidesToScroll: 1,
					  variableWidth: true,
					}
				  }
			  ]
			});
		  }
		
		  function destroySlick() {
			if ($('#gyp_block_03_carousel').hasClass('slick-initialized')) {
			  $('#gyp_block_03_carousel').slick('unslick');
			}
		  }
		
		  function checkWidth() {
			var windowWidth = $(window).width();
			if (windowWidth < 1181) {
			  initSlick();
			} else {
			  destroySlick();
			}
		  }
		
		  // Eseményfigyelő az ablak átméretezésére
		  $(window).resize(function() {
			checkWidth();
		  });
		
		  // Kezdeti ellenőrzés
		  checkWidth();
	
	});
	
});


document.addEventListener("DOMContentLoaded", function() {
    const filters = document.querySelectorAll(".filter");
    const title = document.getElementById("content-title");
    const image = document.getElementById("content-image");
    const descriptions = document.querySelectorAll(".content-description");
    const content = document.querySelector(".content");
	const scrollToTopBtn = document.getElementById("scrollToTop");

    const contentData = {
        1: {
            title: "Mátyás Gábor <br /> Gyakornok",
            image: "img/milyen-nalunk-dolgozni/matyas-gabor-full.webp"
        },
        2: {
            title: "Konrád Alíz <br /> Specialista",
            image: "img/milyen-nalunk-dolgozni/konrad-aliz-full.webp"
        },
        3: {
            title: "Bondor Dániel<br /> BSS Engineer",
            image: "img/milyen-nalunk-dolgozni/bondor-daniel-full.webp"
        },
        4: {
            title: "Szeleczki Ádám<br /> Decision Support Expert",
            image: "img/milyen-nalunk-dolgozni/szeleczki-adam-full.webp"
        },
        5: {
            title: "Tardi Zsolt <br /> Adatmenedzsment munkatárs",
            image: "img/milyen-nalunk-dolgozni/tardi-zsolt-full.webp"
        }
    };

    filters.forEach(filter => {
        filter.addEventListener("click", function() {
            // Remove active class from all filters
            filters.forEach(f => f.classList.remove("active_tab"));
            
            // Add active class to the clicked filter
            this.classList.add("active_tab");
            
            // Get the id of the clicked filter
            const id = this.getAttribute("data-id");
            
            // Update the content
            title.innerHTML = contentData[id].title; // Use innerHTML to handle HTML content
            image.src = contentData[id].image;

            // Hide all descriptions
            descriptions.forEach(desc => desc.classList.remove("active"));
            
            // Show the selected description
            document.getElementById(`description-${id}`).classList.add("active");

            // Scroll to the content
            content.scrollIntoView({ behavior: 'smooth' });
        });
    });

	 // Show/hide scroll to top button
	 window.addEventListener('scroll', function() {
        if (window.scrollY > 0) {
            scrollToTopBtn.classList.add('show');
        } else {
            scrollToTopBtn.classList.remove('show');
        }
    });

    // Scroll to top when button is clicked
    scrollToTopBtn.addEventListener('click', function() {
        window.scrollTo({ top: 0, behavior: 'smooth' });
    });
});