<script lang="ts">
	import Logo from '$lib/icons/Logo.svelte';
	import { GithubIcon } from 'lucide-svelte';
</script>

<header class="sticky top-0 z-10 border-b border-gray-200 bg-white/80 backdrop-blur-sm">
	<div class="px-6 py-4">
		<div class="flex w-full items-center justify-between">
			<div class="flex items-center gap-3">
				<Logo />
				<div>
					<h1 class="text-2xl font-bold text-black">Marka</h1>
					<p class="text-sm text-gray-600">Bidirectional Markdown ↔ JSON Parser</p>
				</div>
			</div>
			<a href="https://github.com/jim-fx/marka" target="_blank" rel="noopener noreferrer">
				<GithubIcon class="h-6 w-6 text-gray-600 transition-colors duration-200 hover:text-black" />
			</a>
		</div>
	</div>
</header>
