<template>
  <NuxtLayout>
    <NuxtPage
    :transition="{
        name: 'page',
        mode: 'out-in'
      }"
    />
  </NuxtLayout>
</template>

<script setup>
import { onMounted, onBeforeUnmount } from 'vue'
import { useMainStore } from '@/stores/main'
import { useRouter } from 'vue-router'
const mainStore = useMainStore()
const router = useRouter()

router.beforeEach((to, from, next) => {
  mainStore.setDarkHeroBack(false)
  next()
})



// Scroll- und Resize-Listener in den Lifecycle-Hooks registrieren
onMounted(() => {
  window.addEventListener('scroll', handleScroll)
  window.addEventListener('resize', handleResize)
  // Bildschirmbreite direkt beim Start setzen:
  handleResize()
})

onBeforeUnmount(() => {
  window.removeEventListener('scroll', handleScroll)
  window.removeEventListener('resize', handleResize)
})

// Event-Handler
const handleScroll = () => {
  mainStore.setScrollPosition(window.scrollY)
}

const handleResize = () => {
  mainStore.setScreenWidth(window.innerWidth)
}
</script>

<style lang="sass">
.page-enter-active,
.page-leave-active
  transition: opacity 0.3s ease, transform 0.3s ease

.page-enter-from,
.page-leave-to
  opacity: 0
  transform: scale(1.02)
</style>
