import Head from "next/head";
import Image from "next/image";
import BasicPage from "../components/basic-page-template";
import IDButton from "../components/identity-button";
import WCard from "../components/werefox-card";
import MS from "../components/mutant-standard";

export default function Home() {
  return (
    <BasicPage
      is_home="true"
      page_title="About A Werefox"
      card_title="Hi! I'm Alexis Werefox!"
    >
      <WCard>
        <div className="grid xl:grid-rows-2 xl:grid-cols-5 sm:grid-rows-3 sm:grid-cols-3 grid-rows-9 grid-cols-1 gap-2">
          <IDButton
            extraClasses=""
            imageObj={{ src: "/emoji/18_plus.svg", alt: "Over 18" }}
            innerText="26"
            url=""
          />
          <IDButton
            extraClasses="xl:pt-1 xl:align-text-bottom xl:text-sm xl:min-h-full"
            imageObj={[
              {
                src: "/emoji/transgender_flag.svg",
                alt: "Transgender flag",
              },
              {
                src: "/emoji/female_symbol.svg",
                alt: "Female symbol",
              },
            ]}
            innerText="Trans-femme"
            url="https://trans.wikia.org/wiki/Transfeminine"
          />
          <IDButton
            extraClasses=""
            imageObj={{
              src: "/emoji/speech_bubble_left.svg",
              alt: "",
            }}
            innerText="She/her"
            url="https://pronouns.me/she"
          />
          <IDButton
            extraClasses=""
            imageObj={{
              src: "/emoji/polyamory_flag.svg",
              alt: "Polyamory flag",
            }}
            innerText="Polyam"
            url="https://lgbta.wikia.org/wiki/Polyamorous"
          />
          <IDButton
            extraClasses=""
            imageObj={{
              src: "/emoji/pansexual_flag.svg",
              alt: "Pansexual flag",
            }}
            innerText="Pansexual"
            url="https://lgbta.wikia.org/wiki/Pansexual"
          />
          <IDButton
            extraClasses=""
            imageObj={{
              src: "/emoji/lesbian_flag.svg",
              alt: "Lesbian flag",
            }}
            innerText="Lesbian"
            url="https://lgbta.wikia.org/wiki/Lesbian"
          />
          <IDButton
            extraClasses=""
            imageObj={{
              src: "/emoji/blue_heart.svg",
              alt: "Blue heart",
            }}
            innerText="Single"
            url="/identities/partners"
          />
          <IDButton
            extraClasses=""
            imageObj={{
              src: "/emoji/neurodiversity.svg",
              alt: "Neurodiversity symbol",
            }}
            innerText="ADHD"
            url="https://en.wikipedia.org/wiki/Adult_attention_deficit_hyperactivity_disorder"
          />
          <IDButton
            extraClasses="xl:pt-1 xl:align-text-bottom xl:text-sm xl:min-h-full"
            imageObj={[
              {
                src: "/emoji/fox.svg",
                alt: "Fox",
              },
              {
                src: "/emoji/magic_wand.svg",
                alt: "Magic wand",
              },
            ]}
            innerText="Fox witch"
            url=""
          />
        </div>
      </WCard>
      <WCard
        isCardButton="true"
        extraClasses=""
        imageObj={{
          src: "/emoji/trans_heart.png",
          alt: "Transgender heart",
        }}
        innerText="HRT Tracker!"
        url="/hrt"
      />
      <WCard>
        <p className="p-6 text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
          Somewhere between a hot date and a hot mess.
          <br />
          Just a witchy foxxo programmer trying to make it in the world tbh.
        </p>
      </WCard>
      <WCard
        isCardButton="true"
        extraClasses=""
        imageObj={{
          src: "/emoji/awoo.svg",
          alt: "Testimonials",
        }}
        innerText="See Testimonials!"
        url="/testimonials"
      />
      <WCard
        isCardButton="true"
        extraClasses=""
        imageObj={{
          src: "/emoji/red_question_mark.svg",
          alt: "Frequently Asked Question",
        }}
        innerText="FAQ"
        url="/faq"
      />
    </BasicPage>
  );
}