<script setup>
import { watch } from 'vue'
import { useRoute } from 'vue-router'
import AppHeader from './components/AppHeader.vue'
import { useAppNavigation } from './composables/useAppNavigation'

const route = useRoute()
const homeSectionIds = ['home', 'business', 'scope']
const { scrolled, activeNav, navigate, scrollToSection } = useAppNavigation(homeSectionIds)

watch(
  () => route.fullPath,
  () => {
    if (route.hash) {
      setTimeout(() => scrollToSection(route.hash.slice(1)), 100)
    }
  },
)
</script>

<template>
  <AppHeader :scrolled="scrolled" :active-nav="activeNav" @navigate="navigate" />
  <router-view @navigate="navigate" />
</template>
