<template>
  <section id="cara" class="howto-section">
    <div class="howto-header">
      <h2>Cara Membuat Undangan Digital</h2>
      <p>"Buat undanganmu dengan simple, mudah dan praktis."</p>
    </div>

    <div class="howto-grid">
      <div class="howto-card" v-for="(item, index) in steps" :key="index">
        <div class="card-icon">
          <img :src="`/event-list${index}.png`" :alt="item.title" />
        </div>
        <h3>{{ item.title }}</h3>
        <p>{{ item.desc }}</p>
      </div>
    </div>
  </section>
</template>

<script setup>
const steps = [
  {
    title: "Mulai dari Kategori",
    desc: "Pilih Kategory sesuai kebutuhan."
  },
  {
    title: "Tentukan Template",
    desc: "Sesuaikan desain sesuai selera."
  },
  {
    title: "Isi Data",
    desc: "Nama, tanggal, lokasi, dan detail acara, dll."
  },
  {
    title: "Bagikan Undangan",
    desc: "Lewat WhatsApp, link, atau media sosial."
  },
  {
    title: "Lihat Hasil",
    desc: "Pratinjau undangan sebelum simpan."
  },
  {
    title: "Tambahkan Media",
    desc: "Foto, musik, dan peta lokasi."
  }
];
</script>

<style scoped>
.howto-section {
  padding: 60px 20px;
  text-align: center;
}

.howto-header h2 {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 10px;
}

.howto-header p {
  color: #555;
  font-size: 15px;
  margin-bottom: 40px;
}

.howto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
  max-width: 1000px;
  margin: 0 auto;
}

.howto-card {
  background: #f8f9fc;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  text-align: center;
  transition: transform 0.2s ease;
}

.howto-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.card-icon {
  margin-bottom: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-icon img {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.howto-card h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
}

.howto-card p {
  font-size: 14px;
  color: #555;
}
</style>
