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

const { get, post } = api();
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>Contact Aran Roig</h1>
            <ContentRenderer v-if="markdown" :value="markdown"></ContentRenderer>
        </Container>
    </FixedLayout>
    <Footer></Footer>
</template>

<style lang="scss" scoped>
h2 {
    padding-left: 20px;
    margin-left: 0;
}

p {
    padding-left: 30px;
    margin-left: 0;
}

.two-columns {
    display: flex;
    width: 100%;
}

@media screen and (max-width: 600px) {
    h2 {
        padding-left: 12px;
    }

    p {
        padding-left: 18px;
    }
}
</style>

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