<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import ImagePlaceholder from './ImagePlaceholder.vue'
import { heroSlides } from '../data/site'

const emit = defineEmits(['navigate'])

const currentIndex = ref(0)
const total = heroSlides.length
let timer = null

function nextSlide() {
  currentIndex.value = (currentIndex.value + 1) % total
}

onMounted(() => {
  timer = setInterval(nextSlide, 5000)
})

onUnmounted(() => {
  clearInterval(timer)
})
</script>

<template>
  <section class="hero" id="home">
    <div
      v-for="(slide, index) in heroSlides"
      :key="index"
      class="hero-slide"
      :class="{ active: currentIndex === index }"
    >
      <div
        v-if="slide.bg"
        class="hero-bg"
        :style="{ backgroundImage: `url(${slide.bg})` }"
      />
      <ImagePlaceholder v-else class="hero-bg" :placeholder="slide.placeholder" />
      <div class="hero-overlay"></div>
      <div class="container hero-inner">
        <div class="hero-content">
          <h1 class="hero-title">{{ slide.title }}</h1>
          <p class="hero-subtitle">{{ slide.subtitle }}</p>
          <p class="hero-desc">{{ slide.desc }}</p>
          <a
            href="#"
            class="btn btn-primary hero-btn"
            @click.prevent="emit('navigate', slide.ctaTarget)"
          >
            {{ slide.cta }}
          </a>
        </div>
      </div>
    </div>

    <div class="hero-pagination">
      <span class="pagination-current">{{ String(currentIndex + 1).padStart(2, '0') }}</span>
      <span class="pagination-divider">/</span>
      <span class="pagination-total">{{ String(total).padStart(2, '0') }}</span>
    </div>
  </section>
</template>
