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

<div class="media-layout">
	<section class="tab-strip reveal">
		{#each media.tabs as item, index}
			<div class:active={index === 0} class="tab-pill">{item}</div>
		{/each}
	</section>

	<section class="media-grid">
		<div class="media-panel stagger">
			<div class="panel-head">
				<div class="section-label">Books</div>
				<h2>Downloads</h2>
			</div>
			{#each media.books as item}
				<article class="media-card">
					<h3>{item.title}</h3>
					<p>{item.detail}</p>
				</article>
			{/each}
		</div>

		<div class="media-panel stagger">
			<div class="panel-head">
				<div class="section-label">Music</div>
				<h2>Saved listening</h2>
			</div>
			{#each media.music as item}
				<article class="media-card">
					<h3>{item.title}</h3>
					<p>{item.detail}</p>
				</article>
			{/each}
		</div>

		<div class="media-panel stagger">
			<div class="panel-head">
				<div class="section-label">Library</div>
				<h2>Curated shelves</h2>
			</div>
			{#each media.library as item}
				<article class="media-card">
					<h3>{item.title}</h3>
					<p>{item.detail}</p>
				</article>
			{/each}
		</div>
	</section>
</div>

<style>
	.media-layout { display: grid; gap: 18px; }
	.tab-strip, .media-panel {
		border-radius: 28px;
		border: 1px solid rgba(35,26,17,0.1);
		background: rgba(255,252,248,0.68);
		backdrop-filter: blur(14px);
	}
	.tab-strip {
		padding: 14px;
		display: flex;
		gap: 10px;
	}
	.tab-pill {
		padding: 10px 14px;
		border-radius: 999px;
		color: #6b6256;
		background: rgba(255,255,255,0.5);
	}
	.tab-pill.active {
		color: #1e1812;
		background: rgba(179,92,50,0.12);
	}
	.media-grid {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 18px;
	}
	.media-panel {
		padding: 18px;
		display: grid;
		gap: 12px;
	}
	.section-label {
		font-size: 11px;
		text-transform: uppercase;
		letter-spacing: 0.12em;
		color: #8b7b6a;
	}
	.panel-head h2 {
		margin: 8px 0 0;
		font-size: 1.8rem;
		line-height: 1.02;
		letter-spacing: -0.04em;
	}
	.media-card {
		padding: 18px;
		border-radius: 22px;
		background: linear-gradient(145deg, rgba(255,251,246,0.92), rgba(236,244,238,0.56));
	}
	.media-card h3 {
		margin: 0 0 8px;
		font-size: 1.1rem;
		letter-spacing: -0.03em;
	}
	.media-card p {
		margin: 0;
		color: #6b6256;
		line-height: 1.6;
	}
	@media (max-width: 980px) {
		.media-grid { grid-template-columns: 1fr; }
	}
</style>
