---
import Layout from "../layouts/Layout.astro";
import { Icon } from "astro-icon/components";
import { Image } from "astro:assets";
import {
	TITLE,
	MAIN_MESSAGE_LINE,
	DESCRIPTION,
	NEXT_INSTANCE_MESSAGE,
	NEXT_INSTANCE_URL,
} from "../consts";

const click =
	"text-center group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30";

const mainMessage: string = MAIN_MESSAGE_LINE.map((m, i) =>
	i < MAIN_MESSAGE_LINE.length - 1 ? `${m}<br />` : m,
).join("");
---
<Layout title={TITLE} description={DESCRIPTION}>
  <html lang="ja">
    <head>
      <title>{TITLE}</title>
    </head>
    <body>
      <header class="w-full h-12 backdrop-blur-lg bg-black!">
        <div class="flex justify-center items-center">
          <Icon name="ant-design:aliwangwang-outlined" height={50} width={50} class="block mx-auto" />
        </div>
      </header>
      <main
        class="flex min-h-screen flex-col items-center justify-between p-12 sm:p-24"
      >
        <div
          class="relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1] text-sm font-bold sm:text-3xl"
          >
          <nav set:html={mainMessage} />
          <Icon name="game-icons:hasty-grave" class="w-48 sm:w-96" width={300} height={300} />
        </div>

        <div
          class="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:text-left"
        >
          <a
              href={NEXT_INSTANCE_URL}
              class={click}
            target="_blank"
            rel="noopener noreferrer"
            >
            <div class="mb-3 text-center flex justify-center items-center">
              <h2 class="text-2xl font-semibold leading-30">
                {NEXT_INSTANCE_MESSAGE}
              </h2>
              <Icon name="pixelarticons:next" width={30} height={30} class="ml-2 h-full" />
            </div>
          <p class="m-0 text-sm opacity-50">
          { DESCRIPTION }
          </p>
          </a>
        </div>
        <a href="https://git.v-sli.me/HidemaruOwO/FediGONE" class={"inline-flex items-center text-gray-500 rounded-lg" + click}>
          <Icon name="devicon:forgejo" class="w-5 h-5 me-3" />
          <span class="w-full">Powered by FediGONE</span>
          <svg class="w-4 h-4 ms-2 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
          </svg>
        </a> 
      </main>

    </body>
  </html>
</Layout>
