<template>
  <KeepAlive>
    <component :is="component.componentInstance" v-for="component in componentsList" :key="component.name"
      :component="component.component" />
  </KeepAlive>
</template>

<script setup>
import { gsap } from 'gsap'
import ScrollTrigger from 'gsap/ScrollTrigger'

gsap.registerPlugin(ScrollTrigger)

watch(useColorMode(), (color) => {
  console.log(color);
  
})

onMounted(() => {
  
 
  
  
  const anim = gsap.fromTo(
    'h1',
    {
      opacity: 0,
      zoom: 0.95
    },
    {
      opacity: 1,
      duration: 1,
      zoom: 1,
      ease: 'power2.out',
    }
  )

  ScrollTrigger.create({
    trigger: 'h1',
    start: 'top 80%',
    onEnter: () => anim.restart(),       // play when scrolling down
    onEnterBack: () => anim.restart(),   // play again when scrolling up
  })

  const animh2 = gsap.fromTo(
    'h2',
    {
      opacity: 0,
      color: 'var(--color-accent-green-light)',
    },
    {
      opacity: 1,
      duration: 1,
      ease: 'power2.out',
    }
  )

  ScrollTrigger.create({
    trigger: 'h2',
    start: 'top 80%',
    onEnter: () => animh2.restart(),       // play when scrolling down
    onEnterBack: () => animh2.restart(),   // play again when scrolling up
  })


})


const route = useRoute();
const store = useStore();
const menuStore = useMenuStore();
await store.getSections(route.params.id);

onMounted(() => {
  menuStore.openMenu = false;
});

useHead(menuStore.headMeta);

const componentsList = await store.getComponents(route.params.id)

</script>