<script setup lang="ts">
import AppHeader from '~/components/navigation/AppHeader.vue'
import BottomNav from '~/components/navigation/BottomNav.vue'
import CartFAB from '~/components/Cart/CartFAB.vue'
import CartResponsive from '~/components/Cart/CartResponsive.vue'
import { Toaster } from '~/components/ui/sonner'
</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 />

    <!-- Floating Action Button (FAB) for Cart on Product Pages -->
    <!-- <CartFAB /> -->

    <!-- Responsive Cart (slides from right on desktop, bottom on mobile) -->
    <CartResponsive />

    <!-- Toast Notifications -->
    <Toaster position="top-center" :duration="3000" rich-colors />
  </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>
