---
import { Icon } from "astro-icon";
import Layout from "@layouts/Layout.astro";
import Container from "@components/container.astro";
import Sectionhead from "@components/sectionhead.astro";
import Button from "@components/ui/button.astro";
import Contactform from "@components/contactform.astro";
---

<Layout title="Contact">
  <Container>
    <Sectionhead>
      <Fragment slot="title">Contact</Fragment>
      <Fragment slot="desc">We are a here to help.</Fragment>
    </Sectionhead>

    <div class="grid md:grid-cols-2 gap-10 mx-auto max-w-4xl mt-16">
      <div>
        <h2 class="font-medium text-2xl text-gray-800">Contact Astroship</h2>
        <p class="text-lg leading-relaxed text-slate-500 mt-3">
          Have something to say? We are here to help. Fill up the form or send
          email or call phone.
        </p>
        <div class="mt-5">
          <div class="flex items-center mt-2 space-x-2 text-gray-600">
            <Icon class="text-gray-400 w-4 h-4" name="uil:map-marker" />
            <span>1734 Sanfransico, CA 93063</span>
          </div><div class="flex items-center mt-2 space-x-2 text-gray-600">
            <Icon class="text-gray-400 w-4 h-4" name="uil:envelope" /><a
              href="mailto:hello@astroshipstarter.com"
              >hello@astroshipstarter.com</a
            >
          </div><div class="flex items-center mt-2 space-x-2 text-gray-600">
            <Icon class="text-gray-400 w-4 h-4" name="uil:phone" /><a
              href="tel:+1 (987) 4587 899">+1 (987) 4587 899</a
            >
          </div>
        </div>
      </div>
      <div>
        <Contactform />
      </div>
    </div>
  </Container>
</Layout>