<script setup lang="ts">
import { formatDate } from "@vueuse/core";

definePageMeta({
  layout: "content",
});

const { path } = useRoute();

const { data: article } = useAsyncData(path, async () => {
  const article = await queryCollection("articles").path(path).first();

  return article;
});
</script>

<template>
  <UContainer
    v-motion-fade
    class="flex flex-col gap-3 prose max-w-3xl dark:prose-invert p-4 sm:p-6 lg:p-8"
    as="article"
  >
    <ULink
      class="text-sm text-gray-500 flex flex-row gap-1 items-center group w-fit"
      to="/articles"
    >
      <UIcon
        class="opacity-100 group-hover:-translate-x-1 transition-transform"
        name="i-heroicons-arrow-left"
      />
      Back to articles
    </ULink>
    <div class="text-sm text-slate-500 mt-6">
      {{ formatDate(new Date(article.date), "Do of MMMM YYYY") }}
    </div>
    <h1 class="text-3xl md:text-4xl font-bold">{{ article.title }}</h1>
  </UContainer>

  <UContainer
    class="hidden md:block max-w-3xl p-4 sm:p-6 lg:p-8"
    as="figure"
    v-if="article.coverImage?.url"
    v-motion-fade
    :delay="500"
  >
    <NuxtImg
      placeholder
      :src="article.coverImage?.url ?? ''"
      :alt="article.title"
      height="1000"
      width="1700"
      class="rounded-lg"
    />
    <ULink
      v-if="article.coverImage.authorUrl"
      :to="article.coverImage.authorUrl"
      target="_blank"
      class="text-xs text-slate-500 italic font-serif hover:underline p-4 sm:p-6 lg:p-8"
    >
      Photo by {{ article.coverImage.author }}
    </ULink>
  </UContainer>

  <UContainer
    v-motion-fade
    :delay="500"
    class="flex flex-col gap-3 prose dark:prose-invert !pt-0 max-w-3xl p-4 sm:p-6 lg:p-8"
    as="article"
  >
    <ContentRenderer :value="article" prose />
  </UContainer>

  <UContainer
    v-motion-fade
    :delay="500"
    class="flex flex-col gap-3 prose dark:prose-invert !pt-0 max-w-3xl p-4 sm:p-6 lg:p-8"
  >
    <hr class="border border-slate-100" />
  </UContainer>

  <UContainer
    v-motion-fade
    :delay="500"
    class="flex flex-col gap-5 p-4 sm:p-6 lg:p-8 max-w-3xl"
    as="section"
  >
    <h2 class="md:text-xl text-lg font-semibold">
      <ULink
        class="text-blue-500 dark:text-blue-300 hover:underline hover:underline-offset-4"
        to="mailto:mariosant@sent.com"
        >Marios Antonoudiou</ULink
      >, AI product engineer.<br />
      Building AI-powered products that feel simple, useful, and ready for real
      users.
    </h2>
    <p class="text-gray-800 dark:text-gray-200">
      I design and ship
      <span class="font-semibold">AI-enabled product experiences</span> across
      frontend architecture, interaction design, and product workflows. My focus
      is turning complex systems, data, and model capabilities into software
      people can actually
      <span class="font-semibold">understand, trust, and use</span>.
    </p>

    <div class="flex gap-4 overflow-x-auto">
      <UButton
        size="xl"
        color="primary"
        icon="mynaui:calendar"
        target="_blank"
        to="https://cal.com/mariosant/30min"
      >
        Arrange a call
      </UButton>

      <UButton
        size="xl"
        color="neutral"
        icon="mynaui:envelope"
        variant="soft"
        target="_blank"
        to="mailto:mariosant@sent.com"
      >
        Send a message
      </UButton>
    </div>
  </UContainer>

  <Footer v-motion-fade :delay="500" />
</template>

<style scoped>
article.prose {
  h2 {
    font-weight: bold !important;

    a {
      font-weight: bold !important;
    }
  }
}
</style>
s
