<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

<script setup>
import { onMounted, onBeforeUnmount } from 'vue'
import { useMainStore } from '@/stores/main'

const mainStore = useMainStore()

// 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>
