<script setup>
import { computed, ref } from "vue";
import { useGsapReveal } from "~/composables/useGsapReveal";
import { usePageShellMotion } from "~/composables/usePageShellMotion";

const announcementVisible = ref(true);
const root = ref(null);
const pageOffset = computed(() => (announcementVisible.value ? "134px" : "75px"));

useGsapReveal(root);
usePageShellMotion(root);
</script>

<template>
  <div ref="root" class="bg-white">
    <AnnouncementBar
      v-if="announcementVisible"
      @close="announcementVisible = false"
    />
    <SiteHeader :announcement-visible="announcementVisible" />

    <main :style="{ '--page-offset': pageOffset, paddingTop: pageOffset }">
      <slot />
    </main>

    <SiteFooter />
  </div>
</template>
