script.js

// Main JavaScript for NatureVerse Explorer

// Initialize all tabs functionality
function initializeTabs() {
    const tabButtons = document.querySelectorAll('.tab-button');
    const tabContents = document.querySelectorAll('.tab-content');

    tabButtons.forEach(button => {
        button.addEventListener('click', () => {
            const tabId = button.getAttribute('data-tab');
            
            // Remove active class from all buttons and contents
            tabButtons.forEach(btn => btn.classList.remove('active'));
            tabContents.forEach(content => content.classList.add('hidden'));
            
            // Add active class to clicked button and corresponding content
            button.classList.add('active');
            document.getElementById(`${tabId}-tab`).classList.remove('hidden');
        });
    });
}

// Initialize all interactive features
function initializeInteractiveFeatures() {
    initializeImageGalleries();
    initializeWeatherWidget();
    initializeMapInteractions();
    initializeVirtualTour();
    initializeNewsFeed();
    initializeEcoTips();
}

// Image Gallery functionality
function initializeImageGalleries() {
    const galleries = document.querySelectorAll('.image-gallery');
    
    galleries.forEach(gallery => {
        const mainImage = gallery.querySelector('.main-image');
        const thumbnails = gallery.querySelectorAll('.thumbnail');
        
        thumbnails.forEach(thumbnail => {
            thumbnail.addEventListener('click', () => {
                const newSrc = thumbnail.getAttribute('data-full');
                mainImage.src = newSrc;
                
                // Update active thumbnail
                thumbnails.forEach(thumb => thumb.classList.remove('active'));
                thumbnail.classList.add('active');
            });
        });
    });
}

// Weather Widget functionality
function initializeWeatherWidget() {
    const weatherWidget = document.querySelector('.weather-widget');
    if (!weatherWidget) return;

    // Simulate weather data fetching
    setTimeout(() => {
        const weatherData = {
            temperature: Math.floor(Math.random() * 30) + 10,
            condition: ['Sunny', 'Cloudy', 'Rainy', 'Stormy'][Math.floor(Math.random() * 4)],
            humidity: Math.floor(Math.random() * 40) + 50,
            windSpeed: Math.floor(Math.random() * 20) + 5
        };

        updateWeatherDisplay(weatherData);
    }, 1000);
}

function updateWeatherDisplay(data) {
    const tempElement = document.querySelector('.weather-temp');
    const conditionElement = document.querySelector('.weather-condition');
    const humidityElement = document.querySelector('.weather-humidity');
    const windElement = document.querySelector('.weather-wind');

    if (tempElement) tempElement.textContent = `${data.temperature}°C`;
    if (conditionElement) conditionElement.textContent = data.condition;
    if (humidityElement) humidityElement.textContent = `${data.humidity}%`;
    if (windElement) windElement.textContent = `${data.windSpeed} km/h`;
}

// Map Interactions
function initializeMapInteractions() {
    const mapPoints = document.querySelectorAll('.map-point');
    
    mapPoints.forEach(point => {
        point.addEventListener('mouseenter', () => {
            const tooltip = point.querySelector('.map-tooltip');
            if (tooltip) {
                tooltip.classList.remove('hidden');
                tooltip.classList.add('block');
            }
        });
        
        point.addEventListener('mouseleave', () => {
            const tooltip = point.querySelector('.map-tooltip');
            if (tooltip) {
                tooltip.classList.remove('block');
                tooltip.classList.add('hidden');
            }
        });
    });
}

// Virtual Tour functionality
function initializeVirtualTour() {
    const tourScenes = document.querySelectorAll('.tour-scene');
    const sceneButtons = document.querySelectorAll('.scene-button');
    
    sceneButtons.forEach((button, index) => {
        button.addEventListener('click', () => {
            tourScenes.forEach(scene => scene.classList.add('hidden'));
            tourScenes[index].classList.remove('hidden');
        });
    });
}

// News Feed functionality
function initializeNewsFeed() {
    const newsItems = document.querySelectorAll('.news-item');
    const loadMoreBtn = document.querySelector('.load-more-news');
    
    if (loadMoreBtn) {
        loadMoreBtn.addEventListener('click', () => {
            // Simulate loading more news
            const loadingIndicator = document.createElement('div');
            loadingIndicator.className = 'text-center py-4 pulse-animation';
            loadingIndicator.textContent = 'Loading more nature news...';
            loadMoreBtn.parentNode.replaceChild(loadingIndicator, loadMoreBtn);
            
            setTimeout(() => {
                // In a real app, this would fetch actual data
                loadingIndicator.remove();
                // Add more news items here
            }, 2000);
        });
    }
}

// Eco Tips functionality
function initializeEcoTips() {
    const tipCards = document.querySelectorAll('.eco-tip-card');
    const randomTipBtn = document.querySelector('.random-tip-btn');
    
    if (randomTipBtn) {
        randomTipBtn.addEventListener('click', () => {
            const randomIndex = Math.floor(Math.random() * tipCards.length);
            
            tipCards.forEach((card, index) => {
                card.classList.add('hidden');
                if (index === randomIndex) {
                    card.classList.remove('hidden');
                }
            });
        });
    }
}

// Search functionality
function initializeSearch() {
    const searchInput = document.querySelector('.search-input');
    const searchResults = document.querySelector('.search-results');
    
    if (searchInput && searchResults) {
        searchInput.addEventListener('input', (e) => {
            const query = e.target.value.toLowerCase();
            
            if (query.length > 2) {
                // Simulate search results
                const results = [
                    'Amazon Rainforest Conservation',
                    'Great Barrier Reef Protection',
                    'African Wildlife Safaris',
                    'Arctic Circle Expeditions',
                    'Himalayan Mountain Treks'
                ].filter(item => item.toLowerCase().includes(query));
                
                displaySearchResults(results);
            } else {
                searchResults.classList.add('hidden');
            }
        });
    }
}

function displaySearchResults(results) {
    const searchResults = document.querySelector('.search-results');
    if (!searchResults) return;
    
    searchResults.innerHTML = '';
    
    if (results.length === 0) {
        searchResults.innerHTML = '<div class="p-4 text-gray-500">No results found</div>';
    } else {
        results.forEach(result => {
            const resultElement = document.createElement('div');
            resultElement.className = 'p-3 hover:bg-emerald-50 cursor-pointer border-b border-gray-100';
            resultElement.textContent = result;
            searchResults.appendChild(resultElement);
        });
    }
    
    searchResults.classList.remove('hidden');
}

// Dark mode toggle (if needed)
function toggleDarkMode() {
    document.documentElement.classList.toggle('dark');
}

// Initialize everything when DOM is loaded
document.addEventListener('DOMContentLoaded', function() {
    initializeTabs();
    initializeInteractiveFeatures();
    initializeSearch();
    
    // Add smooth scrolling to all 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'
                });
            }
        });
    });
});

// API integration for real data (placeholder functions)
async function fetchNatureData(endpoint) {
    try {
        const response = await fetch(`https://api.example.com/nature/${endpoint}`);
        return await response.json();
    } catch (error) {
        console.error('Error fetching nature data:', error);
        return null;
    }
}

// Utility functions
function debounce(func, wait) {
    let timeout;
    return function executedFunction(...args) {
        const later = () => {
            clearTimeout(timeout);
            func(...args);
        };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
    };
}

// Export functions for use in components if needed
window.NatureVerse = {
    initializeTabs,
    initializeInteractiveFeatures,
    fetchNatureData,
    debounce
};