fbla26/src/routes/+page.svelte

<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" aria-labelledby="hero-heading">
	<div class="mx-auto max-w-6xl px-6 py-24 text-center">
		<h1 id="hero-heading" 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 ">
			<a
				href="/items"
				class={cn(buttonVariants({ variant: 'default', size: 'xl' }), 'text-base')}
				aria-label="Browse lost items"
			>
				Browse lost items
			</a>
			<div class="w-40 flex items-center gap-2 h-2">
				<div class="flex-1 h-px bg-border"></div>
				<span class="text-muted-foreground whitespace-nowrap">Or</span>
				<div class="flex-1 h-px bg-border"></div>
			</div>
			<Button
				size="sm"
				variant="outline"
				class="text-muted-foreground"
				onclick={openCreateDialog}
				aria-label="Submit a found item"
			>
				Submit found item
			</Button>
		</div>
	</div>

	<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>

<!-- FEATURES -->
<section class="mx-auto max-w-6xl px-6 py-12" aria-labelledby="features-heading">
	<h2 id="features-heading" class="text-2xl font-semibold text-center mb-12">
		Everything you need to get items back fast
	</h2>

	<div class="grid gap-12 md:grid-cols-2 items-center">
		<!-- Left visual / emphasis block -->
		<div class="space-y-6">
			<div class="rounded-2xl border bg-muted/30 p-6">
				<h3 class="font-semibold text-lg">Built for speed</h3>
				<p class="text-sm text-muted-foreground mt-2">
					Report and browse items in seconds. The entire flow is designed to reduce friction.
				</p>
			</div>

			<div class="rounded-2xl border bg-muted/20 p-6">
				<h3 class="font-semibold text-lg">Organized listings</h3>
				<p class="text-sm text-muted-foreground mt-2">
					Items are structured by location and category so nothing gets buried.
				</p>
			</div>

			<div class="rounded-2xl border bg-muted/10 p-6">
				<h3 class="font-semibold text-lg">Trusted process</h3>
				<p class="text-sm text-muted-foreground mt-2">
					Every submission is reviewed before it's visible.
				</p>
			</div>
		</div>

		<!-- Right visual anchor -->
		<div class="rounded-2xl border p-10 bg-gradient-to-br from-primary/10 to-transparent">
			<h3 class="text-xl font-semibold">Designed for school life</h3>
			<p class="text-sm text-muted-foreground mt-4">
				Backpacks, phones, notebooks, jackets — the things that actually get lost daily.
				Everything here is tuned for real student use, not generic “lost & found” systems.
			</p>

			<div class="mt-6 text-xs text-muted-foreground">
				Over <span class="font-medium text-foreground">120+</span> items successfully returned
			</div>
		</div>
	</div>
</section>

<!-- HOW IT WORKS (Vertical Timeline Style) -->
<section class="mx-auto max-w-4xl px-6 py-12" aria-labelledby="how-heading">
	<h2 id="how-heading" class="text-2xl font-semibold text-center mb-12">
		How it works
	</h2>

	<div class="relative border-l pl-8 space-y-10">
		<div class="relative">
			<div class="absolute -left-[40px] top-1 h-4 w-4 rounded-full bg-primary"></div>
			<h3 class="font-semibold">Someone finds something</h3>
			<p class="text-sm text-muted-foreground mt-1">
				An item is discovered in a classroom, hallway, locker room, or common area.
			</p>
		</div>

		<div class="relative">
			<div class="absolute -left-[40px] top-1 h-4 w-4 rounded-full bg-primary/70"></div>
			<h3 class="font-semibold">It gets submitted</h3>
			<p class="text-sm text-muted-foreground mt-1">
				A quick submission captures what it is and where it was found.
			</p>
		</div>

		<div class="relative">
			<div class="absolute -left-[40px] top-1 h-4 w-4 rounded-full bg-primary/40"></div>
			<h3 class="font-semibold">It makes its way home</h3>
			<p class="text-sm text-muted-foreground mt-1">
				The owner identifies it and retrieves it through staff.
			</p>
		</div>
	</div>
</section>

<!-- ACTION / INFO (Staggered Bento Style Instead of 3 Equal Cards) -->
<section class="mx-auto max-w-6xl px-6 py-24" aria-labelledby="info-heading">
	<h2 id="info-heading" class="sr-only">Actions</h2>

	<div class="grid md:grid-cols-2 gap-6">
		<!-- Large primary card -->
		<Card class="">
			<CardHeader>
				<CardTitle>Found something?</CardTitle>
			</CardHeader>
			<CardContent class="space-y-4 text-sm text-muted-foreground">
				<p>
					Help return it in under a minute. Every submission makes a difference.
				</p>
				<Button variant="outline" class="w-full" onclick={openCreateDialog}>
					Submit Item
				</Button>
			</CardContent>
		</Card>

		<!-- Side card -->
		<Card class="">
			<CardHeader>
				<CardTitle>Looking for yours?</CardTitle>
			</CardHeader>
			<CardContent class="space-y-4 text-sm text-muted-foreground">
				<p>
					Check the live list of items turned in around school.
				</p>
				<a
					href="/items"
					class={cn(buttonVariants({ variant: 'outline' }), 'w-full')}
				>
					Browse
				</a>
			</CardContent>
		</Card>

	</div>
	<!-- Wide bottom emphasis card -->
	<Card class="md:col-span-3 border-muted bg-muted/20 mt-6">
		<CardContent class=" flex flex-col md:flex-row md:items-center md:justify-between gap-4">
			<div>
				<h3 class="font-semibold">Built on trust</h3>
				<p class="text-sm text-muted-foreground">
					A simple system powered by students and staff working together.
				</p>
			</div>

			<div class="text-sm text-muted-foreground">
				<span class="font-medium text-foreground">120+</span> items returned and counting
			</div>
		</CardContent>
	</Card>
</section>

<!-- IMPORTANT DISCLAIMER -->
<section class="mx-auto max-w-6xl px-6 pb-20" aria-labelledby="policy-heading">
	<Card class="border-amber-500/40 bg-amber-500/5">
		<CardHeader>
			<CardTitle id="policy-heading">Important Notice</CardTitle>
		</CardHeader>
		<CardContent class="text-sm text-muted-foreground space-y-3">
			<p>
				This platform is intended for everyday personal items such as notebooks, clothing,
				water bottles, and similar belongings commonly misplaced at school.
			</p>

			<p>
				Items of significant monetary, legal, or sensitive value (including but not limited to cash,
				credit cards, IDs, or high-value electronics) should <strong>not</strong> be handled through
				this system.
			</p>

			<p>
				Such items must be immediately reported to the main office or appropriate school staff for
				proper handling and documentation.
			</p>
		</CardContent>
	</Card>
</section>

<section class="mx-auto max-w-6xl px-6 pb-24" aria-labelledby="staff-heading">
	<h2 id="staff-heading" class="sr-only">Staff Access</h2>
	<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"
				aria-label="Admin sign in"
			>
				Admin sign in
			</a>
		</p>
	</div>
</section>

<SubmitItemDialog bind:open={createDialogOpen} />