<script lang="ts">
	import TerminalTUI from '$lib/components/TerminalTUI.svelte';
	import type { TerminalLine } from '$lib/components/tui/types';
	import { user, skills, site, navigation } from '$lib/config';
	import { getPageSpeedMultiplier, getPageAutoscroll } from '$lib';
	import { colorTheme } from '$lib/stores/theme';

	const speed = getPageSpeedMultiplier('home');
	const autoscroll = getPageAutoscroll('home');

	// Build the terminal lines for the home page
	const lines: TerminalLine[] = [
		// neofetch style intro
		{ type: 'command', content: 'bash ~/startup.sh', delay: 300 },
        
        // Color palette (moved below the art/stats block)
        { type: 'blank', content: '' },
        { type: 'output', content: '(&red)███(&)(&orange)███(&)(&yellow)███(&)(&green)███(&)(&cyan)███(&)(&blue)███(&)(&magenta)███(&)(&pink)███(&)' },
        { type: 'output', content: '(&dim,red)███(&)(&dim,orange)███(&)(&dim,yellow)███(&)(&dim,green)███(&)(&dim,cyan)███(&)(&dim,blue)███(&)(&dim,magenta)███(&)(&dim,pink)███(&)' },
		
		{ type: 'blank', content: '' },	
        { type: 'header', content: `Welcome to ${user.displayname}'s Portfolio` },	
        { type: 'blank', content: '' },
        { type: 'output', content: `(&muted)${user.bio}(&)` },
        { type: 'blank', content: '' },

		{ type: 'divider', content: 'NAVIGATION' },
		{ type: 'blank', content: '' },
		
		// Interactive navigation buttons
		...navigation.map(nav => ({
			type: 'button' as const,
			content: nav.name,
			icon: nav.icon === '📁' ? 'mdi:folder' : nav.icon === '🎨' ? 'mdi:palette' : 'mdi:trophy',
			style: 'primary' as const,
			href: nav.path
		})),
	];
</script>

<svelte:head>
	<title>{site.title}</title>
	<meta name="description" content={site.description} />
</svelte:head>

<div class="home-container">
	<TerminalTUI {lines} title="~" interactive={true} {speed} {autoscroll} />
</div>

<style>
	.home-container {
		padding: 2rem 1rem;
		min-height: calc(100vh - 60px);
	}
</style>
