<script setup lang="ts">
const narrator = useNarrator()

useIdleDetection({
  timeout: 30000,
  onIdle: () => {
    narrator.showHint()
  },
})

onMounted(() => {
  setTimeout(() => {
    narrator.showIntro()
  }, 1500)
})
</script>

<template>
  <div class="min-h-screen bg-sky-dark text-sky-text flex flex-col">
    <LayoutAppHeader />

    <main class="flex-1">
      <slot />
    </main>

    <LayoutAppFooter />

    <ClientOnly>
      <LayoutConsentBanner />
    </ClientOnly>

    <ClientOnly>
      <NarratorBubble
        :message="narrator.currentMessage.value"
        :visible="narrator.isVisible.value"
        @close="narrator.hide()"
      />
    </ClientOnly>
  </div>
</template>
