code.js

// script.js
document.addEventListener('DOMContentLoaded', () => {
    
    // --- IMPORTANT: CONFIGURE THESE TWO VARIABLES ---
    const EMAIL_FORM_ENDPOINT = 'YOUR_EMAIL_MARKETING_SERVICE_FORM_ENDPOINT_HERE';
    const AFFILIATE_REDIRECT_URL = 'https://YOUR_CLICKBANK_AFFILIATE_LINK_HERE';
    // ------------------------------------------------

    const slides = document.querySelectorAll('.slide');
    let currentSlideIndex = 0;
    const userData = {};

    function showSlide(index) {
        slides.forEach((slide, i) => {
            slide.classList.toggle('active', i === index);
        });
    }

    // --- Event Listeners for Buttons ---
    document.querySelectorAll('.next-btn, .option-btn, .icon-option').forEach(btn => {
        btn.addEventListener('click', (e) => {
            // Store data if available
            const slideId = e.currentTarget.closest('.slide').id;
            const value = e.currentTarget.dataset.value;
            if (value) {
                userData[slideId] = value;
            }
            if (e.currentTarget.classList.contains('icon-option')) {
                document.querySelectorAll('.icon-option').forEach(opt => opt.classList.remove('selected'));
                e.currentTarget.classList.add('selected');
            }

            // Go to the next slide after a short delay for animations
            setTimeout(() => {
                currentSlideIndex++;
                showSlide(currentSlideIndex);
            }, 200);
        });
    });

    // --- Specific Logic for Date Input ---
    document.getElementById('birthdate-next').addEventListener('click', () => {
        const birthdate = document.getElementById('birthdate-input').value;
        if (birthdate) {
            userData['birthdate'] = birthdate;
            currentSlideIndex++;
            showSlide(currentSlideIndex);
        } else {
            alert('Please select your birth date.');
        }
    });

    // --- Logic for Email Form Submission ---
    const emailForm = document.getElementById('email-form');
    emailForm.addEventListener('submit', (e) => {
        e.preventDefault();

        const formData = new FormData(emailForm);
        const firstName = formData.get('first_name');
        userData['firstName'] = firstName;
        userData['email'] = formData.get('email');
        
        // Post data to your email service
        fetch(EMAIL_FORM_ENDPOINT, {
            method: 'POST',
            body: formData,
            mode: 'no-cors' // Use 'no-cors' if submitting to a simple form endpoint that might block cross-origin requests.
        }).catch(error => console.error('Error:', error));
        
        // Transition to loading screen
        currentSlideIndex++;
        showSlide(currentSlideIndex);
        startLoadingSequence();
    });

    // --- Loading and Redirect Sequence ---
    function startLoadingSequence() {
        const loadingText = document.getElementById('loading-text');
        setTimeout(() => {
            loadingText.textContent = 'Analyzing your planetary alignments...';
        }, 1500);
        setTimeout(() => {
            loadingText.textContent = 'Decoding your unique karmic path...';
        }, 3000);
        setTimeout(() => {
            // Move to the final redirect slide
            currentSlideIndex++;
            showSlide(currentSlideIndex);
            document.getElementById('user-name').textContent = userData.firstName || 'friend';
            startCountdown();
        }, 4500);
    }

    function startCountdown() {
        let count = 5;
        const countdownElement = document.getElementById('countdown');
        const interval = setInterval(() => {
            count--;
            countdownElement.textContent = count;
            if (count <= 0) {
                clearInterval(interval);
                window.location.href = AFFILIATE_REDIRECT_URL;
            }
        }, 1000);
    }

    // Initialize first slide
    showSlide(0);
});