class ServicesGrid extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .service-card {
          transition: all 0.3s ease;
        }
        .service-card:hover {
          transform: translateY(-5px);
          box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
        }
      </style>
      <section class="py-20 bg-gray-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div class="text-center mb-16">
            <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Alles wat je nodig hebt voor online succes</h2>
            <p class="text-xl text-gray-600 max-w-3xl mx-auto">Van domeinnaam tot hosting, e-mail en websites. Alles uit één hand.</p>
          </div>
          
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <!-- Service 1 -->
            <div class="service-card bg-white rounded-xl shadow-md overflow-hidden">
              <div class="p-6">
                <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
                  <i data-feather="globe" class="w-6 h-6 text-blue-600"></i>
                </div>
                <h3 class="text-xl font-semibold mb-2">Domeinnaam registreren</h3>
                <p class="text-gray-600 mb-4">Je eigen domeinnaam: in 1 minuut aangevraagd.</p>
                <a href="#" class="text-blue-600 font-medium flex items-center">
                  Meer informatie
                  <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
                </a>
              </div>
            </div>
            
            <!-- Service 2 -->
            <div class="service-card bg-white rounded-xl shadow-md overflow-hidden">
              <div class="p-6">
                <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4">
                  <i data-feather="mail" class="w-6 h-6 text-green-600"></i>
                </div>
                <h3 class="text-xl font-semibold mb-2">E-mail</h3>
                <p class="text-gray-600 mb-4">E-mail voordelig én eenvoudig met je eigen domein.</p>
                <a href="#" class="text-blue-600 font-medium flex items-center">
                  Meer informatie
                  <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
                </a>
              </div>
            </div>
            
            <!-- Service 3 -->
            <div class="service-card bg-white rounded-xl shadow-md overflow-hidden">
              <div class="p-6">
                <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
                  <i data-feather="layout" class="w-6 h-6 text-purple-600"></i>
                </div>
                <h3 class="text-xl font-semibold mb-2">Website maken</h3>
                <p class="text-gray-600 mb-4">Maak eenvoudig en zonder technische kennis een professionele site.</p>
                <a href="#" class="text-blue-600 font-medium flex items-center">
                  Meer informatie
                  <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
                </a>
              </div>
            </div>
            
            <!-- Service 4 -->
            <div class="service-card bg-white rounded-xl shadow-md overflow-hidden">
              <div class="p-6">
                <div class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center mb-4">
                  <i data-feather="code" class="w-6 h-6 text-yellow-600"></i>
                </div>
                <h3 class="text-xl font-semibold mb-2">WordPress</h3>
                <p class="text-gray-600 mb-4">Bouw een snelle WordPress-website in alle technische vrijheid.</p>
                <a href="#" class="text-blue-600 font-medium flex items-center">
                  Meer informatie
                  <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
                </a>
              </div>
            </div>
            
            <!-- Service 5 -->
            <div class="service-card bg-white rounded-xl shadow-md overflow-hidden">
              <div class="p-6">
                <div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mb-4">
                  <i data-feather="server" class="w-6 h-6 text-red-600"></i>
                </div>
                <h3 class="text-xl font-semibold mb-2">Hosting</h3>
                <p class="text-gray-600 mb-4">Host je website op ons razendsnelle shared platform.</p>
                <a href="#" class="text-blue-600 font-medium flex items-center">
                  Meer informatie
                  <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
                </a>
              </div>
            </div>
            
            <!-- Service 6 -->
            <div class="service-card bg-white rounded-xl shadow-md overflow-hidden">
              <div class="p-6">
                <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
                  <i data-feather="cpu" class="w-6 h-6 text-indigo-600"></i>
                </div>
                <h3 class="text-xl font-semibold mb-2">VPS</h3>
                <p class="text-gray-600 mb-4">Ervaar de kracht en stabiliteit van een eigen server.</p>
                <a href="#" class="text-blue-600 font-medium flex items-center">
                  Meer informatie
                  <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>
    `;
    
    feather.replace();
  }
}

customElements.define('services-grid', ServicesGrid);