import BasicPage from "../components/basic-page-template";
import IDButton from "../components/identity-button";
import WCard from "../components/werefox-card";

export default function Home() {
  return (
    <BasicPage
      is_home="true"
      page_title="About A Werefox"
      card_title="Hi! I'm Alexis Werefox!"
    >
      <WCard>
        <div className="p-2 space-y-2">
          <div className="rounded-lg ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
            <p className="p-2 text-center text-md sm:text-lg text-werefox-blue-dark dark:text-werefox-blue">
              <p>Basic Info</p>
            </p>
          </div>
          <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="/contacts"
            />
            <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="/identities/gender"
            />
            <IDButton
              extraClasses=""
              imageObj={{
                src: "/emoji/speech_bubble_left.svg",
                alt: "",
              }}
              innerText="She/her"
              url="/identities/pronouns"
            />
            <IDButton
              extraClasses=""
              imageObj={{
                src: "/emoji/polyamory_flag.svg",
                alt: "Polyamory flag",
              }}
              innerText="Polyam"
              url="/identities/sexuality"
            />
            <IDButton
              extraClasses=""
              imageObj={{
                src: "/emoji/pansexual_flag.svg",
                alt: "Pansexual flag",
              }}
              innerText="Pansexual"
              url="/identities/sexuality"
            />
            <IDButton
              extraClasses=""
              imageObj={{
                src: "/emoji/lesbian_flag.svg",
                alt: "Lesbian flag",
              }}
              innerText="Lesbian"
              url="/identities/sexuality"
            />
            <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="/identities/neuro"
            />
            <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="/identities/fursona"
            />
          </div>
        </div>
      </WCard>
      <WCard>
        <div className="p-2 space-y-2">
          <div className="rounded-lg ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
            <p className="p-2 text-center text-md sm:text-lg text-werefox-blue-dark dark:text-werefox-blue">
              <p>Welcome to my little info site!</p>
            </p>
          </div>
          <div className="rounded-lg ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
            <p className="p-4 text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
              I'd describe myself as somewhere between a hot date and a hot
              mess. Just a witchy foxxo programmer trying to make it in the
              world tbh.
            </p>
            <p className="pl-4 pr-4 pb-4 text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
              Feel free to click/tap any of the neat buttons above this to learn
              more about my different aspects of personality.
            </p>
            <p className="pl-4 pr-4 pb-4 text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
              Down below, I've got some more neat little pages and useful info
              you can look at.
            </p>
            <p className="pl-4 pr-4 pb-4 text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
              Please do look around and enjoy your stay!~ 💙
            </p>
          </div>
        </div>
      </WCard>
      <WCard>
        <div className="p-2 space-y-2">
          <div className="rounded-lg ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
            <p className="p-2 text-center text-md sm:text-lg text-werefox-blue-dark dark:text-werefox-blue">
              Useful Pages! (hopefully!)
            </p>
          </div>
          <WCard
            isCardButton="true"
            extraClasses=""
            imageObj={{
              src: "/emoji/trans_heart.png",
              alt: "Transgender heart",
            }}
            innerText="HRT Tracker!"
            url="/hrt"
          />
          <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"
          />
        </div>
      </WCard>
    </BasicPage>
  );
}