<script lang="ts">
	import { MoveRight } from '@lucide/svelte';
	import { trips } from '$lib/mockup/data';
</script>

<div class="page-grid">
	<section class="route-board stagger">
		{#each trips.itineraries as item}
			<article class="route-item">
				<div class="route-meta">{item.window}</div>
				<h2>{item.name}</h2>
				<p>{item.status}</p>
				<div class="stop-line">
					{#each item.stops as stop, index}
						<span>{stop}</span>{#if index < item.stops.length - 1}<MoveRight size={14} />{/if}
					{/each}
				</div>
				<div class="weather">{item.weather}</div>
			</article>
		{/each}
	</section>

	<section class="detail-pane reveal">
		<div class="section-label">Field notes</div>
		<h3>Travel logic</h3>
		<div class="notes-list">
			{#each trips.notes as note}
				<div class="note-row">{note}</div>
			{/each}
		</div>
	</section>
</div>

<style>
	.page-grid {
		display: grid;
		grid-template-columns: minmax(0, 1.35fr) 320px;
		gap: 18px;
	}

	.route-board,
	.detail-pane {
		background: rgba(255, 252, 248, 0.68);
		border: 1px solid rgba(35, 26, 17, 0.1);
		border-radius: 28px;
		backdrop-filter: blur(14px);
	}

	.route-board {
		padding: 18px;
		display: grid;
		gap: 14px;
	}

	.route-item {
		padding: 22px;
		border-radius: 22px;
		background: linear-gradient(135deg, rgba(255, 248, 242, 0.9), rgba(245, 232, 221, 0.58));
		min-height: 230px;
		display: grid;
		align-content: start;
		gap: 14px;
		transition: transform 160ms ease;
	}

	.route-item:hover {
		transform: translateY(-4px);
	}

	.route-meta,
	.section-label {
		font-size: 11px;
		text-transform: uppercase;
		letter-spacing: 0.12em;
		color: #8b7b6a;
	}

	.route-item h2,
	.detail-pane h3 {
		margin: 0;
		font-size: clamp(1.8rem, 3vw, 2.5rem);
		line-height: 0.98;
		letter-spacing: -0.05em;
	}

	.route-item p,
	.weather,
	.note-row {
		color: #6b6256;
		line-height: 1.6;
	}

	.stop-line {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 8px;
		font-size: 14px;
	}

	.detail-pane {
		padding: 22px;
		position: sticky;
		top: 28px;
		height: fit-content;
	}

	.notes-list {
		display: grid;
		gap: 12px;
		margin-top: 18px;
	}

	.note-row {
		padding-top: 12px;
		border-top: 1px solid rgba(35, 26, 17, 0.09);
	}

	@media (max-width: 920px) {
		.page-grid {
			grid-template-columns: 1fr;
		}

		.detail-pane {
			position: static;
		}
	}
</style>
