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 LCM website and eShop has been temporarily discontinued."}
        </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">
          {
            "Last year I faced a layoff and haven't been able to get back into my field. I can no longer afford the costs of hosting this website on its current platform. The website generated no sales and thus I had to make the difficult decision to shut the site down for now."
          }
        </Text>
        <Text w="100%" textAlign="left" fontSize="lg">
          {
            "Another contributing factor is the fear of losing access to another payment processor. LCM was banned from Square and they gave no reason. It's probably because of \"adult material\". On top of that, especially with it getting in the spotlight again, my state is starting its own ID check law for adult websites. I cannot catch a break. I have no way to do that since I already struggle to pay for hosting so it's probably a good time to just take a break from this endeavour for now."
          }
        </Text>
        <Text w="100%" textAlign="left" fontSize="lg">
          {
            "I have no time frame for when or if I will reopen the eShop. I do wish to at some point, on a more modern platform. I was originally expecting to be very busy till around the end of November or early December. However, my old job; which I wanted to work alongside starting my new job, let me go for some nonsense reasons that aren't pertinent enough to mention here."
          }
        </Text>
        <Text w="100%" textAlign="left" fontSize="lg">
          {
            'Since LCM was not registered as an LLC yet I have decided to rebrand the company one last time. I have been enjoying hearing/seeing everyone refer to me as wolf/werewolf so much that I want to keep it as Lucid\'s base/default form. I have landed on "Werewolf Kid Creations" to align with this new identity and base form form Lucid. While Lucid Creations Media still works with this new form I really want to lean into it more. I think it is time to flip to a new chapter in my life just like when I change my original fursona and online alias to kobold.'
          }
        </Text>
        <Text w="100%" textAlign="left" fontSize="lg">
          {
            "My current priorities are to work on making the WerewolfKid.monster website. Which is going to serve the same purpose that the Kobold Kid website was going to be: a bio, place to find social links, art of Lucid, and embeds from Gumroad for the 3D textures. I hope to relaunch the eShop on this domain too with a new platform if I can figure out the legal hurdles of doing all of that."
          }
        </Text>
      </VStack>

      <VStack spaceY={6} w="80vw">
        <Heading
          as="h3"
          color={colorScheme.primary}
          fontSize="2.5rem"
          textAlign="center"
          lineHeight="1"
        >
          {"Other Platforms (Shops)"}
        </Heading>

        <HStack gap="6" wrap="wrap" justifyContent="center">
          <Link
            target="_blank"
            color={colorScheme.buttonText}
            href={`${socialSubdomain}gumroad`}
          >
            <Button variant="solid" bgColor={colorScheme.button} fontSize="xl">
              {"Gumroad"}
            </Button>
          </Link>
        </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">
          <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>
        </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>
      </VStack>
    </VStack>
  );
}
