import Head from "next/head";
import Image from "next/image";

export default function Home() {
  return (
    <div className="min-h-screen font-nerd overflow-hidden">
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <div className="fixed w-2k h-2k z-0 overflow-hidden animate-scroll">
        <Image src="/images/4x16_9_logo_silhouette_bg.png" layout="fill" />
      </div>
      <div className="p-4 flex flex-row space-x-6 text-center text-xl text-alice-werefox-red-light w-1080p h-1080p z-10">
        <div className="flex flex-col flex-grow space-y-6 z-10">
          <div className="p-2 flex-grow rounded-sm ring-4 ring-alice-werefox-red bg-alice-werefox-grey-dark">
            <p>Donation and stuff</p>
          </div>
          <div className="flex flex-col space-y-6 h-900p">
            <div className="p-2 flex-grow rounded-sm ring-4 ring-alice-werefox-red bg-alice-werefox-grey-dark">
              {/* <p>this is the chat</p> */}
            </div>
            <div
              className="rounded-sm ring-4 ring-alice-werefox-red bg-alice-werefox-grey-dark bg-opacity-60 aspect-video overflow-hidden relative"
              style={{
                height: "148px",
                width: "264px",
              }}
            >
              <div className="opacity-100">
                <div className=" top-0 left-0">
                  <Image
                    src="/images/skye_annoyed.png"
                    width="264px"
                    height="148px"
                    className="animate-topslide1"
                  ></Image>
                </div>
                <div className="absolute top-0 left-0">
                  <Image
                    src="/images/skye_coffee.png"
                    width="264px"
                    height="148px"
                    className="animate-topslide2"
                  ></Image>
                </div>
                <div className="absolute top-0 left-0">
                  <Image
                    src="/images/skye_heart.png"
                    width="264px"
                    height="148px"
                    className="animate-topslide3"
                  ></Image>
                </div>
                <div className="absolute top-0 left-0">
                  <Image
                    src="/images/skye_shrug.png"
                    width="264px"
                    height="148px"
                    className="animate-topslide4"
                  ></Image>
                </div>
                <div className="absolute top-0 left-0">
                  <Image
                    src="/images/skye_sunglasses.png"
                    width="264px"
                    height="148px"
                    className="animate-topslide5"
                  ></Image>
                </div>
                <div className="absolute top-0 left-0">
                  <Image
                    src="/images/skye_wink.png"
                    width="264px"
                    height="148px"
                    className="animate-topslide6"
                  ></Image>
                </div>
                <div className="absolute top-0 left-0">
                  <Image
                    src="/images/skye_witch.jpg"
                    width="264px"
                    height="148px"
                    className="animate-topslide7"
                  ></Image>
                </div>
                <div className="absolute top-0 left-0">
                  <Image
                    src="/images/fucker_in_charge.jpeg"
                    width="264px"
                    height="148px"
                    className="animate-topslide8"
                  ></Image>
                </div>
                <div className="absolute top-0 left-0">
                  <Image
                    src="/images/ada_werefox_temp.jpeg"
                    width="264px"
                    height="148px"
                    className="animate-topslide9"
                  ></Image>
                </div>
                <div className="absolute top-0 left-0">
                  <Image
                    src="/images/ref_sheet_crop.jpg"
                    width="264px"
                    height="148px"
                    className="animate-topslide10"
                  ></Image>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="flex flex-col space-y-6 z-10">
          <div className="p-2 flex-grow rounded-sm ring-4 ring-alice-werefox-red bg-alice-werefox-grey-dark">
            <p>
              Oh hi I'm writing things and they're displaying on the browser
              preview
            </p>
          </div>
          <div
            className="p-2 rounded-sm ring-4 ring-alice-werefox-red w-900p h-900p"
            style={{ "background-color": "magenta" }}
          >
            <p className="p-4 text-8xl bg-alice-werefox-grey-darker bg-opacity-0"></p>
          </div>
        </div>
      </div>
    </div>
  );
}
