---
import ContactForm from "@components/ContactForm.astro";
import Paragraph from "@components/Paragraph.astro";
import SectionTitle from "@components/SectionTitle.astro";
import TextLink from "@components/TextLink.astro";
import MainLayout from "@layouts/MainLayout.astro";
import { Icon } from "astro-icon/components";
---

<MainLayout title="Contact">
  <div class="w-full">
    <section id="contact" class="bg-primary dark:bg-gray-800">
      <div class="mx-auto max-w-4xl px-8 py-16 text-center">
        <SectionTitle class="text-white" lineColour="text-white"
          >Let's get in touch!</SectionTitle
        >
        <ContactForm />
      </div>
    </section>
    <section id="details" class="bg-white dark:bg-gray-950">
      <div class="mx-auto max-w-4xl px-8 py-16 text-center">
        <SectionTitle>Other ways to reach me</SectionTitle>
        <div class="grid grid-cols-1 text-lg md:grid-cols-2">
          <div class="col-span-1 flex flex-col items-center justify-center p-4">
            <Icon name="fa7-solid:at" class="text-4xl" />
            <TextLink href="mailto:nathan@nathancummins.com.au" class="mt-4"
              >nathan@nathancummins.com.au</TextLink
            >
          </div>
          <div class="col-span-1 flex flex-col items-center justify-center p-4">
            <Icon name="fa7-solid:envelope" class="text-4xl" />
            <Paragraph class="my-0 mt-4"
              >PO Box 2112 Regency Park SA 5942</Paragraph
            >
          </div>
        </div>
      </div>
    </section>
  </div>
</MainLayout>
