<script lang="ts">
	import type { PageData } from './$types';
	import { goto } from '$app/navigation';
	import { onMount } from 'svelte';

	export let data: PageData;

	// data.user는 루트 +layout.server.ts에서 옵니다.
	// 이미 로그인한 사용자는 이 페이지를 볼 필요가 없습니다.
	// onMount는 이 코드가 클라이언트에서 실행되도록 보장합니다.
	onMount(() => {
		if (data.user) {
			// 기본 대시보드 페이지(메뉴 1번)로 리다이렉트
			goto('/image-generate');
		}
	});
</script>

{#if !data.user}
	<div class="flex flex-col items-center justify-center min-h-full p-4">
		<div
			class="w-full max-w-md bg-white p-10 md:p-12 rounded-2xl shadow-xl text-center transform -translate-y-10"
		>
			<div class="mb-6">
				<svg
					class="w-16 h-16 mx-auto text-blue-600"
					fill="none"
					stroke="currentColor"
					viewBox="0 0 24 24"
					xmlns="http://www.w3.org/2000/svg"
					stroke-width="1.5"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4M4 7l8 5 8-5"
					></path>
					<path stroke-linecap="round" stroke-linejoin="round" d="M4 12l8 5 8-5"></path>
				</svg>
			</div>

			<h1 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">BigData Server</h1>
			<p class="text-lg text-gray-600 mb-10">데이터를 분석하고 시각화하는 최고의 플랫폼</p>

			<a
				href="/login"
				class="w-full px-6 py-3 bg-blue-600 text-white text-lg font-semibold rounded-lg shadow-lg
                       hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50
                       transition-transform transform hover:scale-105"
			>
				시작하기
			</a>
		</div>
	</div>
{/if}