import Head from "next/head";
import Image from "next/image";
import WCard from "../../components/werefox-card";
import TCard from "../../components/testimonial-card";
import MS from "../../components/mutant-standard";

export default function HRT() {
  return (
    <div className="min-h-screen bg-werefox-grey-lighter dark:bg-werefox-grey-dark font-nerd">
      <Head>
        <title>Alexis Werefox HRT Tracker</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <div className="container space-y-4 mx-auto px-4 py-4">
        <WCard
          isCardButton="true"
          extraClasses=""
          imageObj={[
            { src: "/emoji/pixel_alexis.png", alt: "Pixel Alexis!" },
            { src: "/emoji/blue_heart.svg", alt: "Blue heart" },
          ]}
          innerText="Take me back home!"
          url="/"
        />
        <WCard isTitle="true">
          <h1 className="p-4 text-xl text-center text-werefox-blue-dark dark:text-werefox-blue">
            <span className="animate-bounce relative inline-block w-6 h-6 align-middle">
              {" "}
              <Image
                src="/emoji/pixel_alexis.png"
                layout="fill"
                objectFit="contain"
                alt="Pixel Alexis!"
              />{" "}
            </span>
            {"- "}
            Frequently Asked Questions!
          </h1>
        </WCard>
        <WCard>
          <p className="p-6 text-lg text-center text-werefox-pink-dark dark:text-werefox-pink">
            "So is Werefox like a speicies or...?"
          </p>
        </WCard>
        <TCard
          key=""
          src="/images/alexis_heart.png"
          alt="Alexis"
          url="https://vulpine.club/@shadow8t4"
          user="Shadow8t4"
          innerText="That's a good question! No, my fursona's full name is Alexis Werefox, so Werefox is just a last name. I am just a fox!"
        />
        <WCard>
          <p className="p-6 text-lg text-center text-werefox-pink-dark dark:text-werefox-pink">
            "How can you be Pansexual and a Lesbian?"
          </p>
        </WCard>
        <TCard
          key=""
          src="/images/alexis_wink.png"
          alt="Alexis"
          url="https://vulpine.club/@shadow8t4"
          user="Shadow8t4"
          innerText={`I believe I've been told the proper term is "sapphic", it just means I *am* Pansexual, but I prefer those who identify more femme.`}
        />
        <WCard>
          <p className="p-6 text-lg text-center text-werefox-pink-dark dark:text-werefox-pink">
            "How do I get more Xenia stickers?"
          </p>
        </WCard>
        <TCard
          key=""
          src="/images/alexis_annoyed.png"
          alt="Alexis"
          url="https://vulpine.club/@shadow8t4"
          user="Shadow8t4"
          innerText={`Yeah, about that. So, I've made a few posts aobut this, but when I first started giving those out, I was in a good financial position, among other things. Now I'm not! I will get to it when I do.`}
        />
        <WCard>
          <p className="p-6 text-lg text-center text-werefox-pink-dark dark:text-werefox-pink">
            "What do you do?"
          </p>
        </WCard>
        <TCard
          key=""
          src="/images/alexis_shrug.png"
          alt="Alexis"
          url="https://vulpine.club/@shadow8t4"
          user="Shadow8t4"
          innerText="Something! I mainly focus on maintaining the services I run at the moment, Beat Saber streaming, myself and my transition. I could use some financial support, if you're feeling up to it and can afford it!"
        />
        <WCard
          isCardButton="true"
          extraClasses=""
          imageObj={[
            { src: "/emoji/pixel_alexis.png", alt: "Pixel Alexis!" },
            { src: "/emoji/blue_heart.svg", alt: "Blue heart" },
          ]}
          innerText="Take me back home!"
          url="/"
        />
        <MS />
      </div>
    </div>
  );
}
