script.js

// Main JavaScript file for POI Explorer Pro

document.addEventListener('DOMContentLoaded', function() {
    // Initialize Feather Icons
    if (typeof feather !== 'undefined') {
        feather.replace();
    }

    // Add smooth scrolling for anchor links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function(e) {
            e.preventDefault();
            const targetId = this.getAttribute('href');
            if (targetId === '#') return;
            
            const targetElement = document.querySelector(targetId);
            if (targetElement) {
                window.scrollTo({
                    top: targetElement.offsetTop - 80,
                    behavior: 'smooth'
                });
            }
        });
    });

    // Mock data for POIs (in a real app, this would come from an API)
    const mockPOIs = [
        {
            id: 1,
            title: "Brandenburg Gate",
            location: "Berlin, Germany",
            category: "Monument",
            level: "free",
            coordinates: { lat: 52.5163, lng: 13.3777 }
        },
        {
            id: 2,
            title: "Matterhorn",
            location: "Swiss Alps, Switzerland",
            category: "Mountain",
            level: "premium",
            coordinates: { lat: 45.9764, lng: 7.6586 }
        },
        {
            id: 3,
            title: "Schönbrunn Palace",
            location: "Vienna, Austria",
            category: "Palace",
            level: "exclusive",
            coordinates: { lat: 48.1851, lng: 16.3122 }
        }
    ];

    // Function to update map markers based on selected filter
    function updateMapFilter(level) {
        const markers = document.querySelectorAll('.map-marker');
        markers.forEach(marker => {
            if (level === 'all' || marker.dataset.level === level) {
                marker.style.opacity = '1';
                marker.style.transform = 'scale(1)';
            } else {
                marker.style.opacity = '0.3';
                marker.style.transform = 'scale(0.8)';
            }
        });
    }

    // Initialize level filter buttons
    const levelButtons = document.querySelectorAll('[data-level-filter]');
    levelButtons.forEach(button => {
        button.addEventListener('click', function() {
            const level = this.dataset.levelFilter;
            
            // Update active button
            levelButtons.forEach(btn => {
                btn.classList.remove('bg-primary-600', 'text-white');
                btn.classList.add('bg-gray-100', 'text-gray-700');
            });
            this.classList.remove('bg-gray-100', 'text-gray-700');
            this.classList.add('bg-primary-600', 'text-white');
            
            // Update map filter
            updateMapFilter(level);
        });
    });

    // Simulate loading animation for map
    const mapContainer = document.querySelector('.map-container');
    if (mapContainer) {
        setTimeout(() => {
            mapContainer.classList.add('loaded');
        }, 1000);
    }

    // Handle membership tier selection
    const tierCards = document.querySelectorAll('.membership-tier');
    tierCards.forEach(card => {
        card.addEventListener('click', function() {
            tierCards.forEach(c => c.classList.remove('selected'));
            this.classList.add('selected');
            
            const plan = this.dataset.plan;
            const upgradeBtn = document.getElementById('upgrade-button');
            if (upgradeBtn) {
                upgradeBtn.href = `/signup.html?plan=${plan}`;
                upgradeBtn.textContent = `Select ${this.dataset.planName} Plan`;
            }
        });
    });

    // Display current user location in DACH region (mock)
    function displayUserLocation() {
        const userLocationEl = document.getElementById('user-location');
        if (userLocationEl) {
            // In a real app, this would use Geolocation API
            const locations = ["Berlin", "Munich", "Vienna", "Zurich", "Hamburg"];
            const randomLocation = locations[Math.floor(Math.random() * locations.length)];
            userLocationEl.textContent = `📍 Currently browsing from ${randomLocation}`;
        }
    }

    // Initialize tooltips for map markers
    function initTooltips() {
        const markers = document.querySelectorAll('.map-marker');
        markers.forEach(marker => {
            marker.addEventListener('mouseenter', function() {
                const poi = mockPOIs.find(p => p.id == this.dataset.poiId);
                if (poi) {
                    const tooltip = document.createElement('div');
                    tooltip.className = 'absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-2 bg-gray-900 text-white text-sm rounded-lg whitespace-nowrap z-50';
                    tooltip.textContent = poi.title;
                    this.appendChild(tooltip);
                    
                    this.tooltip = tooltip;
                }
            });
            
            marker.addEventListener('mouseleave', function() {
                if (this.tooltip) {
                    this.tooltip.remove();
                }
            });
        });
    }

    // Initialize functions
    displayUserLocation();
    initTooltips();

    // Handle responsive navbar toggle (for mobile)
    const navbarToggle = document.getElementById('navbar-toggle');
    const navbarMenu = document.getElementById('navbar-menu');
    
    if (navbarToggle && navbarMenu) {
        navbarToggle.addEventListener('click', function() {
            navbarMenu.classList.toggle('hidden');
            navbarMenu.classList.toggle('flex');
        });
    }

    // Add animation to elements 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);
    });

    // Update copyright year
    const yearSpan = document.getElementById('current-year');
    if (yearSpan) {
        yearSpan.textContent = new Date().getFullYear();
    }
});