<script lang="ts">
	import Icon from "$lib/components/atoms/icon.svelte";
	import Title from "$lib/components/atoms/title.svelte";
	import CheckIcon from "~icons/heroicons/check-circle-20-solid";
	import ChatBubbleLeftRightIcon from "~icons/heroicons/chat-bubble-left-right-20-solid";
	// Maybe todo? if the `uid` search param is present, do something?? figure out later
</script>

<div class="flex min-h-screen w-full items-center justify-center bg-gradient-to-br from-green-50 via-blue-50 to-purple-50 p-4">
	<div class="w-full max-w-lg">
		<div class="animate-scale-in rounded-3xl bg-white p-8 shadow-2xl md:p-12">
			<!-- Success Icon with Animation -->
			<div class="mb-8 flex justify-center">
				<div class="animate-check-bounce rounded-full bg-gradient-to-br from-green-400 to-green-600 p-4 shadow-lg">
					<Icon icon={CheckIcon} cls="h-16 w-16 text-white" />
				</div>
			</div>

			<!-- Title -->
			<Title size="h3" weight="medium" center>Order Confirmed!</Title>

			<!-- Description -->
			<p class="mb-6 mt-4 text-center text-base text-gray-600">
				Thank you for your order! Your payment has been processed successfully.
			</p>

			<!-- Confirmation Notification Card -->
			<div class="mb-8 rounded-xl bg-blue-50 p-4 md:p-6">
				<div class="flex items-start gap-3">
					<div class="flex-shrink-0">
						<div class="rounded-lg bg-blue-100 p-2">
							<Icon icon={ChatBubbleLeftRightIcon} cls="h-5 w-5 text-blue-600" />
						</div>
					</div>
					<div class="flex-1">
						<p class="mb-1 text-sm font-semibold text-gray-900">
							We'll Be In Touch
						</p>
						<p class="text-sm text-gray-600">
							Our team will reach back to you soon with order confirmation and details.
						</p>
					</div>
				</div>
			</div>

			<!-- Info Cards Grid -->
			<div class="mb-8 grid gap-4 sm:grid-cols-2">
				<div class="rounded-lg border border-gray-200 bg-gray-50 p-4">
					<div class="mb-1 text-xs font-medium uppercase tracking-wide text-gray-500">
						Status
					</div>
					<div class="text-sm font-semibold text-gray-900">
						Processing
					</div>
				</div>
				<div class="rounded-lg border border-gray-200 bg-gray-50 p-4">
					<div class="mb-1 text-xs font-medium uppercase tracking-wide text-gray-500">
						Confirmation
					</div>
					<div class="text-sm font-semibold text-gray-900">
						Via Contact
					</div>
				</div>
			</div>

		</div>
	</div>
</div>

<style>
	@keyframes scale-in {
		from {
			opacity: 0;
			transform: scale(0.9);
		}
		to {
			opacity: 1;
			transform: scale(1);
		}
	}

	@keyframes check-bounce {
		0%, 100% {
			transform: scale(1);
		}
		50% {
			transform: scale(1.1);
		}
	}

	.animate-scale-in {
		animation: scale-in 0.5s cubic-bezier(0.16, 1, 0.3, 1);
	}

	.animate-check-bounce {
		animation: check-bounce 0.6s ease-in-out;
	}
</style>
