---
import "@/styles/globals.css";
import Layout from "../layouts/Layout.astro";
import { AuthForm } from "../components/AuthForm";
import { Navbar } from "../components/Navbar";
import { AuthGuard } from "../components/AuthGuard";
---

<Layout title="Sign Up - InboxNegotiator">
	<Navbar client:load />

	<AuthGuard requireAuth={false} client:load>
		<main
			class="min-h-screen bg-gray-50 dark:bg-background flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8"
		>
			<div class="w-full max-w-md">
				<div class="text-center mb-8">
					<h1
						class="text-3xl font-bold text-gray-900 dark:text-foreground mb-2"
					>
						Create Account
					</h1>
					<p class="text-gray-600 dark:text-gray-300">
						Start resolving your debts with AI assistance
					</p>
				</div>

				<AuthForm mode="signup" client:load />
			</div>
		</main>
	</AuthGuard>
</Layout>