Lisää ruotsin kieli + kolme kielinappia (FI/SV/EN)

- Vaihda yksittäinen kielitoggle kolmen napin ryhmäksi
- Lisää data-sv attribuutit kaikkiin teksteihin (ruotsinkieliset käännökset)
- Päivitä script.js tukemaan kolmea kieltä
- Vaihda bannerin teksti: "parempaa huomista" (oli "tulevaisuutta")

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

script.js

@@ -1,20 +1,31 @@
-// ========== Language Toggle ==========
+// ========== Language Switcher (FI / SV / EN) ==========
 let currentLang = 'fi';
 
-const langToggle = document.getElementById('langToggle');
-langToggle.addEventListener('click', () => {
-    currentLang = currentLang === 'fi' ? 'en' : 'fi';
-    langToggle.textContent = currentLang.toUpperCase();
-    document.documentElement.lang = currentLang;
+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-${currentLang}`);
+        const text = el.getAttribute(`data-${lang}`);
         if (text) {
-            if (el.tagName === 'A' || el.tagName === 'BUTTON' || el.tagName === 'P' || el.tagName === 'SPAN' || el.tagName === 'H1' || el.tagName === 'H2' || el.tagName === 'H3' || el.tagName === 'LI') {
+            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 ==========
@@ -59,7 +70,7 @@ const observer = new IntersectionObserver((entries) => {
 }, observerOptions);
 
 // Add fade-in class to animatable elements
-document.querySelectorAll('.theme-card, .region-card, .about-facts li, .section-title, .section-intro').forEach(el => {
+document.querySelectorAll('.theme-card, .about-facts li, .section-title, .section-intro').forEach(el => {
     el.classList.add('fade-in');
     observer.observe(el);
 });