<script setup lang="ts">
// Dezky marketing landing page. Ported from the Claude Design handoff
// (Landing Page.html → landing-app.jsx + landing-sections.jsx). Light theme,
// Danish default, hero variant A — the production defaults the user landed on.
// Section order matches the design exactly.
import { onMounted, nextTick } from 'vue'
import { useRoute } from 'vue-router'
import { useTheme, useCopy, useLang, scrollToAnchor } from '~/composables/useLanding'

const t = useTheme()
const copy = useCopy()
const lang = useLang()
const route = useRoute()

const description = computed(() => copy.value.hero.sub)

// Arriving via a section link from a sub-page (e.g. "/#suite") lands here with
// a hash — scroll to it once the page has painted.
onMounted(() => {
  if (route.hash) nextTick(() => setTimeout(() => scrollToAnchor(route.hash), 60))
})

useHead({
  title: () => (lang.value === 'da' ? 'dezky · suveræn produktivitet' : 'dezky · sovereign productivity'),
  meta: [
    { name: 'description', content: description },
  ],
})
</script>

<template>
  <div :style="{ background: t.bg, color: t.fg, minHeight: '100vh' }">
    <LandingNav />
    <LandingHero />
    <LandingProblem />
    <LandingSuite />
    <LandingHowItWorks />
    <LandingSovereignty />
    <LandingCompare />
    <LandingWhitelabel />
    <LandingStack />
    <LandingPricing />
    <LandingFaq />
    <LandingFinalCta />
    <LandingFooter />
  </div>
</template>
