---
import { Image } from "astro:assets";
import {
  Content as AboutContent,
  components as aboutComponents
} from "../assets/bios/about.mdx";
import aboutImage from "../assets/img/about.jpg";
import Link from "../components/Link.astro";
import Paragraph from "../components/Paragraph.astro";
import SectionTitle from "../components/SectionTitle.astro";
import MainLayout from "../layouts/MainLayout.astro";
---

<MainLayout title="About">
  <div class="w-full">
    <section id="about" class="bg-white dark:bg-gray-950">
      <div class="mx-auto max-w-4xl px-8 py-16 text-justify sm:text-center">
        <SectionTitle>About</SectionTitle>
        <AboutContent
          components={{ ...aboutComponents, p: Paragraph, a: Link }}
        />
        <Image
          src={aboutImage}
          alt="A photo of Nathan conducting the Woodville Concert Band"
          class="mx-auto mt-8 size-96 rounded-full object-cover drop-shadow-lg/75 transition ease-in-out hover:scale-150 hover:shadow-xl/50"
          transition:name="aboutImage"
        />
        <a
          href="/contact/"
          class="bg-primary text-md font-header hover:text-primary repeat hover:ring-primary mx-auto mt-8 inline-block rounded object-center px-6 py-3 font-light text-white uppercase drop-shadow-lg/75 transition hover:bg-white hover:ring-2"
        >
          Get in touch!
        </a>
      </div>
    </section>
  </div>
</MainLayout>