<script setup>
import PublicRequestModal from '~/components/shared/PublicRequestModal.vue'
import SiteFooter from '~/components/shared/SiteFooter.vue'
import SiteHeader from '~/components/shared/SiteHeader.vue'

const route = useRoute()
const { locale } = usePublicLocale()
const localeDirection = computed(() => publicLocaleDirection(locale.value))

const siteHeaderTheme = computed(() => {
  return route.meta.siteHeaderTheme === 'dark' ? 'dark' : 'light'
})

const siteHeaderOverlay = computed(() => route.meta.siteHeaderOverlay === true)

const sitePageSurfaceClass = computed(() => {
  if (siteHeaderOverlay.value) {
    return 'bg-transparent'
  }

  return String(route.meta.sitePageSurfaceClass || 'bg-[#F8F9FA]')
})

const siteHeaderWrapperClass = computed(() => {
  return siteHeaderOverlay.value
    ? 'absolute inset-x-0 top-0 z-40 pointer-events-none'
    : 'relative z-40'
})

useHead(() => ({
  htmlAttrs: {
    lang: locale.value,
    dir: localeDirection.value,
  },
}))
</script>

<template>
  <div :class="['min-h-screen font-sans text-slate-900 selection:bg-brand-orange/30 flex flex-col relative', sitePageSurfaceClass]">
    <div class="absolute inset-0 overflow-hidden pointer-events-none">
      <div class="absolute -top-32 -left-36 h-[32rem] w-[32rem] rounded-full bg-brand-orange/10 blur-[120px]" />
      <div class="absolute -bottom-40 -right-36 h-[28rem] w-[28rem] rounded-full bg-blue-500/5 blur-[120px]" />
    </div>

    <PublicRequestModal />
    <div :class="siteHeaderWrapperClass">
      <SiteHeader :theme="siteHeaderTheme" class="pointer-events-auto" />
    </div>

    <main class="flex-1 flex flex-col relative z-10">
      <slot />
    </main>

    <SiteFooter class="relative" />
  </div>
</template>
