import ArtLink from "./ArtLink";
import View from "./View";
import left from "@/public/content/logo_unicorn.png";
import right from "@/public/content/logo_lion.png";
import Image from "next/image";

const Contact = () => {
  return (
    <View
      bg_color="bg-neutral-800"
      txt_color="text-neutral-200"
      className="!min-h-0"
    >
      <div className="flex flex-col items-center">
        <div className="md:flex md:flex-row md:items-center md:gap-10">
          <div>
            <Image
              src={left}
              alt="Stately unicorn from Dr. Feely's coat of arms"
              className="hidden h-32 w-auto md:block"
            />
          </div>
          <div>
            <h1 className="my-5 text-5xl">Contact Dr. Feely</h1>
            <div className="text-center text-2xl">
              at{" "}
              <ArtLink
                className="hover:drop-shadow-light"
                href="mailto:rafeely@drfeely.com"
                divClasses="inline"
              >
                rafeely@drfeely.com
              </ArtLink>
            </div>
          </div>
          <div>
            <Image
              src={right}
              alt="Stately lion from Dr. Feely's coat of arms"
              className="hidden h-32 w-auto md:block"
            />
          </div>
        </div>
      </div>
    </View>
  );
};

export default Contact;