// Initialize DOM-dependent variables once the document is ready
let elementsToShow;
$(document).ready(function () {
   elementsToShow = $(".hide"); // Select elements to show later
	setTimeout(function() {
		$(".volume").slideUp(1500);
		$(".notice").css("visibility", "hidden");
	},5000);
  
  const isVisible = localStorage.getItem("elementsVisible"); // Check visibility state from localStorage

    // Check if elements should be visible on page load
    if (isVisible === "true") {
        elementsToShow.fadeIn();
        smoothScrollTo(document.documentElement, document.querySelector(".cta-main").offsetTop, 2000);
        callbacks1.fire(startClock1); // Retain the timer on reload if needed
    }
  
});

/* Get Started */


    // Event listener for the click
    $("#getStarted").click(function () {
        elementsToShow.fadeIn();
console.log("button clicked");
        // Custom smooth scroll with slower speed (adjust the duration here)
        smoothScrollTo(document.documentElement, document.querySelector(".cta-main").offsetTop, 2000);

        // Timer on Purchase Boxes
        callbacks1.fire(startClock1);

        // Save visibility state to localStorage
        localStorage.setItem("elementsVisible", "true");
    });

function smoothScrollTo(element, target, duration) {
	let start = element.scrollTop;
	let change = target - start;
	let currentTime = 0;
	let increment = 20;

	function animateScroll() {
		currentTime += increment;
		let val = easeInOutQuad(currentTime, start, change, duration);
		element.scrollTop = val;
		if (currentTime < duration) {
			requestAnimationFrame(animateScroll);
		}
	}
	animateScroll();
}

function easeInOutQuad(t, b, c, d) {
	t /= d / 2;
	if (t < 1) return c / 2 * t * t + b;
	t--;
	return -c / 2 * (t * (t - 2) - 1) + b;
}
/* Purchase Boxes Timer */
function startClock1(){
	var clock = $('.flipclock1').FlipClock(1800, {
		clockFace: 'MinuteCounter',
		countdown: true,
		callbacks: {
			stop: function() {
				warning = false;
				$(".purchaseCounterStart").hide();
				$(".purchaseCounterEnd").fadeIn();
			}
		}
	}); 
}

var callbacks1 = $.Callbacks("once");
callbacks1.add(startClock1);

// Use IntersectionObserver to check when .cta-main becomes visible
const ctaMain = document.querySelector('.cta-main');

if (ctaMain) {
    const observer = new IntersectionObserver(function(entries, observer) {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                // .cta-main is visible
                callbacks1.fire(startClock1); // Trigger the timer
                observer.disconnect(); // Stop observing once the element is visible to prevent repeated calls
            }
        });
    }, {
        root: null, // Use the viewport as the root
        threshold: 0.1 // Fire when 10% of the element is visible
    });

    observer.observe(ctaMain); // Start observing the .cta-main element
}

//Exit Modal 
$.fn.isOnScreen=function(){var t=$(window),o={top:t.scrollTop(),left:t.scrollLeft()};o.right=o.left+t.width(),o.bottom=o.top+t.height();var e=this.offset();return e.right=e.left+this.outerWidth(),e.bottom=e.top+this.outerHeight(),!(o.right<e.left||o.left>e.right||o.bottom<e.top||o.top>e.bottom)};


$(document).ready(function() {
	// Start Timer
	function startClock(){
		var clock = $('.flipclock2').FlipClock(119, {
			clockFace: 'MinuteCounter',
			countdown: true,
			callbacks: {
				stop: function() {
					warning = false;
				}
			}
		});
	}

	var callbacks2 = $.Callbacks("once"); 
	callbacks2.add(startClock);

	//Mouse Detection   
setTimeout(function(){ 
var mouseX = 0;
var mouseY = 0;
var popupCounter = 0;
document.addEventListener("mousemove", function(e) {
	mouseX = e.clientX;
	mouseY = e.clientY;
});
$(document).mouseleave(function (event) {
var mouseY = event.clientY;

	// Check if the mouse leaves near the top of the page
	if (mouseY < 100) {
		// Check if .cta-main is visible
		// Only show #exit-modal once, and then don't show it again
		if (popupCounter < 1) {
			UIkit.modal("#exit-modal").show();
			callbacks2.fire(startClock); // Assuming startClock is a function you're triggering
			popupCounter++; // Increment the popup counter, ensuring this modal shows only once
		}
		
	}
});


}, 5000);//Timing for when first popup appears

});
//Today's Date
// Function to get today's date in MM/DD/YYYY format
function getFormattedDate() {
	let today = new Date();
	let month = String(today.getMonth() + 1).padStart(2, '0'); // Months are zero-based
	let day = String(today.getDate()).padStart(2, '0');
	let year = today.getFullYear();

	return month + '/' + day + '/' + year;
}

// Insert the formatted date into elements with the class "date"
document.querySelectorAll('.date').forEach(function(element) {
	element.textContent = getFormattedDate();
});

/* FAQ */
// Select all elements with the class 'uk-accordion-title'
const accordionTitles = document.querySelectorAll('.uk-accordion-title');

// Function to toggle the text color based on aria-expanded
function toggleTextColor() {
    accordionTitles.forEach(title => {
        // Check the value of aria-expanded
        if (title.getAttribute('aria-expanded') === 'true') {
            title.classList.remove('text-neutral-700');
            title.classList.add('text-teal-700');
        } else {
            title.classList.remove('text-teal-700');
            title.classList.add('text-neutral-700');
        }
    });
}

// Add event listeners to each title to handle the click event
accordionTitles.forEach(title => {
    title.addEventListener('click', () => {
        // Toggle the aria-expanded attribute
        const isExpanded = title.getAttribute('aria-expanded') === 'true';
        title.setAttribute('aria-expanded', !isExpanded);
        
        // Call the function to toggle text color
        toggleTextColor();
    });
});
//Glisten effect on guarantee badge
let lastScrollTop = 0;
let ticking = false;

document.addEventListener('scroll', function () {
    const badge = document.querySelector('.glisten');
    const rect = badge.getBoundingClientRect();

    // Only run if the badge is within the viewport
    if (rect.top >= 0 && rect.bottom <= window.innerHeight) {
        // Only trigger the animation when scrolling
        const currentScrollTop = window.pageYOffset || document.documentElement.scrollTop;

        // Check the scroll direction
        const scrollDirection = currentScrollTop > lastScrollTop ? 'down' : 'up';
        lastScrollTop = currentScrollTop;

        // Request animation frame for smooth animation
        if (!ticking) {
            window.requestAnimationFrame(() => {
                triggerReflectionAnimation(badge, scrollDirection);
                ticking = false;
            });
            ticking = true;
        }
    }
});

// Function to trigger light reflection based on scroll direction
function triggerReflectionAnimation(badge, direction) {
    if (direction === 'down') {
        badge.classList.add('glisten-active-down'); // Animation for scrolling down
        badge.classList.remove('glisten-active-up'); // Remove upward animation
    } else {
        badge.classList.add('glisten-active-up'); // Animation for scrolling up
        badge.classList.remove('glisten-active-down'); // Remove downward animation
    }
}