<script lang="ts">
	import BrandPanel from '$lib/auth/BrandPanel.svelte';
	import SignupForm from '$lib/auth/SignupForm.svelte';

	let { form } = $props();
</script>

<svelte:head>
	<title>Konto erstellen — Mealprep</title>
</svelte:head>

<!-- Mobile: stacked, Desktop: side by side -->
<div class="flex min-h-screen flex-col md:flex-row">
	<BrandPanel />
	<div class="flex flex-1 flex-col items-center justify-center px-[20px] py-[24px] md:px-[56px] md:py-[48px]">
		<div class="w-full max-w-[380px]">
			<SignupForm {form} />
		</div>
	</div>
</div>
