<script lang="ts">
	import { Button, buttonVariants } from '$lib/components/ui/button';
	import { Card, CardContent, CardHeader, CardTitle } from '$lib/components/ui/card';
	import SubmitItemDialog from '$lib/components/custom/submit-item-dialog.svelte';
	import { cn } from '$lib/utils';

	let createDialogOpen: boolean = $state(false);

	function openCreateDialog() {
		createDialogOpen = true;
	}
</script>

<section class="relative overflow-hidden">
	<!-- Hero -->
	<div class="mx-auto max-w-6xl px-6 py-24 text-center">
		<h1 class="text-4xl font-bold tracking-tight sm:text-5xl">
			Westuffinder
		</h1>
		<p class="mx-auto mt-6 max-w-2xl text-lg text-muted-foreground">
			Lost something at school? Found something that isn’t yours?
			This is the official place to reconnect items with their owners.
		</p>

		<div class="mt-10 flex flex-col items-center justify-center gap-4 sm:flex-row">
			<Button size="lg" class="px-8" onclick={openCreateDialog}>
				Submit a Found Item
			</Button>
			<a href="/items" class={cn(buttonVariants({ variant: 'outline', size: 'lg' }), 'px-8')}>
				Browse Lost Items
			</a>
		</div>
	</div>

	<!-- Subtle background accent -->
	<div
		aria-hidden="true"
		class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl"
	>
		<div
			class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-primary to-primary/40 opacity-20 sm:left-[calc(50%-30rem)] sm:w-[72rem]"
		></div>
	</div>
</section>

<section class="mx-auto max-w-6xl px-6 py-20">
	<div class="grid gap-8 md:grid-cols-3">
		<Card>
			<CardHeader>
				<CardTitle>Found an Item?</CardTitle>
			</CardHeader>
			<CardContent class="space-y-3 text-sm text-muted-foreground">
				<p>
					Turn it in digitally in less than a minute. Add a description and where you found it.
				</p>
				<Button class="mt-2 w-full" onclick={openCreateDialog}>Submit Item</Button>
			</CardContent>
		</Card>

		<Card>
			<CardHeader>
				<CardTitle>Lost Something?</CardTitle>
			</CardHeader>
			<CardContent class="space-y-3 text-sm text-muted-foreground">
				<p>
					Browse items that have been turned in by students and staff.
				</p>
				<a href="/items" class={cn(buttonVariants({ variant: 'outline', size: 'lg' }), 'mt-2 w-full')}>Browse Items</a>
			</CardContent>
		</Card>

		<Card>
			<CardHeader>
				<CardTitle>Safe &amp; School-Run</CardTitle>
			</CardHeader>
			<CardContent class="space-y-3 text-sm text-muted-foreground">
				<p>
					Managed by Waukesha West staff. Items are reviewed before being listed.
				</p>
			</CardContent>
		</Card>
	</div>
</section>

<section class="mx-auto max-w-6xl px-6 pb-24">
	<div class="flex items-center justify-center">
		<p class="text-xs text-muted-foreground">
			Staff only:
			<a href="/login" class="ml-1 underline underline-offset-4 hover:text-foreground">
				Admin sign in
			</a>
		</p>
	</div>
</section>

<SubmitItemDialog bind:open={createDialogOpen} />
