<script lang="ts">
	import { Button } from '$lib/components/ui/button';
	import LanguageSelect from '$lib/components/LanguageSelect.svelte';
	import Logo from '$lib/components/Logo.svelte';
	import { AtSign, BookOpenText, Heart, Home, Map } from 'lucide-svelte';
	import { _, locale } from 'svelte-i18n';
	import { getURLForLanguage } from '$lib/utils';
</script>

<footer class="w-full">
	<div class="mx-6 border-t">
		<div class="mx-12 py-10 flex flex-row flex-wrap justify-between gap-x-10 gap-y-6">
			<div class="grow flex flex-col items-start">
				<Logo class="h-8" width="153" />
				<Button
					variant="link"
					class="h-6 px-0 text-muted-foreground"
					href="https://github.com/gpxstudio/gpx.rnmkcy.eu/blob/main/LICENSE"
					target="_blank"
				>
					MIT © 2024 gpx.rnmkcy.eu
				</Button>
				<LanguageSelect class="w-40 mt-3" />
			</div>
			<div class="grow max-w-2xl flex flex-row flex-wrap justify-between gap-x-10 gap-y-6">
				<div class="flex flex-col items-start gap-1">
					<span class="font-semibold">{$_('homepage.website')}</span>
					<Button
						variant="link"
						class="h-6 px-0 text-muted-foreground"
						href={getURLForLanguage($locale, '/')}
					>
						<Home size="16" class="mr-1" />
						{$_('homepage.home')}
					</Button>
					<Button
						variant="link"
						class="h-6 px-0 text-muted-foreground"
						href={getURLForLanguage($locale, '/app')}
					>
						<Map size="16" class="mr-1" />
						{$_('homepage.app')}
					</Button>
					<Button
						variant="link"
						class="h-6 px-0 text-muted-foreground"
						href={getURLForLanguage($locale, '/help')}
					>
						<BookOpenText size="16" class="mr-1" />
						{$_('menu.help')}
					</Button>
				</div>
				<div class="flex flex-col items-start gap-1" id="contact">
					<span class="font-semibold">{$_('homepage.contact')}</span>
					<Button
						variant="link"
						class="h-6 px-0 text-muted-foreground"
						href="https://www.reddit.com/r/gpxstudio/"
						target="_blank"
					>
						<Logo company="reddit" class="h-4 mr-1 fill-muted-foreground" />
						{$_('homepage.reddit')}
					</Button>
					<Button
						variant="link"
						class="h-6 px-0 text-muted-foreground"
						href="https://facebook.com/gpx.rnmkcy.eu"
						target="_blank"
					>
						<Logo company="facebook" class="h-4 mr-1 fill-muted-foreground" />
						{$_('homepage.facebook')}
					</Button>
					<Button
						variant="link"
						class="h-6 px-0 text-muted-foreground"
						href="https://x.com/gpxstudio"
						target="_blank"
					>
						<Logo company="x" class="h-4 mr-1 fill-muted-foreground" />
						{$_('homepage.x')}
					</Button>
					<Button
						variant="link"
						class="h-6 px-0 text-muted-foreground"
						href="mailto:hello@gpx.rnmkcy.eu"
						target="_blank"
					>
						<AtSign size="16" class="mr-1" />
						{$_('homepage.email')}
					</Button>
				</div>
				<div class="flex flex-col items-start gap-1">
					<span class="font-semibold">{$_('homepage.contribute')}</span>
					<Button
						variant="link"
						class="h-6 px-0 text-muted-foreground"
						href="https://ko-fi.com/gpxstudio"
						target="_blank"
					>
						<Heart size="16" class="mr-1" />
						{$_('menu.donate')}
					</Button>
					<Button
						variant="link"
						class="h-6 px-0 text-muted-foreground"
						href="https://crowdin.com/project/gpxstudio"
						target="_blank"
					>
						<Logo company="crowdin" class="h-4 mr-1 fill-muted-foreground" />
						{$_('homepage.crowdin')}
					</Button>
					<Button
						variant="link"
						class="h-6 px-0 text-muted-foreground"
						href="https://github.com/gpxstudio/gpx.rnmkcy.eu"
						target="_blank"
					>
						<Logo company="github" class="h-4 mr-1 fill-muted-foreground" />
						{$_('homepage.github')}
					</Button>
				</div>
			</div>
		</div>
	</div>
</footer>
