<script lang="ts">
	import AppShell from '$lib/components/layout/AppShell.svelte';
	import MarkdownDoc from '$lib/components/docs/MarkdownDoc.svelte';
	import IconRing from '$lib/components/ui/IconRing.svelte';
	import OutlineIcon from '$lib/components/ui/OutlineIcon.svelte';
	import type { PageData } from './$types';

	let { data }: { data: PageData } = $props();
</script>

<svelte:head>
	<title>Panduan Member — Catatan Warung</title>
	<meta
		name="description"
		content="Panduan lengkap menggunakan Catatan Warung: transaksi, stok, laporan, profil warung, dan paket langganan."
	/>
</svelte:head>

<AppShell memberName={data.member.nama} memberEmail={data.member.email}>
	<header
		class="sticky top-0 z-30 border-b border-base-300 bg-base-100/90 px-4 py-4 pr-20 backdrop-blur-lg lg:px-8 lg:pr-8"
		style="padding-top: max(1rem, env(safe-area-inset-top))"
	>
		<div class="mx-auto flex max-w-3xl items-center gap-3">
			<IconRing tone="sky" size="sm">
				<OutlineIcon name="panduan" size="sm" />
			</IconRing>
			<div>
				<h1 class="text-lg font-bold lg:text-xl">Panduan Member</h1>
				<p class="text-xs text-base-content/50 lg:text-sm">
					Cara pakai Catatan Warung — transaksi, stok, laporan & lainnya
				</p>
			</div>
		</div>
	</header>

	<main class="page-content max-w-3xl pb-8">
		<div class="surface-sky mb-6 rounded-2xl border border-sky-400 p-4 text-sm">
			<p class="font-semibold">Tips navigasi</p>
			<p class="mt-1 text-white/80">
				Gunakan daftar isi di bawah untuk loncat ke bagian tertentu. Dokumen ini selalu diperbarui mengikuti
				fitur terbaru aplikasi.
			</p>
		</div>

		<div class="card bg-base-100 shadow-md">
			<div class="card-body p-5 lg:p-8">
				<MarkdownDoc html={data.html} />
			</div>
		</div>
	</main>
</AppShell>
