<script lang="ts">
	import { ArrowUpRight, Dot, MoveRight } from '@lucide/svelte';
	import { overview, trips, fitness, budget, inventory } from '$lib/mockup/data';
</script>

<div class="overview-grid">
	<section class="poster stagger">
		<div class="poster-copy">
			<div class="kicker">Today at a glance</div>
			<h2>One desk for movement, intake, stock, and spend.</h2>
			<p>This concept treats the platform like a quiet studio wall: fewer boxes, stronger hierarchy, and clearer next actions.</p>
		</div>
		<div class="poster-metrics">
			{#each overview.status as item}
				<div class="metric-line">
					<div>
						<div class="metric-label">{item.label}</div>
						<div class="metric-note">{item.note}</div>
					</div>
					<div class="metric-value">{item.value}</div>
				</div>
			{/each}
		</div>
	</section>

	<section class="agenda reveal">
		<div class="section-head">
			<div>
				<div class="section-label">Daily sequence</div>
				<h3>Agenda</h3>
			</div>
			<a href="/mockup/trips">Open routes <ArrowUpRight size={15} /></a>
		</div>

		<div class="agenda-list">
			{#each overview.agenda as item}
				<div class="agenda-row">
					<div class="agenda-time">{item.time}</div>
					<div class="agenda-main">
						<div class="agenda-title">{item.title}</div>
						<div class="agenda-tag">{item.tag}</div>
					</div>
				</div>
			{/each}
		</div>
	</section>

	<section class="strip stagger">
		<a href="/mockup/trips" class="strip-block">
			<div class="strip-label">Trips</div>
			<div class="strip-title">{trips.itineraries[0].name}</div>
			<div class="strip-detail">{trips.itineraries[0].status}</div>
		</a>
		<a href="/mockup/fitness" class="strip-block">
			<div class="strip-label">Fitness</div>
			<div class="strip-title">{fitness.macros[0].value} protein</div>
			<div class="strip-detail">Recovery: {fitness.recovery[0]}</div>
		</a>
		<a href="/mockup/budget" class="strip-block">
			<div class="strip-label">Budget</div>
			<div class="strip-title">{budget.streams[1].amount}</div>
			<div class="strip-detail">{budget.streams[1].name}</div>
		</a>
		<a href="/mockup/inventory" class="strip-block">
			<div class="strip-label">Inventory</div>
			<div class="strip-title">{inventory.rooms[1].coverage}</div>
			<div class="strip-detail">{inventory.rooms[1].name}</div>
		</a>
	</section>

	<section class="signals reveal">
		<div class="section-head">
			<div>
				<div class="section-label">Signals</div>
				<h3>Operating context</h3>
			</div>
			<div class="mini-link">Scan everything <MoveRight size={15} /></div>
		</div>
		<div class="signal-list">
			{#each overview.signals as item}
				<div class="signal-row">
					<div>
						<div class="signal-value">{item.value}</div>
						<div class="signal-label">{item.label}</div>
					</div>
					<div class="signal-detail">{item.detail}</div>
				</div>
			{/each}
		</div>
	</section>

	<section class="notes reveal">
		<div class="section-head">
			<div>
				<div class="section-label">Cross-app notes</div>
				<h3>What needs attention next</h3>
			</div>
		</div>
		<div class="notes-list">
			<div class="note-item">
				<Dot size={22} />
				<span>{trips.notes[0]}</span>
			</div>
			<div class="note-item">
				<Dot size={22} />
				<span>{budget.watchlist[0]}</span>
			</div>
			<div class="note-item">
				<Dot size={22} />
				<span>{inventory.rooms[2].note}</span>
			</div>
		</div>
	</section>
</div>

<style>
	.overview-grid {
		display: grid;
		grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.9fr);
		gap: 18px;
		align-items: start;
	}

	.poster,
	.agenda,
	.signals,
	.notes {
		background: rgba(255, 252, 248, 0.66);
		border: 1px solid rgba(35, 26, 17, 0.1);
		backdrop-filter: blur(14px);
	}

	.poster {
		grid-column: 1 / 2;
		padding: 28px;
		min-height: 420px;
		display: grid;
		align-content: space-between;
		background:
			linear-gradient(145deg, rgba(255, 250, 244, 0.88), rgba(246, 233, 220, 0.55)),
			radial-gradient(circle at 85% 15%, rgba(179, 92, 50, 0.18), transparent 28%);
		border-radius: 30px;
	}

	.poster-copy h2 {
		max-width: 10ch;
		margin: 8px 0 12px;
		font-size: clamp(2rem, 4vw, 3.4rem);
		line-height: 0.95;
		letter-spacing: -0.05em;
	}

	.poster-copy p,
	.metric-note,
	.signal-detail,
	.note-item span {
		color: #6b6256;
		line-height: 1.6;
	}

	.kicker,
	.section-label,
	.strip-label,
	.metric-label,
	.agenda-tag {
		font-size: 11px;
		text-transform: uppercase;
		letter-spacing: 0.12em;
		color: #8b7b6a;
	}

	.poster-metrics {
		display: grid;
		gap: 14px;
	}

	.metric-line {
		display: flex;
		align-items: end;
		justify-content: space-between;
		padding-top: 14px;
		border-top: 1px solid rgba(35, 26, 17, 0.1);
	}

	.metric-value {
		font-size: clamp(1.6rem, 3vw, 2.4rem);
		letter-spacing: -0.05em;
	}

	.agenda,
	.signals,
	.notes {
		border-radius: 24px;
		padding: 22px;
	}

	.agenda {
		grid-column: 2 / 3;
	}

	.section-head {
		display: flex;
		align-items: end;
		justify-content: space-between;
		gap: 12px;
		margin-bottom: 16px;
	}

	.section-head h3 {
		margin: 4px 0 0;
		font-size: 1.5rem;
		letter-spacing: -0.04em;
	}

	.section-head a,
	.mini-link {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		font-size: 13px;
		color: #6b6256;
	}

	.agenda-list,
	.signal-list,
	.notes-list {
		display: grid;
		gap: 14px;
	}

	.agenda-row,
	.signal-row {
		display: grid;
		grid-template-columns: 72px minmax(0, 1fr);
		gap: 12px;
		padding-top: 14px;
		border-top: 1px solid rgba(35, 26, 17, 0.09);
	}

	.agenda-time {
		font-size: 1.1rem;
		letter-spacing: -0.03em;
	}

	.agenda-title,
	.strip-title,
	.signal-value {
		font-size: 1.35rem;
		letter-spacing: -0.04em;
	}

	.strip {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 12px;
	}

	.strip-block {
		padding: 18px 18px 20px;
		border-radius: 24px;
		background: rgba(255, 255, 255, 0.64);
		border: 1px solid rgba(35, 26, 17, 0.08);
		transition: transform 160ms ease, background 160ms ease;
	}

	.strip-block:hover {
		transform: translateY(-3px);
		background: rgba(255, 255, 255, 0.8);
	}

	.strip-detail,
	.signal-label {
		margin-top: 4px;
		color: #6b6256;
	}

	.signals {
		grid-column: 1 / 2;
	}

	.signal-row {
		grid-template-columns: minmax(0, 0.75fr) minmax(0, 1fr);
	}

	.notes {
		grid-column: 2 / 3;
	}

	.note-item {
		display: flex;
		align-items: start;
		gap: 8px;
		padding-top: 14px;
		border-top: 1px solid rgba(35, 26, 17, 0.09);
	}

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

		.poster,
		.agenda,
		.strip,
		.signals,
		.notes {
			grid-column: 1 / -1;
		}

		.strip {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	@media (max-width: 640px) {
		.poster,
		.agenda,
		.signals,
		.notes {
			padding: 18px;
			border-radius: 22px;
		}

		.agenda-row,
		.signal-row {
			grid-template-columns: 1fr;
		}

		.strip {
			grid-template-columns: 1fr;
		}
	}
</style>
