lampikoski.fi/script.js

// ========== Language Switcher (FI / SV / EN) ==========
let currentLang = 'fi';

function switchLanguage(lang) {
    currentLang = lang;
    document.documentElement.lang = lang;

    // Update active button
    document.querySelectorAll('.lang-btn').forEach(btn => {
        btn.classList.toggle('active', btn.dataset.lang === lang);
    });

    // Update all translatable elements
    document.querySelectorAll('[data-fi]').forEach(el => {
        const text = el.getAttribute(`data-${lang}`);
        if (text) {
            if (['A', 'BUTTON', 'P', 'SPAN', 'H1', 'H2', 'H3', 'LI'].includes(el.tagName)) {
                el.innerHTML = text;
            }
        }
    });
}

// Attach click handlers to all lang buttons
document.querySelectorAll('.lang-btn').forEach(btn => {
    btn.addEventListener('click', () => {
        switchLanguage(btn.dataset.lang);
    });
});

// ========== Mobile Navigation ==========
const hamburger = document.getElementById('hamburger');
const navLinks = document.getElementById('navLinks');

hamburger.addEventListener('click', () => {
    hamburger.classList.toggle('active');
    navLinks.classList.toggle('active');
});

// Close mobile nav on link click
navLinks.querySelectorAll('a').forEach(link => {
    link.addEventListener('click', () => {
        hamburger.classList.remove('active');
        navLinks.classList.remove('active');
    });
});

// ========== Navbar Scroll Effect ==========
const navbar = document.getElementById('navbar');
window.addEventListener('scroll', () => {
    if (window.scrollY > 50) {
        navbar.classList.add('scrolled');
    } else {
        navbar.classList.remove('scrolled');
    }
});

// ========== Scroll Animations ==========
const observerOptions = {
    threshold: 0.1,
    rootMargin: '0px 0px -50px 0px'
};

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

// Add fade-in class to animatable elements
document.querySelectorAll('.theme-card, .about-facts li, .section-title, .section-intro').forEach(el => {
    el.classList.add('fade-in');
    observer.observe(el);
});

// Stagger theme cards
document.querySelectorAll('.theme-card').forEach((card, i) => {
    card.style.transitionDelay = `${i * 0.1}s`;
});

document.querySelectorAll('.about-facts li').forEach((li, i) => {
    li.style.transitionDelay = `${i * 0.08}s`;
});