// Script to fix collapsible features, package buttons, and other issues

document.addEventListener('DOMContentLoaded', function() {
    // Fix for collapsible features
    const collapsibleFeatures = document.querySelectorAll('.package-feature.collapsible');
    
    collapsibleFeatures.forEach(feature => {
        const header = feature.querySelector('.feature-header');
        const content = feature.querySelector('.feature-content');
        
        if (header && content) {
            // Store original content height for reference
            let contentHeight = content.scrollHeight;
            
            // Update content height calculation when window resizes
            window.addEventListener('resize', function() {
                if (feature.classList.contains('active')) {
                    // Temporarily remove height restriction to get true height
                    content.style.height = 'auto';
                    content.style.opacity = '1';
                    content.style.visibility = 'visible';
                    
                    // Get the new scroll height
                    contentHeight = content.scrollHeight;
                    
                    // Apply the new height
                    content.style.height = contentHeight + 'px';
                }
            });
            
            header.addEventListener('click', () => {
                // Toggle active class
                feature.classList.toggle('active');
                
                if (feature.classList.contains('active')) {
                    // First make it visible but hidden (for height calculation)
                    content.style.visibility = 'hidden';
                    content.style.height = 'auto';
                    content.style.display = 'block';
                    
                    // Get the true content height
                    contentHeight = content.scrollHeight;
                    
                    // Reset to prepare for animation
                    content.style.height = '0';
                    content.style.display = '';
                    
                    // Force browser reflow
                    void content.offsetHeight;
                    
                    // Apply height and visibility
                    content.style.height = contentHeight + 'px';
                    content.style.opacity = '1';
                    content.style.visibility = 'visible';
                    
                    // Add a class for extra protection against height issues
                    setTimeout(() => {
                        content.classList.add('height-auto');
                    }, 400); // Match transition duration
                } else {
                    // First set a fixed height (current height)
                    content.style.height = content.scrollHeight + 'px';
                    
                    // Force browser reflow
                    void content.offsetHeight;
                    
                    // Begin animation
                    content.style.height = '0';
                    content.style.opacity = '0';
                    
                    // Remove the height-auto class
                    content.classList.remove('height-auto');
                    
                    // Delay the visibility change until after animation
                    setTimeout(() => {
                        content.style.visibility = 'hidden';
                    }, 300); // Slightly shorter than transition to avoid flicker
                }
            });
        }
    });
    
    // Function to ensure all feature heights get recalculated when tabs change
    function recalculateHeightsOnTabChange() {
        // Find all tab controls
        const tabs = document.querySelectorAll('.tab');
        
        if (tabs.length > 0) {
            tabs.forEach(tab => {
                tab.addEventListener('click', () => {
                    // Short delay to allow display changes
                    setTimeout(() => {
                        // Find all active collapsible features
                        const activeFeatures = document.querySelectorAll('.package-feature.active');
                        
                        activeFeatures.forEach(feature => {
                            const content = feature.querySelector('.feature-content');
                            if (content) {
                                // Reset height to auto to get true height
                                content.style.height = 'auto';
                                
                                // Get correct height
                                const contentHeight = content.scrollHeight;
                                
                                // Apply height
                                content.style.height = contentHeight + 'px';
                            }
                        });
                    }, 50);
                });
            });
        }
    }
    
    // Call the function to initialize tab change behavior
    recalculateHeightsOnTabChange();
    
    // Make package buttons clickable
    const packageButtons = document.querySelectorAll('.package-card .cta-button, .package-table .cta-button');
    packageButtons.forEach(button => {
        button.addEventListener('click', (e) => {
            const href = button.getAttribute('href');
            if (href) {
                window.location.href = href;
            }
        });
    });
    
    // Mobile menu fix
    const mobileMenuToggle = document.getElementById('mobileMenuToggle');
    const navLinks = document.getElementById('navLinks');
    
    if (mobileMenuToggle) {
        mobileMenuToggle.addEventListener('click', () => {
            navLinks.classList.toggle('active');
        });
    }
    
    // Fix testimonial and comparison sliders
    initSliders();
});

// Initialize sliders
function initSliders() {
    // Testimonials Slider
    const testimonialsTrack = document.getElementById('testimonialsTrack');
    const testimonialPrev = document.getElementById('testimonialPrev');
    const testimonialNext = document.getElementById('testimonialNext');
    const testimonialDots = document.querySelectorAll('.testimonial-dot');
    let currentTestimonial = 0;
    
    function updateTestimonialSlider() {
        if (testimonialsTrack) {
            testimonialsTrack.style.transform = `translateX(-${currentTestimonial * 100}%)`;
            
            // Update dots
            testimonialDots.forEach((dot, index) => {
                dot.classList.toggle('active', index === currentTestimonial);
            });
        }
    }
    
    if (testimonialPrev && testimonialNext) {
        testimonialPrev.addEventListener('click', () => {
            currentTestimonial = (currentTestimonial - 1 + testimonialDots.length) % testimonialDots.length;
            updateTestimonialSlider();
        });
        
        testimonialNext.addEventListener('click', () => {
            currentTestimonial = (currentTestimonial + 1) % testimonialDots.length;
            updateTestimonialSlider();
        });
        
        testimonialDots.forEach((dot, index) => {
            dot.addEventListener('click', () => {
                currentTestimonial = index;
                updateTestimonialSlider();
            });
        });
    }
    
    // Comparison Slider
    const comparisonTrack = document.getElementById('comparisonTrack');
    const comparisonPrev = document.getElementById('comparisonPrev');
    const comparisonNext = document.getElementById('comparisonNext');
    const comparisonDots = document.querySelectorAll('.comparison-dot');
    let currentComparison = 0;

    function updateComparisonSlider() {
        if (comparisonTrack) {
            comparisonTrack.style.transform = `translateX(-${currentComparison * 100}%)`;
            
            // Update dots
            comparisonDots.forEach((dot, index) => {
                dot.classList.toggle('active', index === currentComparison);
            });
        }
    }

    if (comparisonPrev && comparisonNext) {
        comparisonPrev.addEventListener('click', () => {
            currentComparison = (currentComparison - 1 + comparisonDots.length) % comparisonDots.length;
            updateComparisonSlider();
        });
        
        comparisonNext.addEventListener('click', () => {
            currentComparison = (currentComparison + 1) % comparisonDots.length;
            updateComparisonSlider();
        });
        
        comparisonDots.forEach((dot, index) => {
            dot.addEventListener('click', () => {
                currentComparison = index;
                updateComparisonSlider();
            });
        });
    }
    
    // Package Tabs
    const tabs = document.querySelectorAll('.tab');
    const packageDisplays = document.querySelectorAll('.package-display');
    
    tabs.forEach(tab => {
        tab.addEventListener('click', () => {
            // Remove active class from all tabs
            tabs.forEach(t => t.classList.remove('active'));
            
            // Add active class to clicked tab
            tab.classList.add('active');
            
            // Show corresponding package display
            const tabId = tab.getAttribute('data-tab');
            packageDisplays.forEach(display => {
                display.classList.remove('active');
                if (display.id === `${tabId}-display`) {
                    display.classList.add('active');
                }
            });
        });
    });
}