<script>
	import '../app.css';
	import { page } from '$app/stores';
	import { goto } from '$app/navigation';
	import { base } from '$app/paths';
	import { onMount } from 'svelte';
	
	let { children } = $props();
	
	// Keyboard shortcuts
	onMount(() => {
		function handleKeyPress(e) {
			// Ignore if user is typing in an input field
			if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
				return;
			}
			
			const currentPath = $page.url.pathname;
			
			switch (e.key.toLowerCase()) {
				case 's':
					goto(`${base}/search`);
					break;
				case 'b':
					// Only navigate to books if not already on books page
					if (!currentPath.includes('/books')) {
						goto(`${base}/books`);
					}
					break;
				case 'a':
					// Only navigate to artworks if not already on artworks page
					if (!currentPath.includes('/artworks')) {
						goto(`${base}/artworks`);
					}
					break;
				case 'l':
					goto(`${base}/list`);
					break;
				case 'p':
					// Only navigate to people if not already on people page
					if (!currentPath.includes('/people')) {
						goto(`${base}/people`);
					}
					break;
				case 'c':
					// Only navigate to cosmic if not already on cosmic page
					if (!currentPath.includes('/cosmic')) {
						goto(`${base}/cosmic`);
					}
					break;
				case 'h':
					// Only navigate to humanity if not already on humanity page
					if (!currentPath.includes('/humanity')) {
						goto(`${base}/humanity`);
					}
					break;
			}
		}
		
		window.addEventListener('keydown', handleKeyPress);
		
		return () => {
			window.removeEventListener('keydown', handleKeyPress);
		};
	});
</script>

<svelte:head>
	<title>Timeline - Interactive Historical Timeline</title>
	<meta name="description" content="Explore history through an interactive timeline of influential people, books, and artworks" />
	
	<!-- Structured Data -->
	{@html `<script type="application/ld+json">
	{
		"@context": "https://schema.org",
		"@type": "WebSite",
		"name": "Timeline",
		"description": "An interactive timeline visualization of historical figures, influential books, and famous artworks throughout history",
		"url": "https://yourdomain.com/timeline/",
		"potentialAction": {
			"@type": "SearchAction",
			"target": "https://yourdomain.com/timeline/search?q={search_term_string}",
			"query-input": "required name=search_term_string"
		}
	}
	<\/script>`}
</svelte:head>

{@render children()}
