<script lang="ts">
	import { budget } from '$lib/mockup/data';
</script>

<div class="budget-layout">
	<section class="flow-band stagger">
		{#each budget.streams as item}
			<article class="flow-item">
				<div class="flow-label">{item.name}</div>
				<h2>{item.amount}</h2>
				<p>{item.note}</p>
			</article>
		{/each}
	</section>

	<section class="watch reveal">
		<div class="section-label">Watchlist</div>
		<h3>Category drift and decisions</h3>
		<div class="watch-list">
			{#each budget.watchlist as item}
				<div class="watch-row">{item}</div>
			{/each}
		</div>
	</section>
</div>

<style>
	.budget-layout {
		display: grid;
		gap: 18px;
	}

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

	.flow-band {
		padding: 18px;
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 12px;
	}

	.flow-item {
		padding: 22px;
		border-radius: 22px;
		background: linear-gradient(140deg, rgba(255, 248, 242, 0.92), rgba(239, 232, 224, 0.66));
	}

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

	.flow-item h2,
	.watch h3 {
		margin: 8px 0 10px;
		font-size: clamp(2rem, 4vw, 3rem);
		line-height: 0.95;
		letter-spacing: -0.05em;
	}

	.flow-item p,
	.watch-row {
		color: #6b6256;
		line-height: 1.6;
	}

	.watch {
		padding: 22px;
	}

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

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

	@media (max-width: 920px) {
		.flow-band {
			grid-template-columns: 1fr;
		}
	}
</style>
