// Shared JavaScript across all pages
document.addEventListener('DOMContentLoaded', function() {
    // Smooth scroll for anchor links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                target.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        });
    });

    // Add fade-in animation to sections when they come into view
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    };

    const observer = new IntersectionObserver(function(entries) {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('fade-in');
            }
        });
    }, observerOptions);

    // Observe all sections
    document.querySelectorAll('section').forEach(section => {
        observer.observe(section);
    });

    // Mobile menu toggle (if needed)
    const mobileMenuButton = document.getElementById('mobile-menu-button');
    const mobileMenu = document.getElementById('mobile-menu');
    
    if (mobileMenuButton && mobileMenu) {
        mobileMenuButton.addEventListener('click', function() {
            mobileMenu.classList.toggle('hidden');
        });
    }

    // Initialize Feather icons
    feather.replace();
});

// Form submission handler
function handleFormSubmit(event) {
    event.preventDefault();
    // Add form submission logic here
    console.log('Form submitted');
}

// Contact form modal
function openContactForm() {
    // Create modal overlay
    const modal = document.createElement('div');
    modal.style.cssText = `
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.8);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10000;
        backdrop-filter: blur(5px);
    `;
    
    modal.innerHTML = `
        <div style="background: white; padding: 40px; border-radius: 20px; max-width: 500px; width: 90%; position: relative;">
            <button onclick="this.closest('div').parentElement.remove()" style="position: absolute; top: 20px; right: 20px; background: none; border: none; font-size: 30px; cursor: pointer;">×</button>
            <h2 style="font-size: 32px; font-weight: 900; margin-bottom: 20px; background: linear-gradient(135deg, #667eea, #764ba2); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">ЗАПИСАТЬСЯ НА ТРЕНИРОВКУ</h2>
            <form onsubmit="submitContactForm(event, this)">
                <input type="text" placeholder="Ваше имя" required style="width: 100%; padding: 15px; margin-bottom: 15px; border: 2px solid #e5e7eb; border-radius: 10px; font-size: 16px;">
                <input type="tel" placeholder="Телефон" required style="width: 100%; padding: 15px; margin-bottom: 15px; border: 2px solid #e5e7eb; border-radius: 10px; font-size: 16px;">
                <select required style="width: 100%; padding: 15px; margin-bottom: 15px; border: 2px solid #e5e7eb; border-radius: 10px; font-size: 16px;">
                    <option value="">Выберите тренера</option>
                    <option value="Евгений Малин">Евгений Малин</option>
                    <option value="Ирина Малина">Ирина Малина</option>
                    <option value="Любой тренер">Любой тренер</option>
                </select>
                <button type="submit" class="sporty-btn" style="width: 100%;">
                    <span>ОТПРАВИТЬ ЗАЯВКУ</span>
                </button>
            </form>
        </div>
    `;
    
    document.body.appendChild(modal);
}

function submitContactForm(event, form) {
    event.preventDefault();
    
    // Get form data
    const formData = new FormData(form);
    const data = {
        name: form.querySelector('input[type="text"]').value,
        phone: form.querySelector('input[type="tel"]').value,
        coach: form.querySelector('select').value
    };
    
    // Here you would normally send the data to your server
    console.log('Contact form submitted:', data);
    
    // Show success message
    form.innerHTML = `
        <div style="text-align: center; padding: 40px 0;">
            <div style="font-size: 60px; margin-bottom: 20px;">✅</div>
            <h3 style="font-size: 24px; font-weight: bold; margin-bottom: 10px; color: #10b981;">ЗАЯВКА ОТПРАВЛЕНА!</h3>
            <p style="font-size: 18px; color: #6b7280;">Мы свяжемся с вами в течение 30 минут</p>
        </div>
    `;
    
    // Close modal after 3 seconds
    setTimeout(() => {
        form.closest('div').parentElement.remove();
    }, 3000);
}

function bookCoach(coachName) {
    openContactForm();
    // Pre-select the coach
    setTimeout(() => {
        const select = document.querySelector('select');
        if (select) {
            select.value = coachName;
        }
    }, 100);
}