<script setup lang="ts">
const route = useRoute()
const localePath = useLocalePath()

const isHomePage = computed(() => route.path === localePath('/'))
const isCatalogSection = computed(() => route.path.startsWith(localePath('/catalog')))
const isClientArea = computed(() => route.path.startsWith(localePath('/clientarea')))

const contentClass = computed(() => {
  if (isCatalogSection.value || isHomePage.value) {
    return 'flex-1 flex flex-col min-h-0'
  }
  return 'flex-1 flex flex-col min-h-0 px-3 lg:px-6'
})

const mainStyle = computed(() => {
  if (isCatalogSection.value || isHomePage.value) return { paddingTop: '0' }
  if (isClientArea.value) return { paddingTop: '116px', paddingBottom: '96px' }
  return { paddingTop: '132px', paddingBottom: '96px' }
})
</script>

<template>
  <div class="min-h-screen flex flex-col bg-base-100 text-base-content">
    <AppHeader />

    <main :class="contentClass" :style="mainStyle">
      <slot />
    </main>
  </div>
</template>
