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

<div class="fitness-layout">
	<section class="macro-board reveal">
		<div class="section-label">Live intake</div>
		<h2>Today</h2>
		<div class="macro-list">
			{#each fitness.macros as item}
				<div class="macro-row">
					<div>
						<div class="macro-label">{item.label}</div>
						<div class="macro-value">{item.value}</div>
					</div>
					<div class="macro-target">{item.target}</div>
				</div>
			{/each}
		</div>
		<div class="recovery-band">
			{#each fitness.recovery as item}
				<span>{item}</span>
			{/each}
		</div>
	</section>

	<section class="meal-log stagger">
		{#each fitness.today as item}
			<article class="meal-row">
				<div class="meal-meta">{item.meal}</div>
				<div class="meal-main">
					<h3>{item.detail}</h3>
					<p>{item.value}</p>
				</div>
			</article>
		{/each}
	</section>
</div>

<style>
	.fitness-layout {
		display: grid;
		grid-template-columns: 380px minmax(0, 1fr);
		gap: 18px;
	}

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

	.macro-board {
		padding: 24px;
		position: sticky;
		top: 28px;
		height: fit-content;
	}

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

	.macro-board h2 {
		margin: 8px 0 20px;
		font-size: 3rem;
		line-height: 0.95;
		letter-spacing: -0.05em;
	}

	.macro-list {
		display: grid;
		gap: 14px;
	}

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

	.macro-value,
	.meal-main h3 {
		margin: 4px 0 0;
		font-size: 1.6rem;
		line-height: 1.05;
		letter-spacing: -0.04em;
	}

	.macro-target,
	.meal-main p {
		color: #6b6256;
	}

	.recovery-band {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin-top: 20px;
	}

	.recovery-band span {
		padding: 10px 14px;
		border-radius: 999px;
		background: rgba(68, 95, 86, 0.1);
		color: #34443d;
		font-size: 13px;
	}

	.meal-log {
		padding: 18px;
		display: grid;
		gap: 12px;
	}

	.meal-row {
		display: grid;
		grid-template-columns: 120px minmax(0, 1fr);
		gap: 14px;
		padding: 20px;
		border-radius: 22px;
		background: linear-gradient(135deg, rgba(255, 251, 246, 0.92), rgba(236, 244, 238, 0.55));
	}

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

		.macro-board {
			position: static;
		}
	}

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