---
import Layout from "@layouts/Layout.astro";
import RightArrow from "@components/icon/RightArrow.astro";
import RegisterForm from "@components/RegisterPage/RegisterForm.svelte";
import LeftArrow from "@components/icon/LeftArrow.astro";

const backendURL = import.meta.env.BACKEND_URL;
---

<Layout title="注册">
	<main class="relative flex-grow pt-8 md:pt-0 px-4 md:w-full md:h-full md:flex md:items-center md:justify-center">
		<div class="md:w-[40rem] rounded-md md:p-8 md:-translate-y-6
			md:bg-surface-container md:dark:bg-dark-surface-container">
			<p class="mb-2">
				<a href="/">
					<LeftArrow class="inline -translate-y-[0.1rem] scale-90" aria-hidden="true"/>
					首页
				</a>
			</p>
			<h1 class="text-5xl leading-[4rem] font-extralight">欢迎</h1>
			<p class="mt-2 md:mt-3">
				欢迎来到中 V 档案馆。<br/>
				这里是中文虚拟歌手相关信息的收集站与档案馆。
			</p>
			<p class="my-2">
				注册一个账号，<br/>
				让我们一起见证中 V 的历史，现在，与未来。
			</p>
			<p class="mt-4 mb-7">
				已有账户？
				<a href="/login">
					<span>登录</span>
					<RightArrow class="text-xs inline -translate-y-0.5" aria-hidden="true"/>
				</a>
			</p>
			<RegisterForm backendURL={backendURL} client:load />
		</div>
	</main>
</Layout>
