<script setup>
import { computed } from "vue";
import { appBranding } from "../composables/useAppSettings.js";

const headerLogo = computed(() => appBranding.header || appBranding.sidebar);
</script>

<template>
  <main
    class="min-h-screen bg-surface-0 text-surface-900 dark:bg-surface-950 dark:text-surface-0"
  >
    <div class="mx-auto flex min-h-screen w-full max-w-5xl flex-col px-6 py-10">
      <header class="mb-10 flex items-center gap-4">
        <img
          v-if="headerLogo"
          :src="headerLogo"
          alt="Brand logo"
          class="h-10 w-auto object-contain"
        />
      </header>

      <section class="my-auto flex flex-col gap-4">
        <h1 class="text-3xl font-semibold tracking-tight sm:text-4xl">
          Welcome
        </h1>
        <p class="max-w-2xl text-base text-surface-600 dark:text-surface-300">
          This public homepage is served by the customer project and mounted via
          the shared Maestro core helper. Replace this component or provide your
          own implementation per customer.
        </p>
      </section>
    </div>
  </main>
</template>
