<template>
  <div class="min-h-screen flex flex-col">
    <!-- Default navbar — reads appConfig.xMarketing.header (logo, nav.links,
         nav.buttons). Opt out with xMarketing.header.active: false or by
         shipping your own app/app.vue. -->
    <XHeaderNav v-if="headerActive" />

    <!-- Main Content -->
    <main class="flex-grow">
      <NuxtLoadingIndicator />
      <UApp>
        <NuxtLayout>
          <NuxtPage />
        </NuxtLayout>
      </UApp>
    </main>

    <!-- Default footer — reads appConfig.xMarketing.footer (logo, body,
         socials, columns, bg). Shows the newsletter form when
         xMarketing.config.emailMarketingNewsletters.organizationId is set.
         Opt out with xMarketing.footer.active: false. -->
    <XFooter v-if="footerActive" />

    <!-- Cookie consent banner — auto-shows on first visit and fires
         any tracking scripts configured in app.config.xMarketing.tracking
         once the visitor accepts. Opt out with xMarketing.consent.active: false. -->
    <XMarkPrivacyCookieConsent
      v-if="consentActive"
      policy-url="/cookies"
      privacy-url="/privacy"
    />
  </div>
</template>
<script setup>
import { onMounted } from "vue";
import markerSDK from "@marker.io/browser";

const appConfig = useAppConfig();
const xMarketing = appConfig?.xMarketing;

const headerActive = computed(() => xMarketing?.header?.active !== false);
const footerActive = computed(() => xMarketing?.footer?.active !== false);
const consentActive = computed(() => xMarketing?.consent?.active !== false);

// xMarketing.name/url feed the default SEO wiring: when `name` is set the
// title template becomes "<page> | <name>" and og:site_name is emitted;
// the shipped home page also reads `url` for og:url.
const siteName = computed(() => xMarketing?.name);

useSeoMeta({
  titleTemplate: (title) =>
    title ? (siteName.value ? `${title} | ${siteName.value}` : title) : (siteName.value ?? ""),
  ogSiteName: siteName,
});

// Marker.io widget — only loads when a project ID is configured.
if (xMarketing?.config?.markerProjectId) {
  onMounted(() => {
    markerSDK.loadWidget({
      project: xMarketing?.config?.markerProjectId,
    });
  });
}
</script>
