<template>
  <div class="app-container">
    <!-- Global MonacoUSA Logo - appears on all pages -->
    <div class="global-logo">
      <MonacoUSALogo 
        size="small" 
        variant="white" 
        clickable 
        @click="handleLogoClick" 
      />
    </div>
    
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

<script setup lang="ts">
// Global app setup
useHead({
  titleTemplate: (titleChunk) => {
    return titleChunk ? `${titleChunk} • MonacoUSA Portal` : 'MonacoUSA Portal';
  },
});

// Handle logo click - navigate to home/dashboard
const handleLogoClick = () => {
  navigateTo('/');
};
</script>

<style>
.app-container {
  position: relative;
  min-height: 100vh;
}

.global-logo {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 2000; /* Higher than dashboard drawer and other elements */
  pointer-events: auto;
}

/* Adjust positioning on mobile */
@media (max-width: 768px) {
  .global-logo {
    top: 12px;
    right: 12px;
  }
}

/* Ensure logo doesn't interfere with dashboard layout */
@media (min-width: 1280px) {
  .global-logo {
    top: 20px;
    right: 20px;
  }
}

/* Hide logo on very small screens if needed */
@media (max-width: 320px) {
  .global-logo {
    display: none;
  }
}

/* Print styles - hide logo when printing */
@media print {
  .global-logo {
    display: none !important;
  }
}

/* Accessibility - ensure logo doesn't block important content */
@media (prefers-reduced-motion: reduce) {
  .global-logo {
    transition: none !important;
  }
}
</style>
