<script lang="ts">
	import { page } from '$app/state';
	import { BookOpen, CalendarDays, CircleDot, Compass, Dumbbell, Landmark, LibraryBig, Package2, Settings2, SquareCheckBig } from '@lucide/svelte';
	import { mockupNav, routeMeta } from '$lib/mockup/data';

	const icons = {
		'/mockup': CircleDot,
		'/mockup/tasks': SquareCheckBig,
		'/mockup/trips': Compass,
		'/mockup/fitness': Dumbbell,
		'/mockup/budget': Landmark,
		'/mockup/inventory': Package2,
		'/mockup/reader': BookOpen,
		'/mockup/media': LibraryBig,
		'/mockup/settings': Settings2
	};

	const navItems = mockupNav.map((item) => ({
		...item,
		icon: icons[item.href as keyof typeof icons]
	}));

	let { children } = $props();

	const meta = $derived(routeMeta[page.url.pathname] || routeMeta['/mockup']);
	const today = $derived(
		new Intl.DateTimeFormat('en-US', {
			weekday: 'short',
			month: 'short',
			day: 'numeric'
		}).format(new Date())
	);
</script>

<svelte:head>
	<title>Platform Mockup</title>
</svelte:head>

<div class="mockup-shell">
	<div class="mockup-glow mockup-glow-a"></div>
	<div class="mockup-glow mockup-glow-b"></div>

	<aside class="mockup-rail reveal">
		<div class="rail-brand">
			<div class="brand-mark">P</div>
			<div>
				<div class="brand-name">Platform Atelier</div>
				<div class="brand-sub">concept workspace</div>
			</div>
		</div>

		<nav class="rail-nav">
			{#each navItems as item}
				<a
					href={item.href}
					class:selected={page.url.pathname === item.href}
				>
					<item.icon size={16} strokeWidth={1.8} />
					<span>{item.label}</span>
				</a>
			{/each}
		</nav>

		<div class="rail-note">
			<div class="note-label">Intent</div>
			<p>Separate concept route for browsing a rebuilt visual direction without changing the live app.</p>
		</div>
	</aside>

	<div class="mockup-main">
		<header class="mockup-header reveal">
			<div>
				<div class="eyebrow">{meta.eyebrow}</div>
				<h1>{meta.title}</h1>
				<p>{meta.description}</p>
			</div>
			<div class="header-side">
				<div class="header-chip">
					<CalendarDays size={15} strokeWidth={1.8} />
					<span>{today}</span>
				</div>
				<div class="header-meta">Prototype routes only</div>
			</div>
		</header>

		<section class="mockup-content">
			{@render children()}
		</section>
	</div>
</div>

<style>
	:global(body) {
		background:
			radial-gradient(circle at top left, rgba(214, 120, 58, 0.14), transparent 26%),
			radial-gradient(circle at 85% 12%, rgba(65, 91, 82, 0.18), transparent 24%),
			linear-gradient(180deg, #f5efe6 0%, #efe6da 48%, #ede7de 100%);
		color: #1a1612;
	}

	.mockup-shell {
		--sand: #f7f1e8;
		--sand-deep: rgba(247, 241, 232, 0.72);
		--ink: #1e1812;
		--muted: #6b6256;
		--line: rgba(35, 26, 17, 0.12);
		--accent: #b35c32;
		--accent-soft: rgba(179, 92, 50, 0.12);
		--forest: #445f56;
		--forest-soft: rgba(68, 95, 86, 0.12);
		min-height: 100vh;
		display: grid;
		grid-template-columns: 280px minmax(0, 1fr);
		position: relative;
		overflow: clip;
	}

	.mockup-glow {
		position: fixed;
		border-radius: 999px;
		filter: blur(80px);
		pointer-events: none;
		opacity: 0.45;
	}

	.mockup-glow-a {
		width: 360px;
		height: 360px;
		top: -120px;
		right: 12%;
		background: rgba(179, 92, 50, 0.2);
	}

	.mockup-glow-b {
		width: 280px;
		height: 280px;
		bottom: 10%;
		left: 6%;
		background: rgba(68, 95, 86, 0.18);
	}

	.mockup-rail {
		position: sticky;
		top: 0;
		height: 100vh;
		padding: 28px 22px 24px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		background: linear-gradient(180deg, rgba(250, 246, 239, 0.84), rgba(244, 237, 228, 0.68));
		border-right: 1px solid var(--line);
		backdrop-filter: blur(22px);
	}

	.rail-brand {
		display: flex;
		align-items: center;
		gap: 14px;
	}

	.brand-mark {
		width: 42px;
		height: 42px;
		display: grid;
		place-items: center;
		border-radius: 14px;
		background: linear-gradient(135deg, var(--ink), #5d4c3f);
		color: white;
		font-size: 18px;
		font-weight: 700;
		letter-spacing: 0.06em;
	}

	.brand-name {
		font-size: 14px;
		font-weight: 700;
		letter-spacing: 0.04em;
		text-transform: uppercase;
	}

	.brand-sub,
	.note-label,
	.eyebrow,
	.header-meta {
		font-size: 11px;
		text-transform: uppercase;
		letter-spacing: 0.12em;
		color: var(--muted);
	}

	.rail-nav {
		display: grid;
		gap: 8px;
		margin: 30px 0 auto;
	}

	.rail-nav a {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 12px 14px;
		border-radius: 999px;
		color: var(--muted);
		transition: background 160ms ease, color 160ms ease, transform 160ms ease;
	}

	.rail-nav a:hover,
	.rail-nav a.selected {
		background: rgba(255, 255, 255, 0.62);
		color: var(--ink);
		transform: translateX(3px);
	}

	.rail-note {
		padding: 18px 0 0;
		border-top: 1px solid var(--line);
	}

	.rail-note p {
		margin: 8px 0 0;
		font-size: 14px;
		line-height: 1.6;
		color: var(--muted);
	}

	.mockup-main {
		padding: 28px 28px 40px;
	}

	.mockup-header {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		gap: 20px;
		padding: 12px 0 28px;
	}

	.mockup-header h1 {
		max-width: 10ch;
		margin: 8px 0 10px;
		font-size: clamp(2.6rem, 5vw, 4.7rem);
		line-height: 0.95;
		letter-spacing: -0.06em;
		font-weight: 700;
	}

	.mockup-header p {
		max-width: 48rem;
		margin: 0;
		font-size: 16px;
		line-height: 1.65;
		color: var(--muted);
	}

	.header-side {
		display: grid;
		gap: 12px;
		justify-items: end;
	}

	.header-chip {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 10px 14px;
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.66);
		border: 1px solid rgba(35, 26, 17, 0.08);
		color: var(--ink);
	}

	.mockup-content {
		display: grid;
	}

	@media (max-width: 980px) {
		.mockup-shell {
			grid-template-columns: 1fr;
		}

		.mockup-rail {
			position: relative;
			height: auto;
			gap: 24px;
			padding-bottom: 18px;
		}

		.rail-nav {
			grid-template-columns: repeat(9, minmax(0, 1fr));
			overflow-x: auto;
			margin: 0;
		}

		.rail-nav a {
			justify-content: center;
			min-width: 118px;
		}

		.rail-note {
			display: none;
		}

		.mockup-main {
			padding: 18px 16px 28px;
		}

		.mockup-header {
			flex-direction: column;
			align-items: flex-start;
		}

		.header-side {
			justify-items: start;
		}
	}

	@media (max-width: 640px) {
		.mockup-header h1 {
			max-width: 12ch;
			font-size: 2.8rem;
		}

		.rail-nav {
			grid-template-columns: repeat(9, 118px);
		}
	}
</style>
