<template>
    <div class="w-screen h-full flex items-center justify-start flex-col">
        <div class="w-1 h-10 shrink-10" />

        <div
            class="w-[90vw] sm:w-[80vw] m:w-[70vw] lg:w-[60vw] xl:w-[50vw] border-solid border-black border-1 p-3 shrink-0 overflow-auto relative"
        >
            <div class="absolute top-2 right-2 flex gap-x-2">
                <button
                    v-for="locale in locales.filter(
                        (l) => l.code !== $i18n.locale
                    )"
                    @click="setLocale(locale.code)"
                    class="cursor-pointer underline"
                >
                    {{ locale.code.toUpperCase() }}
                </button>
            </div>

            <p class="mr-16">{{ $t("main.note.accessibility") }}</p>
            <div class="h-4" />

            <h1 class="text-xl">
                {{ $t("main.intro.0") }}
                <span class="font-bold">{{ $t("main.intro.1") }}</span> ({{ $t("main.intro.2") }}),
                {{ $t("main.intro.3") }} {{ years }}{{ $t("main.intro.4") }}
            </h1>
            <p>{{ $t("main.residence") }}</p>
            <a href="/cv1.pdf" target="_blank" class="underline">
                {{ $t("main.cv") }}
            </a>
            <div class="h-4" />

            <p>{{ $t("main.contacts.title") }}</p>
            <ul class="list-none">
                <li>
                    <a
                        href="mailto:daniel@svitan.dev"
                        target="_blank"
                        class="underline"
                    >
                        daniel@svitan.dev
                    </a>
                </li>
                <li>
                    <a
                        href="tel:+421948309804"
                        target="_blank"
                        class="underline"
                    >
                        +421 948 309 804</a
                    >
                    &nbsp;{{ $t("main.contacts.signal") }}
                </li>
                <li>
                    <a
                        href="https://matrix.to/#/@selfsigned-ash:svitan.dev"
                        target="_blank"
                        class="underline"
                    >
                        @selfsigned-ash:svitan.dev
                    </a>
                </li>
            </ul>
            <div class="h-4" />

            <p>{{ $t("main.socials.title") }}</p>
            <ul class="list-none">
                <li>
                    <a
                        href="https://github.com/Streamer272"
                        target="_blank"
                        class="underline"
                    >
                        GitHub
                    </a>
                </li>
                <li>
                    <a
                        href="https://gitea.svitan.dev/Streamer272"
                        target="_blank"
                        class="underline"
                    >
                        Gitea
                    </a>
                </li>
                <li>
                    <a
                        href="https://codeberg.org/selfsigned-ash"
                        target="_blank"
                        class="underline"
                    >
                        Codeberg
                    </a>
                </li>
                <li>
                    <a
                        href="https://kolektiva.social/@selfsigned_ash"
                        rel="me"
                        target="_blank"
                        class="underline"
                    >
                        Mastodon
                    </a>
                </li>
                <li>
                    <a
                        href="https://pixelfed.de/selfsigned-ash"
                        target="_blank"
                        class="underline"
                    >
                        Pixelfed
                    </a>
                </li>
            </ul>
            <div class="h-6" />
        </div>
    </div>
</template>

<script lang="ts" setup>
const { locales, setLocale } = useI18n();

const now = new Date();
let years = now.getFullYear() - 2006 - 1;
if (now.getMonth() > 7 || (now.getMonth() === 7 && now.getDate() >= 23)) {
    years++;
}
let a = years === 18 ? "an " : "a ";
</script>
