---
import Layout from "@layouts/Layout.astro";
import { SITE, CV } from "@consts";
import { Image } from "astro:assets";
import { Icon } from "astro-icon/components";
import Link from "@components/Link.astro";
import icon from "public/assets/icon.png";
---

<Layout title={CV.TITLE} description={CV.DESCRIPTION}>
  <div class="animate-reveal flex items-center justify-between opacity-0">
    <div class="flex-1 space-y-1.5">
      <h1
        class="animate-reveal text-start text-3xl font-semibold break-words opacity-0"
      >
        <span class="text-secondary">{CV.TITLE}</span><span
          class="text-tertiary ml-2">{CV.DESCRIPTION}</span
        >
      </h1>
      <p class="text-secondary/70 max-w-md text-pretty">Digital designer.</p><p
        class="text-secondary/70 max-w-md items-center text-sm text-pretty"
      >
        <Link
          class="inline-flex gap-x-1.5 align-baseline leading-none hover:underline"
          href="https://www.google.com/maps/place/Devon"
        >
          <Icon name="mdi:earth" class="h-3 w-3" />
          Devon, United Kingdom, GMT
        </Link>
      </p><div class="text-secondary/70 flex gap-x-1 pt-1 text-sm print:hidden">
        <a
          href={`mailto:${SITE.EMAIL}`}
          class="bg-button text-secondary hover:bg-button-active flex w-fit flex-row items-center gap-1 justify-self-center rounded-full p-2 text-center text-sm text-nowrap capitalize transition-colors duration-300"
        >
          <Icon name="mdi:email" title="Email" class="h-4 w-4" />
        </a>
        <Link
          href="/"
          class="bg-button text-secondary hover:bg-button-active flex w-fit flex-row items-center gap-1 justify-self-center rounded-full p-2 text-center text-sm text-nowrap capitalize transition-colors duration-300"
        >
          <Icon name="mdi:link-variant" title="Website" class="h-4 w-4" />
        </Link>

        <Link
          href="https://code.troylusty.com"
          class="bg-button text-secondary hover:bg-button-active flex w-fit flex-row items-center gap-1 justify-self-center rounded-full p-2 text-center text-sm text-nowrap capitalize transition-colors duration-300"
        >
          <Icon name="mdi:git" title="Git" class="h-4 w-4" />
        </Link>
        <Link
          href="https://store.steampowered.com/developer/troy"
          class="bg-button text-secondary hover:bg-button-active flex w-fit flex-row items-center gap-1 justify-self-center rounded-full p-2 text-center text-sm text-nowrap capitalize transition-colors duration-300"
        >
          <Icon name="mdi:steam" title="Steamworks" class="h-4 w-4" />
        </Link>
      </div>
      <p
        class="text-secondary/70 hidden max-w-md items-center text-sm text-pretty print:flex"
      >
        <Link
          class="inline-flex gap-x-1.5 align-baseline leading-none hover:underline"
          href={`mailto:${SITE.EMAIL}`}
        >
          <Icon name="mdi:email" class="h-3 w-3" />
          {SITE.EMAIL}
        </Link>
      </p>
    </div><span
      class="relative flex h-28 w-28 shrink-0 overflow-hidden rounded-xl"
    >
      <Image
        src={icon}
        alt="Troy Lusty"
        class="aspect-square h-full w-full"
        loading="eager"
      />
    </span>
  </div>
  <div
    class="animate-reveal mx-auto max-w-full opacity-0 [animation-delay:0.2s]"
  >
    <div
      class="prose prose-neutral dark:prose-invert prose-sm prose-a:hover:no-underline prose-hr:my-4 prose-li:prose-p:my-0 prose-p:text-secondary/70 prose-li:text-secondary/70 max-w-full"
    >
      <slot />
    </div>
  </div>
</Layout>