<template>
  <div class="code-world font-mono text-sm md:text-base leading-relaxed">
    <pre
      class="text-sky-accent whitespace-pre overflow-x-auto max-w-full"
      :class="{ 'animate-reveal': !reducedMotion }"
      aria-hidden="true"
    ><code>{{ visibleCode }}</code></pre>

    <!-- Screen reader alternative -->
    <p class="sr-only">
      {{ $t('revelation.codeWorldAlt') }}
    </p>
  </div>
</template>

<script setup lang="ts">
const emit = defineEmits<{
  complete: []
}>()

const reducedMotion = usePreferredReducedMotion()

const asciiArt = `
           *  .  *
    *   .        .   *
         ___
       /     \\
      /   ^   \\
     /    ^    \\
    /____/ \\____\\
   |    |   |    |
   |    |   |    |
___|    |___|    |___
      {  YOU  }
   { FOUND ME! }
___________________
`

const visibleCode = ref('')
const lines = asciiArt.split('\n')
let currentLine = 0

onMounted(() => {
  if (reducedMotion.value === 'reduce') {
    visibleCode.value = asciiArt
    emit('complete')
  } else {
    revealLines()
  }
})

function revealLines() {
  if (currentLine < lines.length) {
    visibleCode.value += lines[currentLine] + '\n'
    currentLine++
    setTimeout(revealLines, 100)
  } else {
    setTimeout(() => {
      emit('complete')
    }, 500)
  }
}
</script>

<style scoped>
.code-world {
  text-align: center;
}

pre {
  display: inline-block;
  text-align: left;
}

@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-reveal {
  animation: reveal 0.3s ease-out;
}
</style>
