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

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>
