components/language-switcher.js

class LanguageSwitcher extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          position: fixed;
          top: 15px;
          right: 15px;
          display: flex;
          gap: 8px;
          z-index: 9999;
        }
        
        button {
          background: #000;
          border: none;
          padding: 8px 10px;
          border-radius: 50%;
          cursor: pointer;
          font-size: 18px;
          box-shadow: 0 5px 15px rgba(0,0,0,.3);
          transition: all 0.2s ease;
        }
        
        button:hover {
          transform: scale(1.1);
          background: #EF4444;
        }
      </style>
      <button onclick="setLanguage('sv')">🇸🇪</button>
      <button onclick="setLanguage('en')">🇬🇧</button>
      <button onclick="setLanguage('es')">🇪🇸</button>
    `;
  }
}

customElements.define('language-switcher', LanguageSwitcher);

function setLanguage(lang) {
  const items = document.querySelectorAll("[data-lang]");
  items.forEach(item => {
    item.style.display = item.getAttribute("data-lang") === lang ? "block" : "none";
  });
  localStorage.setItem("siteLanguage", lang);
}

window.onload = function() {
  const savedLang = localStorage.getItem("siteLanguage") || "sv";
  setLanguage(savedLang);
};