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

<div class="tasks-layout">
	<section class="project-strip reveal">
		<div class="section-label">Projects</div>
		<div class="project-list">
			{#each tasks.projects as item}
				<div class="project-pill">{item}</div>
			{/each}
		</div>
	</section>

	<section class="board stagger">
		{#each tasks.columns as column}
			<div class="column">
				<div class="column-head">
					<div class="column-label">{column.name}</div>
					<div class="column-count">{column.items.length}</div>
				</div>
				<div class="column-items">
					{#each column.items as item}
						<article class="task-card">
							<h3>{item.title}</h3>
							<p>{item.meta}</p>
						</article>
					{/each}
				</div>
			</div>
		{/each}
	</section>
</div>

<style>
	.tasks-layout { display: grid; gap: 18px; }
	.project-strip, .board {
		border-radius: 28px;
		border: 1px solid rgba(35,26,17,0.1);
		background: rgba(255,252,248,0.68);
		backdrop-filter: blur(14px);
	}
	.project-strip { padding: 22px; }
	.section-label, .column-label {
		font-size: 11px;
		text-transform: uppercase;
		letter-spacing: 0.12em;
		color: #8b7b6a;
	}
	.project-list {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		margin-top: 14px;
	}
	.project-pill {
		padding: 10px 14px;
		border-radius: 999px;
		background: rgba(68,95,86,0.1);
		color: #34443d;
		font-size: 13px;
	}
	.board {
		padding: 18px;
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 14px;
	}
	.column {
		padding: 16px;
		border-radius: 22px;
		background: linear-gradient(140deg, rgba(255,251,246,0.92), rgba(241,234,227,0.58));
	}
	.column-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 14px;
	}
	.column-count {
		font-size: 13px;
		color: #6b6256;
	}
	.column-items {
		display: grid;
		gap: 10px;
	}
	.task-card {
		padding: 16px;
		border-radius: 18px;
		background: rgba(255,255,255,0.7);
		border: 1px solid rgba(35,26,17,0.08);
	}
	.task-card h3 {
		margin: 0 0 8px;
		font-size: 1.1rem;
		line-height: 1.2;
		letter-spacing: -0.03em;
	}
	.task-card p {
		margin: 0;
		color: #6b6256;
		line-height: 1.5;
	}
	@media (max-width: 920px) {
		.board { grid-template-columns: 1fr; }
	}
</style>
