<template>
  <section class="bg-[#FFF8EC] py-12 px-4">
    <!-- Judul -->
    <div class="flex items-center justify-center gap-2 mb-8">
      <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-600 text-center mb-10">
      Guest Book
    </h2>

    <!-- Layout Form + Ucapan -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto">
      <!-- Form -->
      <div class="bg-white shadow-lg rounded-2xl p-6">
        <h3 class="text-xl font-semibold text-yellow-600 mb-4">Say Something!</h3>

        <form class="space-y-4">
          <!-- Nama -->
          <input
            type="text"
            placeholder="Your Name"
            class="w-full p-3 border rounded-lg focus:ring-2 focus:ring-yellow-400 focus:outline-none"
          />

          <!-- Ucapan -->
          <textarea
            rows="3"
            placeholder="Write your message..."
            class="w-full p-3 border rounded-lg focus:ring-2 focus:ring-yellow-400 focus:outline-none"
          ></textarea>

          <!-- Tombol -->
          <button
            type="submit"
            class="w-full bg-yellow-500 hover:bg-yellow-600 text-white font-semibold py-2 px-4 rounded-lg transition duration-200"
          >
            Send Now!
          </button>
        </form>
      </div>

      <!-- Daftar Ucapan -->
      <div class="bg-white shadow-lg rounded-2xl p-6">
        <div class="flex items-center gap-2 mb-4">
          <span class="text-gray-500">💬</span>
          <span class="text-gray-700 font-medium">04 Messages</span>
        </div>

        <!-- List Ucapan -->
        <div class="space-y-3">
          <div class="p-3 bg-gray-100 rounded-lg">
            <p class="font-semibold text-gray-800">Tia SMAN6BDG</p>
            <p class="text-sm text-gray-600">Congrats!!</p>
          </div>

          <div class="p-3 bg-gray-100 rounded-lg">
            <p class="font-semibold text-gray-800">Muthia Rahma</p>
            <p class="text-sm text-gray-600">Happy wedd my sisstaa!</p>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
// nanti tinggal ganti data dummy jadi fetch API
</script>
