<script setup>
const progress = ref(0)
const subStatus = ref('Parsing layout')
const subStatuses = ['Parsing layout', 'Mapping styles', 'Extracting text', 'Building text boxes', 'Placing images', 'Finalising DOCX']

let progressInterval = null
let subInterval = null

onMounted(() => {
  progressInterval = setInterval(() => {
    if (progress.value < 90) progress.value += 1
  }, 80)
  let idx = 0
  subInterval = setInterval(() => {
    idx = (idx + 1) % subStatuses.length
    subStatus.value = subStatuses[idx]
  }, 900)
})

onUnmounted(() => {
  clearInterval(progressInterval)
  clearInterval(subInterval)
})
</script>

<template>
  <div class="w-full max-w-[680px] mx-auto mt-6 bg-white border border-gray-200 rounded-xl p-12 flex flex-col items-center gap-6">
    <div class="w-full bg-blue-50 rounded-full h-1 overflow-hidden">
      <div
        class="h-full bg-[#1a56db] rounded-full transition-all duration-300"
        :style="{ width: progress + '%' }"
      />
    </div>
    <p class="text-base text-gray-600">Converting InDesign to Word...</p>
    <p class="text-sm text-gray-400">{{ subStatus }}</p>
  </div>
</template>
