/*===============================================
Enhanced Index-4 JavaScript Interactions
===============================================*/

document.addEventListener('DOMContentLoaded', function() {
    // Initialize Enhanced Hero Interactions
    initHeroAnimations();
    
    // Initialize Testimonials Enhancements
    initTestimonialsEnhancements();
    
    // Initialize Pricing Cards Interactions
    initPricingInteractions();
    
    // Initialize AOS (Animate on Scroll) if available
    if (typeof AOS !== 'undefined') {
        AOS.init({
            duration: 800,
            easing: 'ease-out-cubic',
            once: true,
            offset: 100
        });
    }
});

/**
 * Hero Section Animations and Interactions
 */
function initHeroAnimations() {
    const heroSection = document.querySelector('.hero-area-four--revamped');
    if (!heroSection) return;

    // Parallax effect for background orbs
    const orbs = heroSection.querySelectorAll('.orb');
    let ticking = false;

    function updateOrbPositions() {
        const scrollY = window.scrollY;
        const heroHeight = heroSection.offsetHeight;
        const scrollPercent = Math.min(scrollY / heroHeight, 1);

        orbs.forEach((orb, index) => {
            const speed = 0.5 + (index * 0.2);
            const yOffset = scrollPercent * 100 * speed;
            orb.style.transform = `translateY(${yOffset}px)`;
        });

        ticking = false;
    }

    function requestTick() {
        if (!ticking) {
            requestAnimationFrame(updateOrbPositions);
            ticking = true;
        }
    }

    window.addEventListener('scroll', requestTick, { passive: true });

    // Play button interaction
    const playButton = heroSection.querySelector('.play-intro-btn');
    if (playButton) {
        playButton.addEventListener('click', function(e) {
            e.preventDefault();
            
            // Add pulse animation
            this.style.transform = 'scale(0.95)';
            setTimeout(() => {
                this.style.transform = 'scale(1)';
            }, 150);

            // Simulate video modal (you can replace with actual video modal)
            showVideoPreview();
        });
    }

    // Floating cards hover effect
    const floatingCards = heroSection.querySelectorAll('.floating-card');
    floatingCards.forEach(card => {
        card.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-10px) scale(1.02)';
        });

        card.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(-5px) scale(1)';
        });
    });

    // Quick signup form enhancement
    const quickSignupForm = heroSection.querySelector('.quick-signup');
    if (quickSignupForm) {
        const emailInput = quickSignupForm.querySelector('input[type="email"]');
        const submitButton = quickSignupForm.querySelector('.theme-btn');

        if (emailInput && submitButton) {
            emailInput.addEventListener('focus', function() {
                quickSignupForm.style.transform = 'scale(1.02)';
                quickSignupForm.style.boxShadow = '0 20px 60px rgba(0, 0, 0, 0.2)';
            });

            emailInput.addEventListener('blur', function() {
                quickSignupForm.style.transform = 'scale(1)';
                quickSignupForm.style.boxShadow = '';
            });

            // Real-time validation
            emailInput.addEventListener('input', function() {
                const email = this.value;
                const isValid = validateEmail(email);
                
                if (email.length > 0) {
                    if (isValid) {
                        this.style.borderColor = '#0fe493';
                        submitButton.disabled = false;
                        submitButton.style.opacity = '1';
                    } else {
                        this.style.borderColor = '#f4196d';
                        submitButton.disabled = true;
                        submitButton.style.opacity = '0.6';
                    }
                } else {
                    this.style.borderColor = '';
                    submitButton.disabled = false;
                    submitButton.style.opacity = '1';
                }
            });
        }
    }
}

/**
 * Testimonials Section Enhancements
 */
function initTestimonialsEnhancements() {
    // Initialize Slick Slider for Testimonials
    if ($('.testimonial-slider').length) {
        $('.testimonial-slider').slick({
            slidesToShow: 3,
            slidesToScroll: 1,
            dots: false,
            arrows: true,
            prevArrow: '.prev-arrow',
            nextArrow: '.next-arrow',
            autoplay: true,
            autoplaySpeed: 5000,
            centerMode: true,
            centerPadding: '0',
            speed: 800,
            cssEase: 'cubic-bezier(0.645, 0.045, 0.355, 1)',
            responsive: [
                {
                    breakpoint: 1200,
                    settings: {
                        slidesToShow: 2,
                        centerMode: false,
                        centerPadding: '20px'
                    }
                },
                {
                    breakpoint: 768,
                    settings: {
                        slidesToShow: 1,
                        centerMode: false
                    }
                }
            ]
        });
    }

    // Add testimonial rotation functionality (optional carousel)
    const testimonialGrid = document.querySelector('.testimonial-grid');
    if (testimonialGrid && testimonialCards.length > 3) {
        // This can be extended to create a carousel if needed
        addTestimonialCarousel(testimonialCards);
    }
}

/**
 * Pricing Cards Interactions
 */
function initPricingInteractions() {
    const pricingCards = document.querySelectorAll('.pricing-card');
    
    pricingCards.forEach(card => {
        // Enhanced hover effects
        card.addEventListener('mouseenter', function() {
            // Scale and glow effect
            this.style.transform = this.classList.contains('featured') 
                ? 'scale(1.08) translateY(-15px)' 
                : 'translateY(-15px) scale(1.05)';
            
            // Add glow effect
            if (this.classList.contains('featured')) {
                this.style.boxShadow = '0 25px 80px rgba(244, 25, 109, 0.4)';
            } else {
                this.style.boxShadow = '0 25px 60px rgba(0, 0, 0, 0.4)';
            }
        });

        card.addEventListener('mouseleave', function() {
            this.style.transform = this.classList.contains('featured') 
                ? 'scale(1.05) translateY(0)' 
                : 'translateY(0) scale(1)';
            this.style.boxShadow = '';
        });

        // Feature list animations
        const features = card.querySelectorAll('.pricing-features li');
        features.forEach((feature, index) => {
            feature.addEventListener('mouseenter', function() {
                this.style.transform = 'translateX(10px)';
                this.style.backgroundColor = 'rgba(255, 255, 255, 0.1)';
                this.style.borderRadius = '8px';
                this.style.padding = '12px 16px';
            });

            feature.addEventListener('mouseleave', function() {
                this.style.transform = 'translateX(0)';
                this.style.backgroundColor = 'transparent';
                this.style.borderRadius = '0';
                this.style.padding = '12px 0';
            });
        });

        // Button interaction enhancements
        const button = card.querySelector('.theme-btn, .theme-btn-outline');
        if (button) {
            button.addEventListener('mouseenter', function() {
                this.style.transform = 'translateY(-3px) scale(1.05)';
            });

            button.addEventListener('mouseleave', function() {
                this.style.transform = 'translateY(0) scale(1)';
            });

            button.addEventListener('mousedown', function() {
                this.style.transform = 'translateY(-1px) scale(0.98)';
            });

            button.addEventListener('mouseup', function() {
                this.style.transform = 'translateY(-3px) scale(1.05)';
            });
        }
    });

    // Price comparison functionality
    addPriceComparison();
}

/**
 * Helper Functions
 */
function validateEmail(email) {
    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return re.test(email);
}

function showVideoPreview() {
    // Create a simple modal for video preview
    const modal = document.createElement('div');
    modal.style.cssText = `
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.9);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10000;
        opacity: 0;
        transition: opacity 0.3s ease;
    `;

    const content = document.createElement('div');
    content.style.cssText = `
        background: white;
        padding: 2rem;
        border-radius: 16px;
        text-align: center;
        max-width: 400px;
        width: 90%;
        transform: scale(0.8);
        transition: transform 0.3s ease;
    `;

    content.innerHTML = `
        <h3 style="margin-bottom: 1rem; color: #242729;">Video Preview</h3>
        <p style="margin-bottom: 1.5rem; color: #6a737c;">Experience DatePress in action - see how our AI creates meaningful connections.</p>
        <div style="background: #f8fafc; padding: 2rem; border-radius: 12px; margin-bottom: 1.5rem;">
            <i class="fas fa-play" style="font-size: 3rem; color: #f4196d;"></i>
            <p style="margin-top: 1rem; font-size: 0.9rem; color: #6a737c;">1:10 Introduction Video</p>
        </div>
        <button class="close-modal" style="
            background: #f4196d;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 600;
        ">Close Preview</button>
    `;

    modal.appendChild(content);
    document.body.appendChild(modal);

    // Animate in
    requestAnimationFrame(() => {
        modal.style.opacity = '1';
        content.style.transform = 'scale(1)';
    });

    // Close functionality
    const closeBtn = content.querySelector('.close-modal');
    const closeModal = () => {
        modal.style.opacity = '0';
        content.style.transform = 'scale(0.8)';
        setTimeout(() => {
            document.body.removeChild(modal);
        }, 300);
    };

    closeBtn.addEventListener('click', closeModal);
    modal.addEventListener('click', (e) => {
        if (e.target === modal) closeModal();
    });

    // Close on Escape key
    const escapeHandler = (e) => {
        if (e.key === 'Escape') {
            closeModal();
            document.removeEventListener('keydown', escapeHandler);
        }
    };
    document.addEventListener('keydown', escapeHandler);
}

function addTestimonialCarousel(cards) {
    // This function can be expanded to create a testimonial carousel
    // For now, it adds a subtle rotation effect
    let currentIndex = 0;
    
    setInterval(() => {
        cards.forEach((card, index) => {
            card.style.opacity = index === currentIndex ? '1' : '0.7';
            card.style.transform = index === currentIndex 
                ? 'translateY(-5px) scale(1.02)' 
                : 'translateY(0) scale(1)';
        });
        
        currentIndex = (currentIndex + 1) % cards.length;
    }, 5000); // Rotate every 5 seconds
}

function addPriceComparison() {
    const pricingSection = document.querySelector('.pricing-area-four');
    if (!pricingSection) return;

    // Add a comparison toggle button
    const comparisonButton = document.createElement('button');
    comparisonButton.textContent = 'Compare Plans';
    comparisonButton.className = 'theme-btn-outline mx-auto mt-4 d-block';
    comparisonButton.style.cssText = `
        background: rgba(255, 255, 255, 0.1);
        border: 2px solid rgba(255, 255, 255, 0.3);
        color: white;
        padding: 12px 24px;
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.3s ease;
        margin: 2rem auto;
        display: block;
    `;

    comparisonButton.addEventListener('mouseenter', function() {
        this.style.background = 'rgba(255, 255, 255, 0.2)';
        this.style.borderColor = 'rgba(255, 255, 255, 0.5)';
        this.style.transform = 'translateY(-2px)';
    });

    comparisonButton.addEventListener('mouseleave', function() {
        this.style.background = 'rgba(255, 255, 255, 0.1)';
        this.style.borderColor = 'rgba(255, 255, 255, 0.3)';
        this.style.transform = 'translateY(0)';
    });

    comparisonButton.addEventListener('click', function() {
        // Toggle comparison mode
        const cards = document.querySelectorAll('.pricing-card');
        cards.forEach(card => {
            card.classList.toggle('comparison-mode');
        });
    });

    pricingSection.querySelector('.container').appendChild(comparisonButton);
}

// Utility function for smooth animations
function smoothAnimation(element, property, start, end, duration, easing = 'easeOutCubic') {
    const startTime = performance.now();
    const change = end - start;

    function animate(currentTime) {
        const elapsed = currentTime - startTime;
        const progress = Math.min(elapsed / duration, 1);
        
        let easedProgress = progress;
        if (easing === 'easeOutCubic') {
            easedProgress = 1 - Math.pow(1 - progress, 3);
        }

        const currentValue = start + (change * easedProgress);
        
        if (property === 'opacity') {
            element.style.opacity = currentValue;
        } else if (property === 'translateY') {
            element.style.transform = `translateY(${currentValue}px)`;
        }

        if (progress < 1) {
            requestAnimationFrame(animate);
        }
    }

    requestAnimationFrame(animate);
}