<script lang="ts">
    import * as m from "$lib/paraglide/messages";
    import { LanguageSwitcher } from "$lib/components";

    // Game data
    const games = [
        {
            nameKey: "kuldvillak" as const,
            href: "/kuldvillak",
            image: "/images/kuldvillak-cover.jpg",
            available: true,
        },
        {
            nameKey: "rooside_soda" as const,
            href: "/rooside-soda",
            image: "/images/rooside-soda-cover.jpg",
            available: false,
        },
    ];

    function getGameName(key: "kuldvillak" | "rooside_soda"): string {
        return key === "kuldvillak"
            ? m.game_kuldvillak()
            : m.game_rooside_soda();
    }
</script>

<svelte:head>
    <title>Ultimate Gaming</title>
</svelte:head>

<LanguageSwitcher />

<div class="min-h-screen flex items-center justify-center bg-[#0a121f]">
    <div class="flex flex-col items-center gap-16">
        <!-- Title -->
        <div
            class="flex flex-col items-center text-center text-white font-['Comic_Sans_MS',cursive,sans-serif] font-bold italic capitalize"
        >
            <h1 class="text-[64px] max-md:text-[40px] m-0">{m.app_title()}</h1>
            <p class="text-[48px] max-md:text-[28px] m-0">{m.app_version()}</p>
        </div>

        <!-- Games Grid -->
        <div class="flex gap-8 flex-wrap justify-center">
            {#each games as game}
                <div class="flex flex-col items-center gap-4">
                    <span
                        class="font-['Comic_Sans_MS',cursive,sans-serif] font-bold italic text-2xl text-white capitalize"
                    >
                        {getGameName(game.nameKey)}
                    </span>
                    {#if game.available}
                        <a
                            href={game.href}
                            class="block w-[240px] h-[240px] max-md:w-[180px] max-md:h-[180px] border-8 border-[#003B9B] overflow-hidden transition-all duration-200 hover:scale-105 hover:border-[#FFAB00]"
                        >
                            <img
                                src={game.image}
                                alt={getGameName(game.nameKey)}
                                class="w-full h-full object-cover"
                            />
                        </a>
                    {:else}
                        <div
                            class="relative w-[240px] h-[240px] max-md:w-[180px] max-md:h-[180px] border-8 border-[#003B9B] overflow-hidden opacity-50"
                        >
                            <img
                                src={game.image}
                                alt={getGameName(game.nameKey)}
                                class="w-full h-full object-cover"
                            />
                            <span
                                class="absolute inset-0 flex items-center justify-center bg-black/70 text-white font-['Comic_Sans_MS',cursive,sans-serif] font-bold text-2xl uppercase"
                            >
                                {m.coming_soon()}
                            </span>
                        </div>
                    {/if}
                </div>
            {/each}
        </div>
    </div>
</div>
