components/services.js

class ServicesComponent extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
        }
        
        .services {
          padding: 4rem 0 6rem;
          background-color: #171717;
        }
        
        .container {
          max-width: 80rem;
          margin: 0 auto;
          padding: 0 1.5rem;
        }
        
        h2 {
          font-size: 1.875rem;
          font-weight: 700;
          text-align: center;
          margin-bottom: 2rem;
        }
        
        @media (min-width: 640px) {
          h2 {
            font-size: 2.25rem;
          }
        }
        
        .grid {
          display: grid;
          gap: 2rem;
        }
        
        @media (min-width: 768px) {
          .grid {
            grid-template-columns: repeat(3, 1fr);
          }
        }
        
        .card {
          background-color: #262626;
          padding: 1.5rem;
          border-radius: 1rem;
          transition: transform 0.2s;
        }
        
        .card:hover {
          transform: scale(1.05);
        }
        
        h3 {
          font-size: 1.25rem;
          font-weight: 600;
          margin-bottom: 0.75rem;
        }
        
        p {
          color: #d4d4d4;
          margin-bottom: 1.5rem;
        }
        
        a {
          color: #10b981;
          font-weight: 600;
          text-decoration: none;
        }
        
        a:hover {
          text-decoration: underline;
        }
      </style>
      
      <section class="services">
        <div class="container">
          <h2>Tjänster</h2>
          <div class="grid">
            <div class="card">
              <h3>Personlig träning</h3>
              <p>Individuellt anpassad träning – nybörjare eller erfaren.</p>
              <a href="#priser">Börja nu →</a>
            </div>
            <div class="card">
              <h3>Kostrådgivning</h3>
              <p>Struktur, tydlighet och resultat – utan extrema dieter.</p>
              <a href="#priser">Börja nu →</a>
            </div>
            <div class="card">
              <h3>Online coaching</h3>
              <p>Komplett upplägg med träning, kost och uppföljning.</p>
              <a href="#priser">Börja nu →</a>
            </div>
          </div>
        </div>
      </section>
    `;
  }
}

customElements.define('services-component', ServicesComponent);