script.js

// Smooth scroll to section
function scrollToSection(sectionId) {
    const section = document.getElementById(sectionId);
    if (section) {
        section.scrollIntoView({ behavior: 'smooth' });
    }
}

// Interactive World Map
const locationData = {
    'Paris, France': {
        description: 'The City of Light captivated us with its romantic ambiance, world-class museums, and exquisite cuisine. From the Eiffel Tower to the charming streets of Montmartre, Paris never fails to enchant.',
        date: 'Visited: March 2023',
        highlights: ['Louvre Museum', 'Eiffel Tower', 'Seine River Cruise']
    },
    'Bali, Indonesia': {
        description: 'Bali offered a perfect blend of spiritual temples, terraced rice paddies, and pristine beaches. The warm hospitality and rich culture made this island paradise unforgettable.',
        date: 'Visited: January 2023',
        highlights: ['Tanah Lot Temple', 'Ubud Rice Terraces', 'Seminyak Beach']
    },
    'Tokyo, Japan': {
        description: 'Tokyo is a city of contrasts where ancient traditions meet cutting-edge technology. From serene temples to neon-lit streets, every corner tells a different story.',
        date: 'Visited: May 2023',
        highlights: ['Senso-ji Temple', 'Shibuya Crossing', 'Mount Fuji Day Trip']
    },
    'New York, USA': {
        description: 'The city that never sleeps delivered on its promise of endless energy and iconic experiences. Broadway shows, world museums, and diverse neighborhoods made this trip memorable.',
        date: 'Visited: December 2022',
        highlights: ['Times Square', 'Central Park', 'Brooklyn Bridge']
    },
    'Reykjavik, Iceland': {
        description: 'Iceland\'s dramatic landscapes and the magical Northern Lights left us speechless. From geothermal hot springs to glacier hikes, adventure awaited at every turn.',
        date: 'Visited: September 2022',
        highlights: ['Northern Lights', 'Blue Lagoon', 'Golden Circle Tour']
    },
    'Serengeti, Tanzania': {
        description: 'Witnessing the Great Migration and coming face to face with the Big Five was a life-changing experience. The vast savanna and abundant wildlife created memories that last forever.',
        date: 'Visited: July 2022',
        highlights: ['Great Migration', 'Ngorongoro Crater', 'Hot Air Balloon Safari']
    }
};

// Initialize map interactions
document.addEventListener('DOMContentLoaded', function() {
    const locationMarkers = document.querySelectorAll('.location-marker');
    const locationInfo = document.getElementById('locationInfo');
    
    locationMarkers.forEach(marker => {
        marker.addEventListener('click', function() {
            const location = this.getAttribute('data-location');
            const data = locationData[location];
            
            if (data) {
                locationInfo.querySelector('h3').textContent = location;
                locationInfo.querySelector('p').innerHTML = `
                    ${data.description}<br><br>
                    <strong>${data.date}</strong><br>
                    <span class="text-sm">Highlights: ${data.highlights.join(', ')}</span>
                `;
                locationInfo.classList.remove('hidden');
                
                // Scroll to info if needed
                locationInfo.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
            }
        });
    });
});

// Newsletter subscription
document.getElementById('subscriptionForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const emailInput = document.getElementById('emailInput');
    const messageDiv = document.getElementById('subscriptionMessage');
    
    // Simulate subscription process
    const submitButton = this.querySelector('button[type="submit"]');
    const originalText = submitButton.textContent;
    submitButton.innerHTML = '<span class="loading"></span> Subscribing...';
    submitButton.disabled = true;
    
    setTimeout(() => {
        // Show success message
        messageDiv.classList.remove('hidden');
        
        // Reset form
        emailInput.value = '';
        submitButton.textContent = originalText;
        submitButton.disabled = false;
        
        // Hide message after 5 seconds
        setTimeout(() => {
            messageDiv.classList.add('hidden');
        }, 5000);
        
        // In a real app, you would send the email to your backend
        console.log('Subscribed email:', emailInput.value);
    }, 1500);
});

// Intersection Observer for fade-in animations
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('is-visible');
        }
    });
}, observerOptions);

// Observe all sections with fade-in class
document.addEventListener('DOMContentLoaded', function() {
    const fadeSections = document.querySelectorAll('section');
    fadeSections.forEach(section => {
        section.classList.add('fade-in-section');
        observer.observe(section);
    });
});

// Add parallax effect to hero section
window.addEventListener('scroll', function() {
    const scrolled = window.pageYOffset;
    const heroImage = document.querySelector('.hero-image');
    if (heroImage) {
        heroImage.style.transform = `translateY(${scrolled * 0.5}px)`;
    }
});

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

// Lazy loading for images
document.addEventListener('DOMContentLoaded', function() {
    const images = document.querySelectorAll('img[data-src]');
    
    const imageObserver = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const img = entry.target;
                img.src = img.dataset.src;
                img.classList.remove('lazy');
                imageObserver.unobserve(img);
            }
        });
    });
    
    images.forEach(img => imageObserver.observe(img));
});

// Add year to footer
function updateYear() {
    const yearElements = document.querySelectorAll('.current-year');
    const currentYear = new Date().getFullYear();
    yearElements.forEach(element => {
        element.textContent = currentYear;
    });
}

document.addEventListener('DOMContentLoaded', updateYear);

// 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'
            });
        }
    });
});

// Search functionality (placeholder)
function searchStories(query) {
    console.log('Searching for:', query);
    // Implement search logic here
}

// Filter stories by category
function filterByCategory(category) {
    const stories = document.querySelectorAll('[data-category]');
    stories.forEach(story => {
        if (category === 'all' || story.dataset.category === category) {
            story.style.display = 'block';
        } else {
            story.style.display = 'none';
        }
    });
}

// Add to favorites
function addToFavorites(storyId) {
    let favorites = JSON.parse(localStorage.getItem('favorites') || '[]');
    if (!favorites.includes(storyId)) {
        favorites.push(storyId);
        localStorage.setItem('favorites', JSON.stringify(favorites));
        console.log('Added to favorites:', storyId);
    }
}

// Dark mode toggle (if implementing)
function toggleDarkMode() {
    document.body.classList.toggle('dark-mode');
    localStorage.setItem('darkMode', document.body.classList.contains('dark-mode'));
}

// Load dark mode preference
document.addEventListener('DOMContentLoaded', function() {
    const darkMode = localStorage.getItem('darkMode') === 'true';
    if (darkMode) {
        document.body.classList.add('dark-mode');
    }
});