// Mobile Menu Toggle
function toggleMobileMenu() {
    const menu = document.getElementById('mobileMenu');
    menu.classList.toggle('hidden');
}

// Filter Functionality
function filterDates(category) {
    const cards = document.querySelectorAll('.date-card');
    const buttons = document.querySelectorAll('.filter-btn');
    
    // Update active button
    buttons.forEach(btn => {
        if (btn.textContent.toLowerCase() === category || (category === 'all' && btn.textContent === 'All')) {
            btn.classList.add('bg-rose-600', 'text-white', 'border-rose-600');
            btn.classList.remove('text-warm-800', 'border-warm-200');
        } else {
            btn.classList.remove('bg-rose-600', 'text-white', 'border-rose-600');
            btn.classList.add('text-warm-800', 'border-warm-200');
        }
    });
    
    // Filter cards
    cards.forEach(card => {
        if (category === 'all' || card.dataset.category === category) {
            card.style.display = 'block';
            setTimeout(() => {
                card.style.opacity = '1';
                card.style.transform = 'translateY(0)';
            }, 10);
        } else {
            card.style.opacity = '0';
            card.style.transform = 'translateY(20px)';
            setTimeout(() => {
                card.style.display = 'none';
            }, 300);
        }
    });
}

// Modal Functions
function openBookingModal(experienceName = '') {
    const modal = document.getElementById('bookingModal');
    const input = document.getElementById('experienceInput');
    
    if (experienceName) {
        input.value = experienceName;
    } else {
        input.value = '';
    }
    
    modal.classList.remove('hidden');
    document.body.style.overflow = 'hidden';
    
    // Reinitialize icons in modal
    if (typeof lucide !== 'undefined') {
        lucide.createIcons();
    }
}

function closeBookingModal() {
    const modal = document.getElementById('bookingModal');
    modal.classList.add('hidden');
    document.body.style.overflow = '';
}

// Form Submission
document.getElementById('bookingForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    // Show success message
    const form = this;
    const originalContent = form.innerHTML;
    
    form.innerHTML = `
        <div class="text-center py-8">
            <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <i data-lucide="check" class="w-8 h-8 text-green-600"></i>
            </div>
            <h4 class="font-serif text-2xl font-bold text-warm-900 mb-2">Booking Request Sent!</h4>
            <p class="text-warm-600">We'll contact you within 2 hours to confirm your date details.</p>
            <button onclick="closeBookingModal()" class="mt-6 bg-warm-100 text-warm-800 px-6 py-2 rounded-full font-medium hover:bg-warm-200 transition-colors">
                Close
            </button>
        </div>
    `;
    
    if (typeof lucide !== 'undefined') {
        lucide.createIcons();
    }
    
    // Reset form after delay
    setTimeout(() => {
        form.innerHTML = originalContent;
        closeBookingModal();
    }, 3000);
});

// 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'
            });
            // Close mobile menu if open
            document.getElementById('mobileMenu').classList.add('hidden');
        }
    });
});

// Intersection Observer for fade-in animations
const observerOptions = {
    root: null,
    rootMargin: '0px',
    threshold: 0.1
};

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

// Observe elements
document.querySelectorAll('.date-card').forEach((el) => {
    el.style.opacity = '0';
    observer.observe(el);
});

// Close modal on Escape key
document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') {
        closeBookingModal();
    }
});

// Initialize Lucide icons on load
document.addEventListener('DOMContentLoaded', () => {
    if (typeof lucide !== 'undefined') {
        lucide.createIcons();
    }
});