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

<div class="inventory-layout">
	<section class="rooms stagger">
		{#each inventory.rooms as item}
			<article class="room-row">
				<div>
					<div class="room-label">{item.name}</div>
					<h2>{item.coverage}</h2>
				</div>
				<p>{item.note}</p>
			</article>
		{/each}
	</section>

	<section class="restock reveal">
		<div class="section-label">Restock run</div>
		<h3>Next pickup list</h3>
		<div class="restock-list">
			{#each inventory.restock as item}
				<div class="restock-pill">{item}</div>
			{/each}
		</div>
	</section>
</div>

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

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

	.rooms {
		padding: 18px;
		display: grid;
		gap: 12px;
	}

	.room-row {
		display: grid;
		grid-template-columns: 240px minmax(0, 1fr);
		gap: 16px;
		padding: 22px;
		border-radius: 22px;
		background: linear-gradient(140deg, rgba(255, 251, 246, 0.92), rgba(233, 238, 233, 0.56));
	}

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

	.room-row h2,
	.restock h3 {
		margin: 8px 0 0;
		font-size: clamp(1.8rem, 4vw, 2.7rem);
		line-height: 0.95;
		letter-spacing: -0.05em;
	}

	.room-row p {
		margin: 0;
		color: #6b6256;
		line-height: 1.6;
		align-self: center;
	}

	.restock {
		padding: 22px;
	}

	.restock-list {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		margin-top: 18px;
	}

	.restock-pill {
		padding: 11px 14px;
		border-radius: 999px;
		background: rgba(179, 92, 50, 0.1);
		color: #7b472c;
		font-size: 13px;
	}

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

	@media (max-width: 640px) {
		.room-row {
			grid-template-columns: 1fr;
		}
	}
</style>
