<script setup lang="ts">
import TableHeader from '~/components/parts/TableHeader.vue';
import FixedLayout from '~/components/layouts/FixedLayout.vue';
import ContactLinks from '~/components/parts/ContactLinks.vue';
import { useSeo } from '~/composables/seo';

const { get, post } = useApi();
const { locale } = useI18n();

useSeo({
  title: 'Contact',
  description: 'Get in touch with Aran Roig. Reach out for collaborations, freelance projects, or just to say hello.',
  canonicalUrl: '/contact'
});

// WebPage structured data for contact page
useHead({
  script: [{
    type: 'application/ld+json',
    innerHTML: JSON.stringify({
      '@context': 'https://schema.org',
      '@type': 'WebPage',
      name: 'Contact Aran Roig',
      description: 'Get in touch with Aran Roig for collaborations, freelance projects, or inquiries.',
      url: 'https://aranroig.com/contact',
      inLanguage: ['en', 'es', 'ca']
    })
  }]
});


// Move useAsyncData to top level — NOT inside onMounted
const { data: markdown } = await useAsyncData(`fixed`, async () =>
 await queryCollection(`fixed`).path(`/fixed/${locale.value}/contact`).first()
 ,{watch: [locale]})
</script>

<template>
    <div class="no-sprite">
      <TableHeader></TableHeader>
    </div>

    <FixedLayout>
        <Container>
            <h1>{{ $t('pages.contact_heading') }}</h1>
            <div v-if="markdown" class="contact-intro">
                <ContentRenderer :value="markdown"></ContentRenderer>
            </div>
            <ContactLinks />
        </Container>
    </FixedLayout>
    <Footer></Footer>
</template>

<style lang="scss" scoped>
.contact-intro {
    margin: 12px 0 4px;
    font-size: 0.92rem;
    color: var(--color-text);
    opacity: 0.75;
    line-height: 1.6;
}

h1 {
    position: relative;
    margin-bottom: 8px;
}

@media screen and (max-width: 600px) {
    .contact-intro {
        font-size: 0.85rem;
        line-height: 1.5;
    }
}
</style>

<style lang="scss">
.no-sprite .undertable-wrapper {
  display: none;
}
</style>
