<script setup lang="ts">
import { useRoute } from 'vue-router'
import { useTheme, useCopy, goToSection } from '~/composables/useLanding'

definePageMeta({ layout: 'page' })

const t = useTheme()
const copy = useCopy()
const route = useRoute()
const c = computed(() => copy.value.pages.contact)

useHead({ title: () => `${copy.value.pages.contact.label} · dezky` })
</script>

<template>
  <LandingPageHeader :label="c.label" :title="c.title" :intro="c.intro" />

  <LandingContainer pad="clamp(56px, 8vw, 56px) clamp(20px, 5vw, 64px) clamp(80px, 12vw, 160px)">
    <div :style="{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 320px), 1fr))', gap: '24px', maxWidth: '760px' }">
      <a
        :href="`mailto:${c.email}`"
        :style="{ display: 'block', padding: '28px', border: `1px solid ${t.border}`, borderRadius: '4px', background: t.surface }"
      >
        <div :style="{ fontFamily: '\'JetBrains Mono\', monospace', fontSize: '11px', color: t.fgDim, letterSpacing: '0.08em', textTransform: 'uppercase' }">{{ c.emailLabel }}</div>
        <div :style="{ marginTop: '10px', fontFamily: '\'Inter Tight\', sans-serif', fontWeight: 600, fontSize: '20px', color: t.fg }">{{ c.email }}</div>
      </a>

      <div :style="{ padding: '28px', border: `1px solid ${t.border}`, borderRadius: '4px', background: t.surface }">
        <div :style="{ fontFamily: '\'JetBrains Mono\', monospace', fontSize: '11px', color: t.fgDim, letterSpacing: '0.08em', textTransform: 'uppercase' }">{{ c.addressLabel }}</div>
        <div :style="{ marginTop: '10px', fontFamily: '\'Inter\', sans-serif', fontSize: '15px', lineHeight: 1.6, color: t.fg }">
          <div>{{ copy.footer.legal.name }}</div>
          <div>{{ copy.footer.legal.addr }}</div>
          <div :style="{ marginTop: '6px', color: t.fgMuted }">{{ c.cvrLabel }}: {{ copy.footer.legal.cvr.replace('CVR ', '') }}</div>
        </div>
      </div>
    </div>

    <div :style="{ marginTop: '48px' }">
      <LandingBtn variant="primary" size="lg" @click="goToSection('#final-cta', route.path)">{{ copy.pages.ctaDemo }} →</LandingBtn>
    </div>
  </LandingContainer>
</template>
