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

<div class="reader-layout">
	<aside class="reader-sidebar reveal">
		<div class="section-label">Reading queues</div>
		<div class="nav-list">
			{#each reader.nav as item}
				<div class="nav-row">
					<span>{item.label}</span>
					<span>{item.count}</span>
				</div>
			{/each}
		</div>

		<div class="section-label second">Feeds</div>
		<div class="feed-list">
			{#each reader.feeds as item}
				<div class="feed-row">
					<span>{item.name}</span>
					<span>{item.count}</span>
				</div>
			{/each}
		</div>
	</aside>

	<section class="reader-list stagger">
		{#each reader.articles as item, index}
			<article class:selected={index === 0} class="article-card">
				<div class="article-meta">{item.source} · {item.time}</div>
				<h2>{item.title}</h2>
				<p>{item.excerpt}</p>
			</article>
		{/each}
	</section>

	<section class="reader-detail reveal">
		<div class="detail-kicker">Focused article</div>
		<h3>{reader.articles[0].title}</h3>
		<p>{reader.articles[0].excerpt}</p>
		<div class="detail-body">
			The mock direction here is a three-part reading surface: narrow source navigation, a dense but calm article list, and a wide reading panel with room for starring, archiving, and sending to your knowledge system.
		</div>
	</section>
</div>

<style>
	.reader-layout {
		display: grid;
		grid-template-columns: 260px minmax(0, 0.8fr) minmax(0, 1.1fr);
		gap: 18px;
	}
	.reader-sidebar, .reader-list, .reader-detail {
		border-radius: 28px;
		border: 1px solid rgba(35,26,17,0.1);
		background: rgba(255,252,248,0.68);
		backdrop-filter: blur(14px);
	}
	.reader-sidebar, .reader-detail { padding: 22px; }
	.reader-list {
		padding: 18px;
		display: grid;
		gap: 12px;
	}
	.section-label, .detail-kicker, .article-meta {
		font-size: 11px;
		text-transform: uppercase;
		letter-spacing: 0.12em;
		color: #8b7b6a;
	}
	.second { margin-top: 22px; }
	.nav-list, .feed-list { display: grid; gap: 8px; margin-top: 12px; }
	.nav-row, .feed-row {
		display: flex;
		justify-content: space-between;
		padding: 10px 12px;
		border-radius: 14px;
		background: rgba(255,255,255,0.6);
		color: #6b6256;
	}
	.article-card {
		padding: 18px;
		border-radius: 22px;
		background: rgba(255,255,255,0.62);
		border: 1px solid rgba(35,26,17,0.08);
	}
	.article-card.selected {
		background: linear-gradient(145deg, rgba(255,248,242,0.9), rgba(245,232,221,0.6));
	}
	.article-card h2, .reader-detail h3 {
		margin: 8px 0 10px;
		font-size: clamp(1.4rem, 2.5vw, 2.2rem);
		line-height: 1.02;
		letter-spacing: -0.04em;
	}
	.article-card p, .reader-detail p, .detail-body {
		color: #6b6256;
		line-height: 1.7;
	}
	.detail-body {
		margin-top: 18px;
		padding-top: 18px;
		border-top: 1px solid rgba(35,26,17,0.09);
	}
	@media (max-width: 1100px) {
		.reader-layout { grid-template-columns: 1fr; }
	}
</style>
