<template>
  <section id="beranda" class="py-20 px-5">
    <div class="container mx-auto flex flex-col items-center gap-12 lg:flex-row">

      <div class="w-full text-center lg:w-1/2">

        <h1 class="text-5xl font-extrabold leading-tight text-gray-800 lg:text-6xl pl-15">
          Buat Undangan Digital Praktis Untuk

          <div class="h-24 flex items-center justify-center">
            <Transition name="fade" mode="out-in">
              <span class="text-blue-600" :key="currentWord">{{ currentWord }}</span>
            </Transition>
          </div>

          Tanpa Ribet
        </h1>

        <p class="mt-4 mb-8 text-lg text-gray-600 pl-15">
          Coba undangan digital PRAKTIS untuk berbagai acara. Pilih template praktis atau premium sesuai kebutuhanmu.
          Praktis, cepat, dan bisa langsung digunakan.
        </p>
        <div class="flex flex-col justify-center gap-4 sm:flex-row pl-15">

          <a :href="waUrl" target="_blank"
            class="inline-flex items-center justify-center rounded-lg border-2 border-green-500 bg-white px-8 py-3 font-bold text-gray-800 shadow-md transition-all duration-300 transform hover:-translate-y-1 hover:shadow-lg hover:bg-green-500 hover:text-white">

            <!-- Ikon WhatsApp -->
            <svg class="mr-2 w-6 h-6 transition-colors duration-300" viewBox="0 0 32 32"
              xmlns="http://www.w3.org/2000/svg">
              <path class="transition-colors duration-300" fill="#25D366"
                d="M16 .4a15.6 15.6 0 0 0-13.6 23.8L.4 31.6l7.6-2a15.7 15.7 0 0 0 8 2.2c8.8 0 15.6-7.2 15.6-15.6S24.8.4 16 .4z" />
              <path class="transition-colors duration-300" fill="#FFF"
                d="M25.2 22.4c-.4 1-2.2 1.8-3 1.8-.8.2-1.8.4-6.2-1.4-5.2-2.2-8.6-7.4-8.8-7.6-.2-.2-2-2.6-2-5s1.2-3.6 1.6-4c.4-.4.8-.6 1.2-.6h.8c.2 0 .6 0 .8.6.4 1 .8 2 .8 2.2.2.4 0 .8-.2 1.2-.2.2-.4.6-.6.8-.2.2-.4.4-.2.8.4.8 1.6 2.6 3.4 4 .2.2 3.6 3 7 .4.4-.2.8-.2 1.2 0 .4.2 2.6 1.2 3 1.4.4.2.6.2.8.4.2.2.2 1 0 2z" />
            </svg>

            <span>Hubungi Kami</span>
          </a>


          <a href="/template" class="inline-flex justify-center items-center
         rounded-xl 
         bg-gradient-to-r from-blue-600 to-blue-700 
         px-10 py-3 
         font-bold text-white 
         shadow-lg shadow-blue-500/30
         transition-all duration-300 
         hover:scale-110 hover:shadow-2xl hover:shadow-blue-600/50 hover:from-blue-700 hover:to-blue-800">
            Lihat Templat
          </a>




        </div>
      </div>

      <div class="w-full lg:w-1/2">
        <img src="/iphone.png" alt="Tampilan Undangan Digital di Ponsel" class="mx-auto max-w-full">
        <div class="mt-6 text-center italic text-gray-500">
          <p>"Abadikan momen indahmu dengan undangan digital yang elegan."</p>
          <p>"Satu aplikasi untuk semua momen spesialmu."</p>
        </div>
      </div>
    </div>
  </section>
</template>

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

// Bagian script ini tidak perlu diubah
const words = ['Semua', 'Pernikahan', 'Khitan', 'Ulang Tahun'];
const currentWordIndex = ref(0);
const currentWord = ref(words[0]);
let intervalId = null;

onMounted(() => {
  intervalId = setInterval(() => {
    currentWordIndex.value = (currentWordIndex.value + 1) % words.length;
    currentWord.value = words[currentWordIndex.value];
  }, 1000);
});

onUnmounted(() => {
  clearInterval(intervalId);
});

const adminNumber = "62895602603247";
const defaultMessage = "Halo Admin, saya mau tanya tentang undangan digital 🙏";
const waUrl = `https://wa.me/${adminNumber}?text=${encodeURIComponent(defaultMessage)}`;


</script>

<style scoped>
/* Bagian style ini tidak perlu diubah */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>