<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 ml-14">
          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 ml-14">
          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 ml-14">
          <a href="#" 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-sm transition-transform duration-300 hover:-translate-y-1 hover:shadow-md">
            <svg class="mr-2" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M19.2239 4.7761C17.1659 2.7181 14.6599 1.5 11.9999 1.5...Z" fill="#25D366"/>
              <path d="M16.7441 14.968C16.5331 15.538...Z" fill="white"/>
            </svg>
            <span>Hubungi Kami</span>
          </a>
          <a href="#" class="inline-flex items-center justify-center rounded-lg bg-blue-600 px-8 py-3 font-bold text-white shadow-sm transition-transform duration-300 hover:-translate-y-1 hover:shadow-md hover:bg-blue-700">
            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);
});
</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>