components/footer.js

class CustomFooter extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        footer {
          background: #111827;
          color: white;
          padding: 3rem 1.5rem;
          text-align: center;
        }
        .social-links {
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 1.5rem;
          margin-bottom: 1.5rem;
        }
        .social-links a {
          width: 3.5rem;
          height: 3.5rem;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 50%;
          transition: all 0.3s ease;
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .social-links a:hover {
          transform: scale(1.1);
        }
        .instagram {
          background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
        }
        .tiktok {
          background: #000000;
        }
        .facebook {
          background: #1877f2;
        }
        .youtube {
          background: #ff0000;
        }
        .social-icon {
          font-size: 1.5rem;
          color: white;
        }
        .copyright {
          font-size: 0.875rem;
          color: #9ca3af;
        }
      </style>
      <footer>
        <p class="text-lg font-semibold mb-8">Följ mig på sociala medier</p>
        <div class="social-links">
          <a href="https://www.instagram.com/ptalexadolfsson/" target="_blank" class="instagram">
            <i class="fab fa-instagram social-icon"></i>
          </a>
          <a href="https://www.tiktok.com/@ptalexanderadolfsson?lang=sv-SE" target="_blank" class="tiktok">
            <i class="fab fa-tiktok social-icon"></i>
          </a>
          <a href="https://www.facebook.com/profile.php?id=61583938018630" target="_blank" class="facebook">
            <i class="fab fa-facebook-f social-icon"></i>
          </a>
          <a href="https://www.youtube.com/@alexanderadolfsson9295" target="_blank" class="youtube">
            <i class="fab fa-youtube social-icon"></i>
          </a>
        </div>
        <p class="copyright">© 2026 Alexander Adolfsson Coaching. Alla rättigheter reserverade.</p>
      </footer>
`;
  }
}
customElements.define('custom-footer', CustomFooter);

// Load Font Awesome
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css';
link.integrity = 'sha512-kuVg2qYI6xq0DhwK4cTZf2iCOb+QUPsy2JdWXjFmx1H3FfH2X7pYdC4+2XzO8lw1z9KwtlV4fG2zt+c+1zV0zQ==';
link.crossOrigin = 'anonymous';
link.referrerPolicy = 'no-referrer';
document.head.appendChild(link);