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

<footer class="w-full px-12 py-10 border-t flex flex-col items-center">
    <div class="w-full max-w-5xl 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 has-[>svg]:px-0 text-muted-foreground"
                href="https://github.com/gpxstudio/gpx.studio/blob/main/LICENSE"
                target="_blank"
            >
                MIT © 2026 gpx.studio
            </Button>
            <div class="mt-3 flex flex-row gap-1.5">
                <LanguageSelect />
                <ModeSwitch />
            </div>
        </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">{i18n._('homepage.website')}</span>
                <Button
                    variant="link"
                    class="h-6 px-0 has-[>svg]:px-0 text-muted-foreground"
                    href={getURLForLanguage(i18n.lang, '/')}
                >
                    <House size="16" />
                    {i18n._('homepage.home')}
                </Button>
                <Button
                    data-sveltekit-reload
                    variant="link"
                    class="h-6 px-0 has-[>svg]:px-0 text-muted-foreground"
                    href={getURLForLanguage(i18n.lang, '/app')}
                >
                    <Map size="16" />
                    {i18n._('homepage.app')}
                </Button>
                <Button
                    variant="link"
                    class="h-6 px-0 has-[>svg]:px-0 text-muted-foreground"
                    href={getURLForLanguage(i18n.lang, '/help')}
                >
                    <BookOpenText size="16" />
                    {i18n._('menu.help')}
                </Button>
            </div>
            <div class="flex flex-col items-start gap-1" id="contact">
                <span class="font-semibold">{i18n._('homepage.contact')}</span>
                <Button
                    variant="link"
                    class="h-6 px-0 has-[>svg]:px-0 text-muted-foreground"
                    href="https://www.reddit.com/r/gpxstudio/"
                    target="_blank"
                >
                    <Logo company="reddit" class="h-4 fill-muted-foreground" />
                    {i18n._('homepage.reddit')}
                </Button>
                <Button
                    variant="link"
                    class="h-6 px-0 has-[>svg]:px-0 text-muted-foreground"
                    href="https://facebook.com/gpx.studio"
                    target="_blank"
                >
                    <Logo company="facebook" class="h-4 fill-muted-foreground" />
                    {i18n._('homepage.facebook')}
                </Button>
                <Button
                    variant="link"
                    class="h-6 px-0 has-[>svg]:px-0 text-muted-foreground"
                    href="mailto:hello@gpx.studio"
                    target="_blank"
                >
                    <AtSign size="16" />
                    {i18n._('homepage.email')}
                </Button>
            </div>
            <div class="flex flex-col items-start gap-1">
                <span class="font-semibold">{i18n._('homepage.contribute')}</span>
                <Button
                    variant="link"
                    class="h-6 px-0 has-[>svg]:px-0 text-muted-foreground"
                    href="https://opencollective.com/gpxstudio"
                    target="_blank"
                >
                    <Heart size="16" />
                    {i18n._('menu.donate')}
                </Button>
                <Button
                    variant="link"
                    class="h-6 px-0 has-[>svg]:px-0 text-muted-foreground"
                    href="https://crowdin.com/project/gpxstudio"
                    target="_blank"
                >
                    <Logo company="crowdin" class="h-4 fill-muted-foreground" />
                    {i18n._('homepage.crowdin')}
                </Button>
                <Button
                    variant="link"
                    class="h-6 px-0 has-[>svg]:px-0 text-muted-foreground"
                    href="https://github.com/gpxstudio/gpx.studio"
                    target="_blank"
                >
                    <Logo company="github" class="h-4 fill-muted-foreground" />
                    {i18n._('homepage.github')}
                </Button>
            </div>
        </div>
    </div>
</footer>
