<script setup lang="ts">
import { onMounted } from 'vue'
import { RouterView } from 'vue-router'
import NavBar from './components/NavBar.vue'
import ErrorBoundary from './components/ErrorBoundary.vue'
import { ensureAudioContext } from './game/audio'

// Unlock AudioContext + SpeechSynthesis on first user interaction (mobile requires gesture)
onMounted(() => {
  const unlock = () => {
    ensureAudioContext()
    document.removeEventListener('touchstart', unlock)
    document.removeEventListener('click', unlock)
  }
  document.addEventListener('touchstart', unlock, { once: true, passive: true })
  document.addEventListener('click', unlock, { once: true })
})
</script>

<template>
  <div class="h-[100dvh] bg-surface synthwave-grid flex flex-col relative">
    <div class="fixed inset-0 crt-overlay z-40" />
    <NavBar />
    <main class="flex-1 min-h-0 relative z-10 overflow-y-auto pb-14 md:pb-0">
      <ErrorBoundary>
        <RouterView />
      </ErrorBoundary>
    </main>
  </div>
</template>
