

<template>
  <div class="app-root" :class="{ 'zh': locale === 'zh' }" :data-lang="locale">
    <AnimatedBackground />
    <NuxtRouteAnnouncer />
    <div class="container">
      <NuxtPage />
    </div>
  </div>
</template>

<script setup lang="ts">
import AnimatedBackground from './components/parts/AnimatedBackground.vue';

const { locale } = useI18n()

// Set global html lang attribute based on current locale
useHead({
  htmlAttrs: {
    lang: computed(() => {
      const map: Record<string, string> = { en: 'en-US', es: 'es-ES', ca: 'ca-ES', zh: 'zh-CN' }
      return map[locale.value] || 'en-US'
    })
  },
  meta: [
    { name: 'author', content: 'Aran Roig' },
    { name: 'robots', content: 'index, follow' }
  ]
})

onMounted(() => {
  setupTheme()
});
</script>

<style lang="scss" scoped>
.container {
  align-items: stretch;   /* make items grow horizontally to fill container */
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
  padding-left: 20px;
  padding-right: 20px;
}

@media screen and (max-width: 600px) {
    .container {
        padding-left: 12px;
        padding-right: 12px;
    }
}
</style>
