script.js

// DOM Elements
const popupOverlay = document.querySelector('.popup-overlay');
const closeButton = document.querySelector('.close-button');
const exitIntent = document.querySelector('.exit-intent');
const stayButton = document.querySelector('.stay-button');
const leaveButton = document.querySelector('.leave-button');

// Countdown Elements
const daysElement = document.querySelector('.countdown-number[data-unit="days"]');
const hoursElement = document.querySelector('.countdown-number[data-unit="hours"]');
const minutesElement = document.querySelector('.countdown-number[data-unit="minutes"]');
const secondsElement = document.querySelector('.countdown-number[data-unit="seconds"]');

// Progress Bar Elements
const progressFill = document.querySelector('.progress-fill');
const soldCount = document.querySelector('.sold-count');
const remainingCount = document.querySelector('.remaining-count');

// Campaign Settings
const campaignEndDate = new Date();
campaignEndDate.setDate(campaignEndDate.getDate() + 3); // 3 days from now
const totalItems = 100;
const soldItems = 47;
const remainingItems = totalItems - soldItems;

// Initialize Campaign
function initCampaign() {
    updateProgressBar();
    startCountdown();
    setupEventListeners();
}

// Update Progress Bar
function updateProgressBar() {
    const progressPercentage = (soldItems / totalItems) * 100;
    progressFill.style.width = `${progressPercentage}%`;
    soldCount.textContent = soldItems;
    remainingCount.textContent = remainingItems;
}

// Countdown Timer
function startCountdown() {
    function updateCountdown() {
        const now = new Date();
        const timeLeft = campaignEndDate - now;

        if (timeLeft <= 0) {
            clearInterval(countdownInterval);
            return;
        }

        const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
        const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);

        daysElement.textContent = days.toString().padStart(2, '0');
        hoursElement.textContent = hours.toString().padStart(2, '0');
        minutesElement.textContent = minutes.toString().padStart(2, '0');
        secondsElement.textContent = seconds.toString().padStart(2, '0');
    }

    updateCountdown();
    const countdownInterval = setInterval(updateCountdown, 1000);
}

// Event Listeners
function setupEventListeners() {
    // Close Button Click
    closeButton.addEventListener('click', () => {
        popupOverlay.style.display = 'none';
        document.body.style.overflow = '';
    });

    // Exit Intent
    let mouseLeaveTimeout;
    document.addEventListener('mouseleave', (e) => {
        if (e.clientY <= 0) {
            mouseLeaveTimeout = setTimeout(() => {
                exitIntent.classList.add('active');
            }, 1000);
        }
    });

    document.addEventListener('mouseenter', () => {
        clearTimeout(mouseLeaveTimeout);
    });

    // Stay Button Click
    stayButton.addEventListener('click', () => {
        exitIntent.classList.remove('active');
    });

    // Leave Button Click
    leaveButton.addEventListener('click', () => {
        exitIntent.classList.remove('active');
        popupOverlay.style.display = 'none';
        document.body.style.overflow = '';
    });

    // Close on Escape Key
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape') {
            popupOverlay.style.display = 'none';
            exitIntent.classList.remove('active');
            document.body.style.overflow = '';
        }
    });

    // Close on Outside Click
    popupOverlay.addEventListener('click', (e) => {
        if (e.target === popupOverlay) {
            popupOverlay.style.display = 'none';
            document.body.style.overflow = '';
        }
    });
}

// Initialize Campaign on Load
document.addEventListener('DOMContentLoaded', initCampaign);