<script lang="ts">
	import { formatRupiah } from '$lib/utils/format';
	import type { PageData } from './$types';

	let { data }: { data: PageData } = $props();

	let interval: 'bulanan' | 'tahunan' = $state('bulanan');
	let openFaq = $state<number | null>(null);

	const k = $derived(data.landing.konten);
	const features = $derived(data.landing.items.feature);
	const steps = $derived(data.landing.items.step);
	const faqs = $derived(data.landing.items.faq);
	const stats = $derived(data.landing.items.stat);
	const mobileHighlights = $derived(data.landing.items.mobile_highlight);

	function hargaPaket(paketId: number): number {
		const paket = data.paketList.find((p) => p.id === paketId);
		return paket?.harga.find((h) => h.interval === interval)?.harga ?? 0;
	}

	function privilegeHighlight(kode: string, nilai: string): string | null {
		if (kode === 'inventori_stok' && (nilai === 'true' || nilai === '1')) return 'Inventori stok';
		if (kode === 'hutang_piutang' && (nilai === 'true' || nilai === '1')) return 'Hutang & piutang';
		if (kode === 'laporan_pdf' && (nilai === 'true' || nilai === '1')) return 'Export PDF';
		if (kode === 'warung_publik' && (nilai === 'true' || nilai === '1')) return 'Warung publik';
		if (kode === 'stok_opname' && (nilai === 'true' || nilai === '1')) return 'Stok opname';
		return null;
	}
</script>

<svelte:head>
	<title>{k.meta_title}</title>
	<meta name="description" content={k.meta_description} />
</svelte:head>

<div class="landing-native bg-base-200">
	<!-- Header -->
	<header
		class="sticky top-0 z-40 flex items-center justify-between border-b border-base-300/50 bg-base-100/80 px-4 py-3 backdrop-blur-lg lg:px-8"
		style="padding-top: max(0.75rem, env(safe-area-inset-top))"
	>
		<a href="/" class="flex items-center gap-2.5">
			<div
				class="flex h-9 w-9 items-center justify-center rounded-xl bg-gradient-to-br from-emerald-500 to-teal-600 text-lg text-white shadow-md shadow-emerald-500/25"
			>
				🏪
			</div>
			<span class="font-bold text-base-content">{k.brand_name}</span>
		</a>
		<div class="flex items-center gap-2">
			<a href="/login" class="btn btn-ghost btn-sm hidden sm:inline-flex">Masuk</a>
			<a
				href="/daftar"
				class="btn btn-sm hidden border-0 bg-gradient-to-r from-emerald-500 to-teal-600 text-white lg:inline-flex"
			>
				{k.header_cta}
			</a>
			<a href="/login" class="btn btn-primary btn-sm lg:hidden">Masuk</a>
		</div>
	</header>

	<!-- Hero -->
	<section class="relative overflow-hidden bg-gradient-to-br from-emerald-600 via-teal-600 to-cyan-700 px-5 pb-16 pt-10 text-white lg:px-8 lg:pb-24 lg:pt-16">
		<div class="pointer-events-none absolute -right-16 -top-16 h-64 w-64 rounded-full bg-white/10 blur-3xl"></div>
		<div class="pointer-events-none absolute -bottom-20 -left-10 h-72 w-72 rounded-full bg-yellow-300/15 blur-3xl"></div>

		<div class="relative z-10 mx-auto grid max-w-6xl items-center gap-10 lg:grid-cols-2 lg:gap-16">
			<div>
				<span class="inline-flex items-center gap-2 rounded-full bg-white/15 px-4 py-1.5 text-sm font-medium backdrop-blur-sm">
					{k.hero_badge}
				</span>
				<h1 class="mt-5 text-3xl font-extrabold leading-tight tracking-tight sm:text-4xl lg:text-5xl">
					{k.hero_title_before}<span class="text-yellow-200">{k.hero_title_highlight}</span>{k.hero_title_after}
				</h1>
				<p class="mt-4 text-base leading-relaxed text-white/85 lg:text-lg">
					{k.hero_subtitle}
				</p>
				<div class="mt-8 flex flex-col gap-3 sm:flex-row">
					<a
						href="/daftar"
						class="btn h-12 min-h-12 rounded-2xl border-0 bg-white text-base font-bold text-emerald-700 shadow-xl hover:bg-white/90"
					>
						{k.hero_cta_primary}
					</a>
					<a
						href="#fitur"
						class="btn h-12 min-h-12 rounded-2xl border border-white/30 bg-white/10 text-white backdrop-blur-sm hover:bg-white/20"
					>
						{k.hero_cta_secondary}
					</a>
				</div>
				<div class="mt-8 flex flex-wrap gap-4 text-sm text-white/70">
					<span class="flex items-center gap-1.5">{k.hero_trust_1}</span>
					<span class="flex items-center gap-1.5">{k.hero_trust_2}</span>
					<span class="flex items-center gap-1.5">{k.hero_trust_3}</span>
				</div>
			</div>

			<!-- Phone mockup desktop -->
			<div class="hidden justify-center lg:flex">
				<div class="relative w-72">
					<div class="absolute -inset-4 rounded-[2.5rem] bg-white/10 blur-xl"></div>
					<div class="relative overflow-hidden rounded-[2rem] border-4 border-white/20 bg-base-100 shadow-2xl">
						<div class="bg-gradient-to-r from-emerald-600 to-teal-600 px-4 py-5 text-white">
							<p class="text-xs text-white/70">Senin, 8 Juni 2026</p>
							<p class="mt-1 text-lg font-bold">Halo, Budi! 👋</p>
						</div>
						<div class="space-y-3 p-4">
							<div class="surface-green rounded-2xl p-4">
								<p class="text-xs text-white/75">Pendapatan Hari Ini</p>
								<p class="text-2xl font-extrabold">Rp 1.250.000</p>
							</div>
							<div class="grid grid-cols-2 gap-2">
								<div class="rounded-xl bg-base-200 p-3 text-center text-2xl">💰</div>
								<div class="rounded-xl bg-base-200 p-3 text-center text-2xl">📦</div>
								<div class="rounded-xl bg-base-200 p-3 text-center text-2xl">📈</div>
								<div class="rounded-xl bg-base-200 p-3 text-center text-2xl">🤝</div>
							</div>
							<div class="rounded-xl bg-base-200/80 p-3">
								<p class="text-xs font-semibold text-base-content/50">Transaksi terbaru</p>
								<p class="mt-1 text-sm font-medium">Nasi goreng × 12</p>
								<p class="text-sm font-bold text-emerald-600">+ Rp 180.000</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>

	<!-- Stats strip -->
	<section class="border-b border-base-300 bg-base-100 px-5 py-8 lg:px-8">
		<div class="mx-auto grid max-w-4xl grid-cols-2 gap-6 text-center lg:grid-cols-4">
			{#each stats as stat}
				<div>
					<p class="text-2xl font-extrabold text-emerald-600 lg:text-3xl">{stat.judul}</p>
					<p class="mt-1 text-sm text-base-content/50">{stat.deskripsi}</p>
				</div>
			{/each}
		</div>
	</section>

	<!-- Features -->
	<section id="fitur" class="px-5 py-14 lg:px-8 lg:py-20">
		<div class="mx-auto max-w-6xl">
			<div class="text-center">
				<h2 class="text-2xl font-extrabold text-base-content lg:text-3xl">{k.features_title}</h2>
				<p class="mx-auto mt-3 max-w-xl text-base-content/60">
					{k.features_subtitle}
				</p>
			</div>
			<div class="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-3 lg:gap-6">
				{#each features as f}
					<div
						class="group rounded-2xl border border-base-300/60 bg-base-100 p-5 shadow-sm transition-all hover:border-emerald-300 hover:shadow-lg lg:p-6"
					>
						<div
							class="flex h-12 w-12 items-center justify-center rounded-2xl bg-gradient-to-br {f.warna ?? 'from-emerald-500 to-teal-600'} text-2xl text-white shadow-md transition-transform group-hover:scale-110"
						>
							{f.icon}
						</div>
						<h3 class="mt-4 text-lg font-bold">{f.judul}</h3>
						<p class="mt-2 text-sm leading-relaxed text-base-content/60">{f.deskripsi}</p>
					</div>
				{/each}
			</div>
		</div>
	</section>

	<!-- How it works -->
	<section class="bg-base-100 px-5 py-14 lg:px-8 lg:py-20">
		<div class="mx-auto max-w-4xl">
			<h2 class="text-center text-2xl font-extrabold lg:text-3xl">{k.steps_title}</h2>
			<p class="mt-3 text-center text-base-content/60">{k.steps_subtitle}</p>
			<div class="mt-10 space-y-4 lg:space-y-0 lg:grid lg:grid-cols-3 lg:gap-6">
				{#each steps as step, i}
					<div class="relative rounded-2xl border border-base-300/50 bg-base-200/40 p-6 text-center">
						<div
							class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-gradient-to-br from-emerald-500 to-teal-600 text-lg font-bold text-white shadow-md"
						>
							{step.urutan}
						</div>
						<h3 class="mt-4 font-bold">{step.judul}</h3>
						<p class="mt-2 text-sm text-base-content/60">{step.deskripsi}</p>
						{#if i < steps.length - 1}
							<span class="absolute -bottom-6 left-1/2 hidden -translate-x-1/2 text-2xl text-emerald-400 lg:block"
								>→</span
							>
						{/if}
					</div>
				{/each}
			</div>
		</div>
	</section>

	<!-- Pricing -->
	<section id="harga" class="px-5 py-14 lg:px-8 lg:py-20">
		<div class="mx-auto max-w-6xl">
			<div class="text-center">
				<h2 class="text-2xl font-extrabold lg:text-3xl">{k.pricing_title}</h2>
				<p class="mt-3 text-base-content/60">{k.pricing_subtitle}</p>
			</div>

			<div class="mt-6 flex justify-center">
				<div class="inline-flex rounded-xl border border-base-300 bg-base-100 p-1 shadow-sm">
					<button
						type="button"
						class="rounded-lg px-5 py-2 text-sm font-semibold transition-colors {interval === 'bulanan'
							? 'bg-emerald-600 text-white shadow'
							: 'text-base-content/50'}"
						onclick={() => (interval = 'bulanan')}
					>
						Bulanan
					</button>
					<button
						type="button"
						class="rounded-lg px-5 py-2 text-sm font-semibold transition-colors {interval === 'tahunan'
							? 'bg-emerald-600 text-white shadow'
							: 'text-base-content/50'}"
						onclick={() => (interval = 'tahunan')}
					>
						Tahunan
					</button>
				</div>
			</div>

			<div class="mt-8 grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
				{#each data.paketList as paket}
					{@const harga = hargaPaket(paket.id)}
					<div
						class="card border bg-base-100 shadow-md transition-all hover:shadow-xl {paket.kode === 'premium'
							? 'border-2 border-emerald-500 ring-2 ring-emerald-500/20'
							: 'border-base-300'}"
					>
						<div class="card-body">
							{#if paket.kode === 'premium'}
								<span class="badge badge-success badge-sm w-fit">Paling populer</span>
							{/if}
							<h3 class="text-xl font-bold">{paket.nama}</h3>
							<p class="text-xs text-base-content/50">{paket.deskripsi}</p>
							<p class="mt-4 text-3xl font-extrabold">
								{harga === 0 ? 'Gratis' : formatRupiah(harga)}
							</p>
							<p class="text-xs text-base-content/40">
								/ {interval === 'bulanan' ? 'bulan' : 'tahun'}
							</p>
							<ul class="mt-4 space-y-2 text-sm">
								{#each paket.privileges as priv}
									{@const label = privilegeHighlight(priv.kode, priv.nilai)}
									{#if label}
										<li class="flex items-center gap-2">
											<span class="text-emerald-500">✓</span>
											{label}
										</li>
									{/if}
								{/each}
							</ul>
							<div class="card-actions mt-4 justify-stretch">
								<a href="/daftar" class="btn btn-block rounded-xl {paket.kode === 'free' ? 'btn-outline' : 'btn-primary border-0 bg-gradient-to-r from-emerald-500 to-teal-600 text-white'}">
									{paket.kode === 'free' ? 'Mulai Gratis' : 'Pilih ' + paket.nama}
								</a>
							</div>
						</div>
					</div>
				{/each}
			</div>
		</div>
	</section>

	<!-- Mobile native showcase -->
	<section class="bg-gradient-to-b from-emerald-50 to-base-200 px-5 py-14 lg:hidden">
		<div class="text-center">
			<h2 class="text-xl font-extrabold">{k.mobile_title}</h2>
			<p class="mt-2 text-sm text-base-content/60">
				{k.mobile_subtitle}
			</p>
		</div>
		<div class="mx-auto mt-8 max-w-sm space-y-3">
			{#each mobileHighlights as item}
				<div class="flex items-center gap-3 rounded-2xl bg-base-100 p-4 shadow-md">
					<span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-emerald-600 text-white"
						>✓</span
					>
					<p class="text-sm font-medium">{item.judul}</p>
				</div>
			{/each}
		</div>
	</section>

	<!-- FAQ -->
	<section class="bg-base-100 px-5 py-14 lg:px-8 lg:py-20">
		<div class="mx-auto max-w-2xl">
			<h2 class="text-center text-2xl font-extrabold">{k.faq_title}</h2>
			<div class="mt-8 space-y-3">
				{#each faqs as faq, i}
					<div class="rounded-2xl border border-base-300/60 bg-base-200/30 overflow-hidden">
						<button
							type="button"
							class="flex w-full items-center justify-between px-5 py-4 text-left font-semibold"
							onclick={() => (openFaq = openFaq === i ? null : i)}
						>
							{faq.judul}
							<span class="text-xl text-base-content/40">{openFaq === i ? '−' : '+'}</span>
						</button>
						{#if openFaq === i}
							<p class="border-t border-base-300/40 px-5 pb-4 pt-2 text-sm leading-relaxed text-base-content/60">
								{faq.deskripsi}
							</p>
						{/if}
					</div>
				{/each}
			</div>
		</div>
	</section>

	<!-- CTA desktop -->
	<section class="hidden bg-gradient-to-r from-emerald-600 to-teal-600 px-8 py-16 text-center text-white lg:block">
		<h2 class="text-3xl font-extrabold">{k.cta_title}</h2>
		<p class="mx-auto mt-3 max-w-lg text-white/80">
			{k.cta_subtitle}
		</p>
		<a
			href="/daftar"
			class="btn mt-8 h-14 rounded-2xl border-0 bg-white px-10 text-lg font-bold text-emerald-700 shadow-xl hover:bg-white/90"
		>
			{k.cta_button}
		</a>
	</section>

	<!-- Footer -->
	<footer class="border-t border-base-300 bg-base-100 px-5 py-10 pb-24 lg:px-8 lg:pb-10">
		<div class="mx-auto flex max-w-6xl flex-col items-center justify-between gap-6 lg:flex-row">
			<div class="flex items-center gap-2">
				<div class="flex h-8 w-8 items-center justify-center rounded-lg bg-emerald-600 text-sm text-white">🏪</div>
				<span class="font-bold">{k.brand_name}</span>
			</div>
			<div class="flex flex-wrap justify-center gap-4 text-sm text-base-content/50">
				<a href="/daftar" class="link link-hover">Daftar</a>
				<a href="/login" class="link link-hover">Login Member</a>
				<a href="/backoffice/login" class="link link-hover">Back Office</a>
				<a href="#fitur" class="link link-hover">Fitur</a>
				<a href="#harga" class="link link-hover">Harga</a>
			</div>
			<p class="text-xs text-base-content/40">© {new Date().getFullYear()} Catatan Warung</p>
		</div>
	</footer>

	<!-- Mobile fixed CTA — native app feel -->
	<div class="landing-cta-bar">
		<a
			href="/daftar"
			class="btn h-12 w-full rounded-2xl border-0 bg-gradient-to-r from-emerald-500 to-teal-600 text-base font-bold text-white shadow-lg"
		>
			{k.mobile_cta_button}
		</a>
	</div>
</div>
