<template>
  <section class="bg-[#FFF8EC] py-12 text-center">
    <!-- Title -->
    <div class="mb-8">
      <div class="flex items-center justify-center gap-2 mb-2">
        
        <span class="h-[1px] w-12 bg-yellow-400"></span>
        <span class="text-yellow-600 text-2xl">🌸</span>
        <span class="h-[1px] w-12 bg-yellow-400"></span>
      </div>
      <h2 class="text-2xl md:text-3xl font-bold text-yellow-700">Gallery</h2>
    </div>

    <!-- Gallery Grid -->
    <div class="grid grid-cols-2 md:grid-cols-3 gap-3 max-w-4xl mx-auto px-4">
      <img v-for="(img, index) in images" :key="index" :src="img" alt="gallery"
        class="rounded-lg object-cover w-full h-full shadow-md" :class="getGridClass(index)" />
    </div>

    <!-- Quote -->
    <div class="max-w-3xl mx-auto mt-8 px-6">
      <p class="text-gray-600 italic">
        "And among His verses is that He has created for you wives of your own kind,
        so that you may feel comfortable in them, and He has made between you mawadah and mercy.
        Verily in that are signs for the people who think"
      </p>
      <p class="mt-4 text-gray-700 font-semibold">- AR-RUM 21 -</p>
    </div>

    <!-- Bottom Decoration -->
    <div class="flex items-center justify-center gap-2 mt-6">
      <span class="h-[1px] w-12 bg-yellow-400"></span>
      <span class="text-yellow-600 text-2xl">🌸</span>
      <span class="h-[1px] w-12 bg-yellow-400"></span>
    </div>
  </section>
</template>

<script setup>
const images = [
  "/logo1.png", // kiri atas tinggi
  "/logo2.png", // atas tengah
  "/pria.jpg", // atas kanan
  "/wanita.jpg", // bawah kiri
  "/iphone.png", // bawah tengah lebar
  "/templat.jpg"  // bawah kanan
]

// kasih ukuran custom seperti masonry
const getGridClass = (index) => {
  switch (index) {
    case 0: return "row-span-2 h-[400px]" // tinggi besar
    case 4: return "col-span-2 h-[250px]" // lebar besar
    case 3: return "col-span-2 h-[250px]"     // melebar
    default: return "h-[200px]"
  }
}
</script>
