import type { Metadata } from "next";
import { Button, Heading, HStack, Link, Text, VStack } from "@chakra-ui/react";
import newLogo from "../../public/images/logo/new-logo.png";
import Image from "next/image";

export const metadata: Metadata = {
  title: "Werwolf Kid Creations Website",
  description:
    "The LCM website and eShop has been temporarily discontinued due to various external factors that interfered with my ability to focus and work on my creative passions. Along with some legal challenges that I hope to get sorted soon. This website going to serve as a bio, place to find social links, host art of Lucid, and embeds from Gumroad for the 3D textures. I hope to relaunch the eShop on this domain in the future as well."
};

const colorScheme = {
  primary: "cyan",
  secondary: "cyan.600",
  bg: "teal.950",
  button: "#5bbdbc",
  buttonText: "gray.950"
};

const socialSubdomain = "https://social.werewolfkid.monster/";

export default function Home() {
  return (
    <VStack
      w="100vw"
      justifyContent="center"
      alignItems="center"
      spaceY={12}
      pt="5vh"
      pb="20vh"
      bg={colorScheme.bg}
    >
      <VStack spaceY={2}>
        <Image height={250} src={newLogo} alt="New LCM logo" />
        <Heading
          lineHeight="1"
          w="80vw"
          as="h1"
          color={colorScheme.primary}
          fontSize="4rem"
          textAlign="center"
        >
          {"Werewolf Kid Creations"}
        </Heading>
        <Heading
          lineHeight="1"
          w="80vw"
          as="h2"
          color={colorScheme.secondary}
          fontSize="2rem"
          textAlign="center"
        >
          {"Formerly Lucid Creations Media"}
        </Heading>
      </VStack>

      <VStack w="80vw" spaceY={2}>
        <Text w="100%" textAlign="left" fontSize="lg">
          {"The WKC eShop has been discontinued until further notice."}
        </Text>
        <Text w="100%" textAlign="left" fontSize="lg">
          {
            "Over the years there have been many external factors that interfered with my ability to dedicate time and find motivation to work on my creative passions. This includes erotica, streaming, hypno files, and more. It has also interfered with my ability to learn new skills such as music creation and digital art."
          }
        </Text>
        <Text w="100%" textAlign="left" fontSize="lg">
          {
            "In 2024 I faced a layoff from my software engineering job and haven't been able to get back into my field since. Since then I couldn't afford the costs of hosting the old website on its current platform. The eShop generated no sales which led me to make the difficult decision to shut the eShop down for now."
          }
        </Text>
        <Text w="100%" textAlign="left" fontSize="lg">
          {
            'Another contributing factor was the fear of losing access to another payment processor. LCM (WKC) was banned from Square with no reason provided. It was probably because of "adult material". Not to mention, with the stupid "think of the kid" stuff making rounds again, my state made its own ID check law for adult websites. I couldn\'t catch a break. I had no way to do that since I was already struggle to pay for hosting at the time. So I decided it was a good time to take a break from that endeavor.'
          }
        </Text>
        <Text w="100%" textAlign="left" fontSize="lg">
          {
            "The last thing was a chronic low to medium level depression that I could never fully shake. It turned out to be undiagnosed gender dysphoria. I came out as transgender in November 2025 and have been finding ways to manage the dysphoria. Not all the depression is gone. There are still many things that impact my mood and bring me to such low points. I am just happy that I am no longer dealing with that chronic depression that consistently impacted my motivation for my hobbies and passion projects."
          }
        </Text>
        <Text w="100%" textAlign="left" fontSize="lg">
          {
            'I also took that opportunity to rebrand the company to align more with how I feel. I was testing out a new base/default form for Lucid that more aligned with my therotype. I really started enjoying being called wolf/werewolf. So the decision was made to rebrand to "Werewolf Kid Creations". "Lucid Creations Media" could have still worked for this new form, but I felt it was time to make a new chapter in my life.'
          }
        </Text>
        <Text w="100%" textAlign="left" fontSize="lg">
          {
            "There is currently no time frame on when the eShop will be worked on or revived. As of the beginning of 2026 I have been debating going to college for Cybersecurity. I am leaning towards going which would make it the top priority above everything else. That would take the eShop/website completely off the priority list."
          }
        </Text>
        <Text w="100%" textAlign="left" fontSize="lg">
          {
            "I plan to keep this static page as up to date and relevant as I can. I also want to make and release a few more 3D textures before starting school and also migrating that from Gumroad to Jinxxy. I have started developing/learning 2d art skills through one of my alters. Look for her Blue Sky link bellow. She will likely be making art while we go to college. It is not likely that we will do any commissions while attending college though. Just something we wanted to provide to the fandom when we can."
          }
        </Text>
      </VStack>

      <VStack spaceY={6} w="80vw">
        <Heading
          as="h3"
          color={colorScheme.primary}
          fontSize="2.5rem"
          textAlign="center"
          lineHeight="1"
        >
          {"VRChat Avatar Textures"}
        </Heading>

        <HStack gap="6" wrap="wrap" justifyContent="center">
          <VStack gap={1} w="auto" h="auto">
            <Link
              target="_blank"
              color={colorScheme.buttonText}
              href={`${socialSubdomain}gumroad`}
            >
              <Button
                variant="solid"
                bgColor={colorScheme.button}
                fontSize="xl"
              >
                {"Gumroad"}
              </Button>
            </Link>
            <Text fontSize="sm" color="whiteAlpha.800">
              {"To Be Discontinued"}
            </Text>
          </VStack>
          <VStack gap={1} w="auto" h="auto">
            <Link
              target="_blank"
              color={colorScheme.buttonText}
              href={`https://jinxxy.com/werewolfkid/products?service=all`}
            >
              <Button
                variant="solid"
                bgColor={colorScheme.button}
                fontSize="xl"
              >
                {"Jinxxy"}
              </Button>
            </Link>
            <Text fontSize="sm" color="whiteAlpha.800">
              {"Work in Progress"}
            </Text>
          </VStack>
        </HStack>

        <Heading
          as="h3"
          color={colorScheme.primary}
          fontSize="2.5rem"
          textAlign="center"
          lineHeight="1"
        >
          {"The Cove (WKC Communities)"}
        </Heading>

        <HStack
          gap="6"
          wrap="wrap"
          justifyContent="center"
          alignItems="flex-start"
        >
          <Link
            target="_blank"
            color={colorScheme.buttonText}
            href="https://community.werewolfkid.monster/"
          >
            <Button variant="solid" bgColor={colorScheme.button} fontSize="xl">
              {"The Cove"}
            </Button>
          </Link>
          <Link
            target="_blank"
            color={colorScheme.buttonText}
            href="https://vrchat.com/home/group/grp_781bbe4b-51ec-4025-a14f-cf23ced90507"
          >
            <Button variant="solid" bgColor={colorScheme.button} fontSize="xl">
              {"Dreamy Drove"}
            </Button>
          </Link>
          <Link
            target="_blank"
            color={colorScheme.buttonText}
            href={`${socialSubdomain}discord`}
          >
            <Button variant="solid" bgColor={colorScheme.button} fontSize="xl">
              {"Discord Server"}
            </Button>
          </Link>
          <VStack gap={1} w="auto" h="auto">
            <Link
              target="_blank"
              color={colorScheme.buttonText}
              // href={`https://jinxxy.com/werewolfkid/products?service=all`}
            >
              <Button
                _hover={{ cursor: "disabled" }}
                variant="solid"
                bgColor="cyan.600"
                // bgColor={colorScheme.button}
                fontSize="xl"
              >
                {"Discord Alternative"}
              </Button>
            </Link>
            <Text fontSize="sm" color="whiteAlpha.800">
              {"Coming Soon"}
            </Text>
          </VStack>
        </HStack>

        <Heading
          as="h3"
          color={colorScheme.primary}
          fontSize="2.5rem"
          textAlign="center"
          lineHeight="1"
        >
          {"Lucid's Socials"}
        </Heading>

        <HStack gap="6" wrap="wrap" justifyContent="center">
          <Link
            target="_blank"
            color={colorScheme.buttonText}
            href={`${socialSubdomain}bsky`}
          >
            <Button variant="solid" bgColor={colorScheme.button} fontSize="xl">
              {"Bsky"}
            </Button>
          </Link>
          <Link
            target="_blank"
            color={colorScheme.buttonText}
            href={`${socialSubdomain}fa`}
          >
            <Button variant="solid" bgColor={colorScheme.button} fontSize="xl">
              {"FurAffinity"}
            </Button>
          </Link>
        </HStack>

        <Heading
          as="h3"
          color={colorScheme.primary}
          fontSize="2.5rem"
          textAlign="center"
          lineHeight="1"
        >
          {"VTubing"}
        </Heading>

        <HStack gap="6" wrap="wrap" justifyContent="center">
          <Link
            target="_blank"
            color={colorScheme.buttonText}
            href={`${socialSubdomain}twitch`}
          >
            <Button variant="solid" bgColor={colorScheme.button} fontSize="xl">
              {"Twitch"}
            </Button>
          </Link>
          <Link
            target="_blank"
            color={colorScheme.buttonText}
            href={`${socialSubdomain}yt-vods`}
          >
            <Button variant="solid" bgColor={colorScheme.button} fontSize="xl">
              {"YouTube VODs"}
            </Button>
          </Link>
          <Link
            target="_blank"
            color={colorScheme.buttonText}
            href={`${socialSubdomain}yt-archives`}
          >
            <Button variant="solid" bgColor={colorScheme.button} fontSize="xl">
              {"YouTube Archives"}
            </Button>
          </Link>
        </HStack>

        <Heading
          as="h3"
          color={colorScheme.primary}
          fontSize="2.5rem"
          textAlign="center"
          lineHeight="1"
        >
          {"Ty's Stuff"}
        </Heading>

        <HStack gap="6" wrap="wrap" justifyContent="center">
          <Link
            target="_blank"
            color={colorScheme.buttonText}
            href={`https://tythetyke.werewolfkid.monster`}
          >
            <Button variant="solid" bgColor={colorScheme.button} fontSize="xl">
              {"Ty's Blue Sky"}
            </Button>
          </Link>
          <Link
            target="_blank"
            color={colorScheme.buttonText}
            href={`https://tythetyke.werewolfkid.monster/telegram`}
          >
            <Button variant="solid" bgColor={colorScheme.button} fontSize="xl">
              {"Ty's Telegram Channel"}
            </Button>
          </Link>
        </HStack>
      </VStack>
    </VStack>
  );
}
