script.js

document.addEventListener('DOMContentLoaded', function() {
    // Testimonial Slider
    const testimonials = document.querySelectorAll('.testimonial');
    const prevBtn = document.querySelector('.prev-btn');
    const nextBtn = document.querySelector('.next-btn');
    let currentTestimonial = 0;
    let testimonialInterval; // Variable to hold the interval timer

    function showTestimonial(index) {
        // Handle index wrapping
        if (index < 0) {
            index = testimonials.length - 1;
        } else if (index >= testimonials.length) {
            index = 0;
        }

        testimonials.forEach(testimonial => {
            testimonial.classList.remove('active');
            testimonial.style.display = 'none'; // Ensure non-active are hidden
        });

        testimonials[index].style.display = 'block'; // Show the active one before adding class
        // Request animation frame to ensure display change is applied before transition
        requestAnimationFrame(() => {
             testimonials[index].classList.add('active');
        });


        currentTestimonial = index;
         // Restart the timer whenever testimonial changes via buttons
        clearInterval(testimonialInterval);
        startTestimonialTimer();
    }

    function startTestimonialTimer() {
         // Increased interval for slower transition
         testimonialInterval = setInterval(() => {
            showTestimonial(currentTestimonial + 1);
        }, 15000); // Changed from 8000ms to 15000ms
    }

    prevBtn.addEventListener('click', () => {
        showTestimonial(currentTestimonial - 1);
    });

    nextBtn.addEventListener('click', () => {
        showTestimonial(currentTestimonial + 1);
    });

    // Start the initial timer
    startTestimonialTimer();

    // Pause timer on hover (optional, depends if you want it to pause just on buttons or whole slider)
    // For now, keeping the button hover logic as it was.
    prevBtn.addEventListener('mouseover', () => {
        clearInterval(testimonialInterval);
    });

    prevBtn.addEventListener('mouseout', () => {
         // Only restart if slider is not being manually controlled
        if (!testimonials[currentTestimonial].classList.contains('manual-control')) {
             startTestimonialTimer();
        }
    });

    nextBtn.addEventListener('mouseover', () => {
        clearInterval(testimonialInterval);
    });

    nextBtn.addEventListener('mouseout', () => {
         // Only restart if slider is not being manually controlled
         if (!testimonials[currentTestimonial].classList.contains('manual-control')) {
            startTestimonialTimer();
         }
    });

     // Pause timer when slider area is hovered
    const testimonialSlider = document.querySelector('.testimonial-slider');
    testimonialSlider.addEventListener('mouseover', () => {
         clearInterval(testimonialInterval);
    });

     testimonialSlider.addEventListener('mouseout', () => {
         // Only restart if slider is not being manually controlled by clicking
         if (!testimonials[currentTestimonial].classList.contains('manual-control')) {
             startTestimonialTimer();
         }
    });

    // Form Submission
    const contactForm = document.getElementById('contactForm');
    const formSubmitMessage = document.getElementById('formSubmitMessage');

    contactForm.addEventListener('submit', function(event) {
        event.preventDefault();
        
        // Simulate form submission
        const formData = new FormData(contactForm);
        const formEntries = Object.fromEntries(formData.entries());
        
        // You would normally send this data to a server
        console.log('Form submitted with data:', formEntries);
        
        // Show success message and reset form
        formSubmitMessage.classList.remove('hidden');
        contactForm.reset();
        
        // Hide success message after 5 seconds
        setTimeout(() => {
            formSubmitMessage.classList.add('hidden');
        }, 5000);
    });

    // Smooth scrolling for navigation links
    document.querySelectorAll('nav a').forEach(anchor => {
        anchor.addEventListener('click', function(e) {
            e.preventDefault();
            
            const targetId = this.getAttribute('href');
            const targetElement = document.querySelector(targetId);
            
            window.scrollTo({
                top: targetElement.offsetTop - 80,
                behavior: 'smooth'
            });
        });
    });

    // Animate cards on scroll
    const cards = document.querySelectorAll('.card');
    
    function checkIfInView() {
        cards.forEach((card, index) => {
            const rect = card.getBoundingClientRect();
            const isInViewport = rect.top <= window.innerHeight - 100;
            
            if (isInViewport) {
                // Add staggered delay based on card index
                setTimeout(() => {
                    card.style.opacity = '1';
                    card.style.transform = 'translateY(0)';
                    // Add glowing-border class for fancy effect
                    if (!card.classList.contains('glowing-border')) {
                        card.classList.add('glowing-border');
                    }
                }, index * 100); // 100ms staggered delay between cards
            }
        });
    }
    
    // Set initial state with more dramatic starting position
    cards.forEach(card => {
        card.style.opacity = '0';
        card.style.transform = 'translateY(30px) scale(0.95)';
        card.style.transition = 'opacity 0.7s ease, transform 0.7s ease';
    });
    
    // Check on scroll and initial load
    window.addEventListener('scroll', checkIfInView);
    window.addEventListener('load', checkIfInView);

    // Free badge rotator
    const freeBadge = document.querySelector('.free-badge');
    const phrases = [
        "CURRENTLY 100% FREE",
        "ZERO COST, UNLIMITED POTENTIAL",
        "FREE ONLYFANS SUCCESS STRATEGY",
        "BOOST YOUR INCOME FOR FREE",
        "EXCLUSIVE FREE VIP ACCESS"
    ];
    
    let currentPhrase = 0;
    
    setInterval(() => {
        currentPhrase = (currentPhrase + 1) % phrases.length;
        freeBadge.style.opacity = 0;
        
        setTimeout(() => {
            freeBadge.textContent = phrases[currentPhrase];
            freeBadge.style.opacity = 1;
        }, 500);
    }, 4000);

    // Add hover effect to model images
    const modelItems = document.querySelectorAll('.model-item');
    modelItems.forEach(item => {
        item.addEventListener('mouseenter', () => {
            const image = item.querySelector('.model-image');
            const name = item.querySelector('span');
            if (image) {
                image.style.transform = 'scale(1.08)';
                image.style.boxShadow = '0 8px 25px rgba(255, 42, 117, 0.7)';
                image.style.borderWidth = '4px';
            }
            if (name) {
                name.style.color = '#ff2a75';
            }
        });
        
        item.addEventListener('mouseleave', () => {
            const image = item.querySelector('.model-image');
            const name = item.querySelector('span');
            if (image) {
                image.style.transform = '';
                image.style.boxShadow = '';
                image.style.borderWidth = '';
            }
            if (name) {
                name.style.color = '';
            }
        });
    });
});