<script setup lang="ts">
import AppHeader from '~/components/navigation/AppHeader.vue'
import BottomNav from '~/components/navigation/BottomNav.vue'
</script>

<template>
  <div class="min-h-screen flex flex-col">
    <!-- New App Header with full navigation -->
    <AppHeader />

    <!-- Main content with bottom padding for mobile nav -->
    <main class="flex-1 pb-20 md:pb-0">
      <slot />
    </main>

    <!-- Footer -->
    <CommonFooter />

    <!-- Mobile Bottom Navigation -->
    <BottomNav />
  </div>
</template>

<style scoped>
/* Ensure main content doesn't get hidden behind bottom nav on mobile */
@media (max-width: 768px) {
  main {
    padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
  }
}
</style>
