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

<div class="settings-layout">
	<section class="settings-panel reveal">
		<div class="section-label">Account</div>
		<div class="row-list">
			{#each settings.account as item}
				<div class="setting-row">
					<span>{item.label}</span>
					<strong>{item.value}</strong>
				</div>
			{/each}
		</div>
	</section>

	<section class="settings-panel stagger">
		<div class="section-label">Connections</div>
		<div class="row-list">
			{#each settings.connections as item}
				<div class="setting-row">
					<span>{item.name}</span>
					<strong>{item.state}</strong>
				</div>
			{/each}
		</div>
	</section>

	<section class="settings-panel stagger">
		<div class="section-label">Goals</div>
		<div class="goal-grid">
			{#each settings.goals as item}
				<div class="goal-card">
					<div class="goal-label">{item.label}</div>
					<div class="goal-value">{item.value}</div>
				</div>
			{/each}
		</div>
	</section>
</div>

<style>
	.settings-layout {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 18px;
	}
	.settings-panel {
		padding: 22px;
		border-radius: 28px;
		border: 1px solid rgba(35,26,17,0.1);
		background: rgba(255,252,248,0.68);
		backdrop-filter: blur(14px);
	}
	.section-label, .goal-label {
		font-size: 11px;
		text-transform: uppercase;
		letter-spacing: 0.12em;
		color: #8b7b6a;
	}
	.row-list {
		display: grid;
		gap: 12px;
		margin-top: 18px;
	}
	.setting-row {
		display: flex;
		justify-content: space-between;
		gap: 12px;
		padding-top: 12px;
		border-top: 1px solid rgba(35,26,17,0.09);
		color: #6b6256;
	}
	.setting-row strong { color: #1e1812; }
	.goal-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
		margin-top: 18px;
	}
	.goal-card {
		padding: 18px;
		border-radius: 22px;
		background: linear-gradient(145deg, rgba(255,248,242,0.92), rgba(245,232,221,0.56));
	}
	.goal-value {
		margin-top: 8px;
		font-size: 1.8rem;
		letter-spacing: -0.04em;
	}
	@media (max-width: 980px) {
		.settings-layout { grid-template-columns: 1fr; }
	}
</style>
