<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 pb-mobile-nav md:pb-0">
      <slot />
    </main>

    <LayoutAppFooter class="hidden md:block" />

    <ClientOnly>
      <LayoutConsentBanner />
    </ClientOnly>

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

    <ClientOnly>
      <LayoutBottomBar />
    </ClientOnly>
  </div>
</template>

<style scoped>
.pb-mobile-nav {
  padding-bottom: calc(var(--bottom-bar-height, 64px) + 1rem);
}

@media (min-width: 768px) {
  .pb-mobile-nav {
    padding-bottom: 0;
  }
}
</style>
