<template>
  <section class="bg-white py-20 px-5 text-center">
    <div class="container mx-auto">
      <h2 class="text-4xl font-extrabold text-gray-800 mb-2">
        Keistimewaan Kami
      </h2>
      <p class="text-lg text-gray-600 mb-16">
        "Membuat undangan digitalmu terlihat lebih hidup dan istimewa."
      </p>

      <div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-4">
        
        <div class="flex flex-col items-center rounded-xl border border-gray-200 bg-white p-8 text-center shadow-md transition-transform duration-300 hover:-translate-y-2 hover:shadow-xl">
          <div class="mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-blue-100">
            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-blue-600"><path d="M3 18v-6a9 9 0 0 1 18 0v6"></path><path d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z"></path></svg>
          </div>
          <h3 class="mb-4 text-xl font-bold text-gray-800">
            Layanan Customer Care Setiap Hari
          </h3>
          <p class="text-base text-gray-600">
            Tim admin siap membantu dari jam 07:00 hingga 20:00 WIB tanpa hari libur.
          </p>
        </div>

        <div class="flex flex-col items-center rounded-xl border border-gray-200 bg-white p-8 text-center shadow-md transition-transform duration-300 hover:-translate-y-2 hover:shadow-xl">
          <div class="mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-blue-100">
            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-blue-600"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-2.6-2.6a1 1 0 0 0-1.4 0l-1.6 1.6a1 1 0 0 0 0 1.4l3.77 3.77a6 6 0 0 1-7.94 7.94l-2.6-2.6a1 1 0 0 0-1.4 0L.3 21.7a1 1 0 0 0 0 1.4l.7.7a1 1 0 0 0 1.4 0l2.6-2.6a6 6 0 0 1 7.94-7.94l3.77-3.77z"></path><line x1="12" y1="12" x2="16" y2="16"></line></svg>
          </div>
          <h3 class="mb-4 text-xl font-bold text-gray-800">
            Desain Personal Sesuai Gaya Anda
          </h3>
          <p class="text-base text-gray-600">
            Pilih dari ratusan tema menarik dan ubah warna, font, serta tata letaknya dengan mudah.
          </p>
        </div>

        <div class="flex flex-col items-center rounded-xl border border-gray-200 bg-white p-8 text-center shadow-md transition-transform duration-300 hover:-translate-y-2 hover:shadow-xl">
          <div class="mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-blue-100">
             <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-blue-600"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
          </div>
          <h3 class="mb-4 text-xl font-bold text-gray-800">
            Undangan Fleksibel
          </h3>
          <p class="text-base text-gray-600">
            Nikmati kemudahan membagikan undangan dengan jumlah tamu sesuai kebutuhan Anda.
          </p>
        </div>
        
        <div class="flex flex-col items-center rounded-xl border border-gray-200 bg-white p-8 text-center shadow-md transition-transform duration-300 hover:-translate-y-2 hover:shadow-xl">
          <div class="mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-blue-100">
            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-blue-600"><circle cx="12" cy="12" r="10"></circle><polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"></polygon></svg>
          </div>
          <h3 class="mb-4 text-xl font-bold text-gray-800">
            Tema Eksklusif & Bisa Dikustomisasi
          </h3>
          <p class="text-base text-gray-600">
            Pilih ratusan desain menarik, ubah warna, font, hingga tata letak. Buat undangan yang benar-benar mencerminkan gayamu.
          </p>
        </div>

      </div>
    </div>
  </section>
</template>

<script setup>
// Tidak ada script yang dibutuhkan untuk bagian ini
</script>

<style scoped>
/* Kosong! Semua styling sudah diatur oleh Tailwind di dalam template. */
</style>