<script lang="ts">
	// Direct imports for faster Astro builds
	import BookOpen from '@lucide/svelte/icons/book-open';
	import List from '@lucide/svelte/icons/list';
	import Sparkles from '@lucide/svelte/icons/sparkles';
	import HeroSection from './HeroSection.svelte';
	import NavigationCard from './NavigationCard.svelte';
	import RecentlyUpdatedSection from './RecentlyUpdatedSection.svelte';
</script>

<div class="flex flex-col gap-8">
	<HeroSection />

	<nav class="mx-auto flex w-full max-w-3xl flex-col gap-4">
		<NavigationCard
			href="/novels"
			icon={BookOpen}
			title="Novels"
			description="Explore and read archived novels."
		/>
		<NavigationCard
			href="/lists"
			icon={List}
			title="Reading Lists"
			description="Organize stories into custom collections."
			disabled
		/>
		<NavigationCard
			href="/recommendations"
			icon={Sparkles}
			title="Recommendations"
			description="Get suggestions based on your reading."
			disabled
		/>
	</nav>

	<RecentlyUpdatedSection />
</div>
