import BasicPage from "../../components/basic-page";
import WCard from "../../components/werefox-card";
import Image from "next/image";

export default function Contacts() {
  return (
    <BasicPage
      page_title="Where To Find Me"
      card_title={`"Do you have a [Social Media]?"`}
    >
      <WCard innerText="You can find me in quite a few places!">
        <div className="p-4 space-y-4">
          <p className="md:text-lg sm:text-md text-xs text-center text-werefox-blue-dark dark:text-werefox-blue">
            <a href="https://vulpine.club/@shadow8t4" target="_blank">
              <span className="animate-bounce relative inline-block w-6 h-6 align-middle">
                <Image
                  src="/emoji/mastodon-logo.png"
                  layout="fill"
                  objectFit="contain"
                  alt="Mastodon logo"
                />
              </span>
            </a>{" "}
            My public Mastodon{" "}
            <a
              className="animate-wiggle inline-flex transition hover:text-werefox-pink-dark dark:hover:text-werefox-pink"
              href="https://vulpine.club/@shadow8t4"
              target="_blank"
            >
              @shadow8t4@vulpine.club
            </a>
          </p>
          <p className="md:text-lg sm:text-md text-xs text-center text-werefox-blue-dark dark:text-werefox-blue">
            <a href="https://twitter.com/alexis_werefox" target="_blank">
              <span className="animate-bounce relative inline-block w-6 h-6 align-middle">
                <Image
                  src="/emoji/twitter-logo.png"
                  layout="fill"
                  objectFit="contain"
                  alt="Twitter logo"
                />
              </span>
            </a>{" "}
            My Twitter{" "}
            <a
              className="animate-wiggle inline-flex transition hover:text-werefox-pink-dark dark:hover:text-werefox-pink"
              href="https://twitter.com/alexis_werefox"
              target="_blank"
            >
              @alexis_werefox
            </a>
          </p>
          <p className="md:text-lg sm:text-md text-xs text-center text-werefox-blue-dark dark:text-werefox-blue">
            <a href="https://www.twitch.tv/alexis_werefox" target="_blank">
              <span className="animate-bounce relative inline-block w-6 h-6 align-middle">
                <Image
                  src="/emoji/twitch-logo.png"
                  layout="fill"
                  objectFit="contain"
                  alt="Twitch logo"
                />
              </span>
            </a>{" "}
            My Twitch{" "}
            <a
              className="animate-wiggle inline-flex transition hover:text-werefox-pink-dark dark:hover:text-werefox-pink"
              href="https://www.twitch.tv/alexis_werefox"
              target="_blank"
            >
              @Alexis_Werefox
            </a>
          </p>
          <p className="md:text-lg sm:text-md text-xs text-center text-werefox-blue-dark dark:text-werefox-blue">
            <a href="mailto:adh9694@gmail.com" target="">
              <span className="animate-bounce relative inline-block w-6 h-6 align-middle">
                <Image
                  src="/emoji/inbox.svg"
                  layout="fill"
                  objectFit="contain"
                  alt="Inbox emoji"
                />
              </span>
            </a>{" "}
            My e-mail{" "}
            <a
              className="animate-wiggle inline-flex transition hover:text-werefox-pink-dark dark:hover:text-werefox-pink"
              href="mailto:adh9694@gmail.com"
              target="_blank"
            >
              adh9694@gmail.com
            </a>
          </p>
        </div>
      </WCard>
    </BasicPage>
  );
}