<script lang="ts">
	import { page } from '$app/state';

	const isActive = (prefix: string) => page.url.pathname.startsWith(prefix);
</script>

<header class="topnav" role="banner">
	<div class="topnav-inner">
		<a href="/app" class="wordmark" aria-label="Home">
			<span class="wordmark-text">Language Learning App</span>
		</a>

		<nav aria-label="Main navigation">
			<ul class="nav-links" role="list">
				<li>
					<a
						href="/app/articles"
						class="nav-link"
						class:is-active={isActive('/app/articles')}
						aria-current={isActive('/app/articles') ? 'page' : undefined}
					>
						Articles
					</a>
				</li>
				<li>
					<a
						href="/app/profile"
						class="nav-link"
						class:is-active={isActive('/app/profile')}
						aria-current={isActive('/app/profile') ? 'page' : undefined}
					>
						Profile
					</a>
				</li>
			</ul>
		</nav>
	</div>
</header>

<style>
	.topnav {
		position: sticky;
		top: 0;
		z-index: 100;
		background-color: var(--glass-bg);
		backdrop-filter: blur(var(--glass-blur));
		-webkit-backdrop-filter: blur(var(--glass-blur));
		box-shadow: 0 1px 0 color-mix(in srgb, var(--color-outline-variant) 35%, transparent);
	}

	.topnav-inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-6);
		max-width: 82rem;
		margin: 0 auto;
		padding: 0 var(--space-6);
		height: 3.25rem;
	}

	/* --- Wordmark --- */

	.wordmark {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		text-decoration: none;
		flex-shrink: 0;
	}

	.mark {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 1.625rem;
		height: 1.625rem;
		border-radius: 50%;
		background-color: var(--color-primary);
		color: var(--color-on-primary);
		font-family: var(--font-display);
		font-size: 0.75rem;
		font-weight: var(--weight-bold);
		letter-spacing: 0;
		flex-shrink: 0;
	}

	.wordmark-text {
		font-family: var(--font-display);
		font-size: var(--text-body-md);
		font-weight: var(--weight-semibold);
		color: var(--color-on-surface);
		letter-spacing: var(--tracking-wide);
	}

	/* --- Nav links --- */

	.nav-links {
		display: flex;
		align-items: center;
		gap: var(--space-1);
		list-style: none;
	}

	.nav-link {
		display: inline-block;
		padding: var(--space-1) var(--space-3);
		font-family: var(--font-label);
		font-size: var(--text-label-lg);
		font-weight: var(--weight-medium);
		letter-spacing: var(--tracking-wide);
		color: var(--color-on-surface-variant);
		text-decoration: none;
		border-radius: var(--radius-md);
		transition:
			color var(--duration-fast) var(--ease-standard),
			background-color var(--duration-fast) var(--ease-standard);
	}

	.nav-link:hover {
		color: var(--color-on-surface);
		background-color: color-mix(in srgb, var(--color-on-surface) 5%, transparent);
	}

	.nav-link.is-active {
		color: var(--color-primary);
		background-color: color-mix(in srgb, var(--color-primary) 8%, transparent);
	}

	@media (max-width: 640px) {
		.topnav-inner {
			padding: 0 var(--space-4);
			gap: var(--space-3);
		}

		.wordmark-text {
			display: none;
		}
	}
</style>
