/**
 * Silvia Neri - Istruttrice di Yoga
 * Script JavaScript principale
 * 
 * Questo file contiene tutte le funzionalità JavaScript necessarie per il sito web:
 * 1. Menu mobile per la navigazione responsive
 * 2. Slider per le testimonianze
 * 3. Validazione del modulo di contatto
 * 4. Animazioni al caricamento della pagina e allo scroll
 */

// Attendere che il DOM sia completamente caricato prima di eseguire il codice
document.addEventListener('DOMContentLoaded', () => {
    // Inizializzazione di tutte le funzionalità
    initMobileMenu();
    initTestimonialSlider();
    initContactFormValidation();
    initScrollAnimations();
});

/**
 * 1. MENU MOBILE
 * Gestisce l'apertura e chiusura del menu mobile
 */
function initMobileMenu() {
    const menuToggle = document.querySelector('.menu-toggle');
    const nav = document.querySelector('nav');
    const navLinks = document.querySelectorAll('nav a');
    
    // Funzione per aprire/chiudere il menu
    function toggleMenu() {
        nav.classList.toggle('active');
        // Migliora l'accessibilità
        const isOpen = nav.classList.contains('active');
        menuToggle.setAttribute('aria-expanded', isOpen);
    }
    
    // Event listener per il pulsante hamburger
    if (menuToggle) {
        menuToggle.addEventListener('click', toggleMenu);
    }
    
    // Chiudi il menu quando si clicca su un link (per mobile)
    navLinks.forEach(link => {
        link.addEventListener('click', () => {
            if (window.innerWidth <= 992) { // Solo su mobile
                nav.classList.remove('active');
                menuToggle.setAttribute('aria-expanded', 'false');
            }
        });
    });
    
    // Chiudi il menu quando si clicca fuori
    document.addEventListener('click', (e) => {
        if (window.innerWidth <= 992 && 
            !nav.contains(e.target) && 
            !menuToggle.contains(e.target) && 
            nav.classList.contains('active')) {
            toggleMenu();
        }
    });
}

/**
 * 2. SLIDER TESTIMONIANZE
 * Implementa uno slider semplice per le testimonianze
 */
function initTestimonialSlider() {
    const slider = document.querySelector('.testimonianze-slider');
    const testimonials = document.querySelectorAll('.testimonianza');
    const dots = document.querySelectorAll('.dot');
    
    if (!slider || testimonials.length === 0) return;
    
    let currentIndex = 0;
    let interval;
    const slideInterval = 5000; // Cambia slide ogni 5 secondi
    
    // Funzione per mostrare una testimonianza specifica
    function showTestimonial(index) {
        // Nascondi tutte le testimonianze
        testimonials.forEach(testimonial => {
            testimonial.style.display = 'none';
        });
        
        // Rimuovi la classe active da tutti i dots
        dots.forEach(dot => {
            dot.classList.remove('active');
        });
        
        // Mostra la testimonianza corrente e attiva il dot corrispondente
        testimonials[index].style.display = 'block';
        dots[index].classList.add('active');
        
        // Aggiorna l'indice corrente
        currentIndex = index;
    }
    
    // Funzione per passare alla prossima testimonianza
    function nextTestimonial() {
        let nextIndex = currentIndex + 1;
        if (nextIndex >= testimonials.length) {
            nextIndex = 0;
        }
        showTestimonial(nextIndex);
    }
    
    // Funzione per passare alla testimonianza precedente
    function prevTestimonial() {
        let prevIndex = currentIndex - 1;
        if (prevIndex < 0) {
            prevIndex = testimonials.length - 1;
        }
        showTestimonial(prevIndex);
    }
    
    // Inizializza lo slider mostrando la prima testimonianza
    showTestimonial(0);
    
    // Aggiungi event listener ai dots per la navigazione manuale
    dots.forEach((dot, index) => {
        dot.addEventListener('click', () => {
            showTestimonial(index);
            resetInterval(); // Resetta il timer quando si clicca manualmente
        });
    });
    
    // Funzione per resettare l'intervallo
    function resetInterval() {
        clearInterval(interval);
        interval = setInterval(nextTestimonial, slideInterval);
    }
    
    // Avvia lo scorrimento automatico
    interval = setInterval(nextTestimonial, slideInterval);
    
    // Opzionale: aggiungi controlli freccia sinistra/destra
    // Questo codice è commentato perché non ci sono frecce nell'HTML,
    // ma può essere attivato se si aggiungono i pulsanti al markup
    /*
    const prevButton = document.createElement('button');
    prevButton.className = 'testimonial-prev';
    prevButton.innerHTML = '<i class="fas fa-chevron-left"></i>';
    prevButton.setAttribute('aria-label', 'Testimonianza precedente');
    
    const nextButton = document.createElement('button');
    nextButton.className = 'testimonial-next';
    nextButton.innerHTML = '<i class="fas fa-chevron-right"></i>';
    nextButton.setAttribute('aria-label', 'Testimonianza successiva');
    
    slider.appendChild(prevButton);
    slider.appendChild(nextButton);
    
    prevButton.addEventListener('click', () => {
        prevTestimonial();
        resetInterval();
    });
    
    nextButton.addEventListener('click', () => {
        nextTestimonial();
        resetInterval();
    });
    */
    
    // Pausa lo scorrimento automatico quando il mouse è sopra lo slider
    slider.addEventListener('mouseenter', () => {
        clearInterval(interval);
    });
    
    // Riprendi lo scorrimento automatico quando il mouse esce dallo slider
    slider.addEventListener('mouseleave', () => {
        interval = setInterval(nextTestimonial, slideInterval);
    });
}

/**
 * 3. VALIDAZIONE MODULO DI CONTATTO
 * Implementa la validazione del modulo di contatto
 */
function initContactFormValidation() {
    const form = document.getElementById('contact-form');
    
    if (!form) return;
    
    form.addEventListener('submit', (e) => {
        e.preventDefault();
        
        // Ottieni i campi del form
        const nameInput = document.getElementById('nome');
        const emailInput = document.getElementById('email');
        const phoneInput = document.getElementById('telefono');
        const serviceSelect = document.getElementById('servizio');
        const messageTextarea = document.getElementById('messaggio');
        const privacyCheckbox = document.getElementById('privacy');
        
        // Reset degli errori precedenti
        clearErrors();
        
        // Flag per tracciare se ci sono errori
        let hasErrors = false;
        
        // Validazione nome (richiesto)
        if (!nameInput.value.trim()) {
            showError(nameInput, 'Il nome è obbligatorio');
            hasErrors = true;
        }
        
        // Validazione email (richiesto e formato corretto)
        if (!emailInput.value.trim()) {
            showError(emailInput, 'L\'email è obbligatoria');
            hasErrors = true;
        } else if (!isValidEmail(emailInput.value)) {
            showError(emailInput, 'Inserisci un indirizzo email valido');
            hasErrors = true;
        }
        
        // Validazione telefono (opzionale ma se presente deve essere valido)
        if (phoneInput.value.trim() && !isValidPhone(phoneInput.value)) {
            showError(phoneInput, 'Inserisci un numero di telefono valido');
            hasErrors = true;
        }
        
        // Validazione messaggio (richiesto)
        if (!messageTextarea.value.trim()) {
            showError(messageTextarea, 'Il messaggio è obbligatorio');
            hasErrors = true;
        }
        
        // Validazione privacy (deve essere accettata)
        if (!privacyCheckbox.checked) {
            showError(privacyCheckbox, 'Devi accettare la Privacy Policy');
            hasErrors = true;
        }
        
        // Se non ci sono errori, invia il form
        if (!hasErrors) {
            // In un'applicazione reale, qui si invierebbe il form al server
            // Per ora, mostriamo un messaggio di successo
            showSuccessMessage();
            form.reset();
        }
    });
    
    // Funzione per validare l'email
    function isValidEmail(email) {
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return emailRegex.test(email);
    }
    
    // Funzione per validare il numero di telefono
    function isValidPhone(phone) {
        // Accetta formati italiani comuni
        const phoneRegex = /^(\+39)?[ ]?[0-9]{3}[-\s]?[0-9]{3}[-\s]?[0-9]{4}$/;
        return phoneRegex.test(phone);
    }
    
    // Funzione per mostrare un errore
    function showError(input, message) {
        // Crea un elemento per il messaggio di errore
        const errorElement = document.createElement('div');
        errorElement.className = 'error-message';
        errorElement.textContent = message;
        errorElement.style.color = 'var(--color-error)';
        errorElement.style.fontSize = 'var(--fs-xxs)';
        errorElement.style.marginTop = '5px';
        
        // Aggiungi la classe di errore all'input
        input.classList.add('input-error');
        input.style.borderColor = 'var(--color-error)';
        
        // Inserisci il messaggio dopo l'input
        if (input.type === 'checkbox') {
            // Per checkbox, inserisci dopo il label
            const parentDiv = input.closest('.form-group');
            parentDiv.appendChild(errorElement);
        } else {
            // Per altri input, inserisci dopo l'input
            input.parentNode.appendChild(errorElement);
        }
    }
    
    // Funzione per rimuovere tutti gli errori
    function clearErrors() {
        // Rimuovi tutti i messaggi di errore
        const errorMessages = form.querySelectorAll('.error-message');
        errorMessages.forEach(error => error.remove());
        
        // Rimuovi la classe di errore da tutti gli input
        const inputs = form.querySelectorAll('.input-error');
        inputs.forEach(input => {
            input.classList.remove('input-error');
            input.style.borderColor = '';
        });
    }
    
    // Funzione per mostrare un messaggio di successo
    function showSuccessMessage() {
        // Crea un elemento per il messaggio di successo
        const successElement = document.createElement('div');
        successElement.className = 'success-message';
        successElement.textContent = 'Messaggio inviato con successo! Ti risponderò al più presto.';
        successElement.style.color = 'var(--color-success)';
        successElement.style.padding = 'var(--space-s)';
        successElement.style.marginTop = 'var(--space-s)';
        successElement.style.backgroundColor = 'rgba(0, 128, 0, 0.1)';
        successElement.style.borderRadius = 'var(--radius-s)';
        successElement.style.textAlign = 'center';
        
        // Inserisci il messaggio dopo il form
        form.parentNode.insertBefore(successElement, form.nextSibling);
        
        // Rimuovi il messaggio dopo 5 secondi
        setTimeout(() => {
            successElement.remove();
        }, 5000);
    }
}

/**
 * 4. ANIMAZIONI ALLO SCROLL (DISABILITATE)
 * Questa funzione è stata modificata per rimuovere le animazioni allo scroll
 * come richiesto dall'utente, mantenendo tutte le sezioni immediatamente visibili
 */
function initScrollAnimations() {
    // Seleziona tutti gli elementi che avrebbero dovuto essere animati
    const sections = document.querySelectorAll('section');
    
    // Aggiungi stili CSS per rendere tutte le sezioni immediatamente visibili
    const style = document.createElement('style');
    style.textContent = `
        section {
            opacity: 1 !important;
            transform: none !important;
            transition: none !important;
        }
        
        #hero .hero-content,
        #hero .hero-image {
            opacity: 1 !important;
            transform: none !important;
            transition: none !important;
        }
    `;
    
    document.head.appendChild(style);
    
    // Rendi immediatamente visibili tutte le sezioni
    sections.forEach(section => {
        section.classList.add('section-visible');
    });
}
