<script>
	import { page } from '$app/stores';
	import { scrollProgress } from '$lib/stores/scrollStore';

	let progress = $state(0);

	$effect(() => {
		const unsubscribe = scrollProgress.subscribe(value => {
			progress = value;
		});
		return unsubscribe;
	});

	// Calculate font size: starts at 20px, grows to 24px
	const fontSize = $derived(20 + (progress * 4));
	// Calculate background opacity: starts at 0, grows to 0.95
	const bgOpacity = $derived(progress * 0.95);

	// Check if a route is active
	function isActive(path) {
		return $page.url.pathname === path;
	}
</script>

<div 
	class="header" 
	id="header"
	style="background-color: rgba(20, 24, 43, {bgOpacity});"
>
	<div class="container">
		<ul class="nav" id="nav" style="font-size: {fontSize}px;">
			<li>
				<a href="/" class:active={isActive('/')}>Home</a>
			</li>
			<li>
				<a href="/leaderboards" class:active={isActive('/leaderboards')}>Leaderboards</a>
			</li>
			<li>
				<a href="/store" class:active={isActive('/store')}>Store</a>
			</li>
			<li>
				<a href="/help" class:active={isActive('/help')}>Help</a>
			</li>
			<li>
				<a href="https://discord.gg/your-server" target="_blank" rel="noopener noreferrer">Discord</a>
			</li>
		</ul>
	</div>
</div>

<style lang="scss">
	.header {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 3;
		transition: background-color 0.1s ease;

		.nav {
			padding: 0;
			margin: 0;
			list-style: none;
			display: flex;
			justify-content: center;
			padding: 20px 0;
			color: #9B959F;
			transition: font-size 0.1s ease;

			li,
			li a {
				display: inline-flex;
				color: inherit;
			}

			li a {
				padding: 10px 30px;
				font-weight: 500;
				text-decoration: none;
				transition: color 0.2s ease;
				position: relative;

				&:hover {
					color: #70B0D0;
				}

				&.active {
					color: #70B0D0;
					
					&::after {
						content: '';
						position: absolute;
						bottom: 8px;
						left: 30px;
						right: 30px;
						height: 2px;
						background: #70B0D0;
					}
				}

				&[target="_blank"] {
					&::before {
						content: '↗';
						margin-right: 4px;
						font-size: 0.85em;
						opacity: 0.7;
					}
				}
			}
		}
	}
</style>