<template>
  <section id="testimoni" class="bg-slate-50 py-20 px-5">
    <div class="container mx-auto text-center">
      <h2 class="text-4xl font-extrabold text-gray-800 mb-2">
        Apa Kata Mereka?
      </h2>
      <p class="text-lg text-gray-600 mb-16">
        Kisah sukses dari para pengguna yang telah mempercayakan momen spesialnya kepada kami.
      </p>

      <div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
        <div 
          v-for="testimonial in testimonials" 
          :key="testimonial.id"
          class="flex flex-col rounded-xl bg-white p-8 text-left shadow-lg transition-transform duration-300 hover:-translate-y-2 hover:shadow-2xl"
        >
          <div class="mb-4 flex items-center">
            <svg v-for="n in 5" :key="n" class="h-5 w-5" :class="n <= testimonial.rating ? 'text-yellow-400' : 'text-gray-300'" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
          </div>

          <p class="mb-6 flex-grow text-gray-600 italic">"{{ testimonial.text }}"</p>
          
          <div class="flex items-center">
            <img class="h-12 w-12 rounded-full object-cover" :src="testimonial.avatar" :alt="testimonial.name">
            <div class="ml-4">
              <h4 class="font-bold text-gray-800">{{ testimonial.name }}</h4>
              <p class="text-sm text-gray-500">{{ testimonial.role }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref } from 'vue';

const testimonials = ref([
  {
    id: 1,
    name: 'Rizky & Anisa',
    role: 'Pengantin Baru',
    avatar: 'https://i.pravatar.cc/100?u=rizky',
    rating: 5,
    text: 'Desainnya elegan dan modern! Proses pembuatannya juga cepat banget. Semua tamu memuji undangannya. Terima kasih Abbauf Tech!'
  },
  {
    id: 2,
    name: 'Budi Santoso',
    role: 'Event Organizer',
    avatar: 'https://i.pravatar.cc/100?u=budi',
    rating: 5,
    text: 'Sebagai EO, kami butuh platform yang efisien dan hasilnya premium. Abbauf Tech menjawab semua kebutuhan itu. Klien kami sangat puas.'
  },
  {
    id: 3,
    name: 'Citra Lestari',
    role: 'Ulang Tahun Anak',
    avatar: 'https://i.pravatar.cc/100?u=citra',
    rating: 4,
    text: 'Fitur RSVP dan pengingat sangat membantu. Tema-tema ulang tahunnya juga lucu dan bisa dikustomisasi. Sangat direkomendasikan!'
  },
]);
</script>

<style scoped>
/* Kosong, semua diatur oleh Tailwind */
</style>