<script setup>
import Card from '~/components/Card.vue';
import FancyButton from '~/components/FancyButton.vue';
import FancyCard from '~/components/FancyCard.vue';
import GroupCard from '~/components/GroupCard.vue';
import JustifyCenter from '~/components/JustifyCenter.vue';
</script>

<template>
    <div class="flex flex-col items-center text-center">
        <!-- TODO: This page should be more informative. Presently, there is zero information about what people are looking at. -->
        <!-- Resources -->
        <GroupCard>
            <h2 class="text-center">Resources</h2>
            <JustifyCenter class="text-pretty">
                <!-- Sharkey -->
                <FancyCard color="blue" class="w-[34rem]">
                    <template #header>
                        <h3>Sharkey</h3>
                    </template>
                    <template #default>
                        <p>
                            Twitter alternative without a flood of Nazis.<br /><br />
                        We manually approve all members + verify them outside of the net, too. Fam & friends only to
                        make an account in our space, but you can use any Sharkey/Mastodon/etc instance to register
                        elsewhere and talk to us.
                        </p>
                    </template>
                    <template #footer>
                        <a href="https://social.smgames.club">
                            <FancyButton color="blue">
                                Go to Platform
                            </FancyButton>
                        </a>
                    </template>
                </FancyCard>
                <!-- Servers -->
                <FancyCard color="maroon" class="w-[34rem]" cardClass="bg-surface-1">
                    <template #header>
                        <h3>Servers</h3>
                    </template>
                    <template #default>
                        <p>
                            Privately hosted servers for Minecraft, Garry's Mod, TF2, Terraria, and more.
                            Clicking each game shows instructions to get on.
                        </p>
                    </template>
                    <template #footer>
                        <a href="/servers">
                            <FancyButton color="maroon">
                                See our Servers
                            </FancyButton>
                        </a>
                    </template>
                </FancyCard>
            </JustifyCenter>
        </GroupCard>

        <!-- Projects -->
        <GroupCard>
            <h2 class="text-center">Projects</h2>
            <JustifyCenter class="text-pretty">
                <!-- Forgejo -->
                <FancyCard color="red" class="w-[34rem]">
                    <template #header>
                        <h3>Forgejo</h3>
                    </template>
                    <template #default>
                        <p>
                            Access our code repositories and collaborate on development with our Forgejo instance.
                        </p>
                    </template>
                    <template #footer>
                        <a href="https://git.smgames.club" target="_blank">
                            <FancyButton color="red">
                                Visit Forgejo
                            </FancyButton>
                        </a>
                    </template>
                </FancyCard>
                <!-- Game Development-->
                <FancyCard color="mauve" class="w-[34rem]">
                    <template #header>
                        <h3>Game Development</h3>
                    </template>
                    <template #default>
                        <p>
                            Explore the games and tools actively being developed by our team.
                        </p>
                    </template>
                    <template #footer>
                        <a href="/projects">
                            <FancyButton color="mauve">
                                View Projects
                            </FancyButton>
                        </a>
                    </template>
                </FancyCard>
            </JustifyCenter>
        </GroupCard>
    </div>
</template>