<script>
    import { useAnswersStore } from '@/stores/answers.js'
    import { useResultsStore } from '@/stores/results.js'
    import Content from '@/components/Content.vue'
    import Header from '@/components/Header.vue'
    import TextFrame from '@/components/TextFrame.vue'
    import AccountQuestion from '@/components/icons/AccountQuestion.vue'
    export default {
        name: 'Home',
        components: {
            AccountQuestion,
            Content,
            Header,
            TextFrame
        },
        setup() {
            const answersStore = useAnswersStore()
            const resultsStore = useResultsStore()

            return {
                answersStore,
                resultsStore
            }
        },
        mounted() {
            if (this.answersStore.quizCurrent == null) {
                this.answersStore.$reset()
            }
            this.resultsStore.$reset()
        }
    }
</script>
<template>
    <TextFrame>
        <Header>
            home
        </Header>
        <Content> 
            <article class="prose mx-auto">
                <p class="text-leader">
                    The road ahead is long and meandering.
                    But the journey shapes us as much as we shape it.
                </p>
                <p>
                    <em class="uncial-antiqua">Wanderhome</em> by Jay Dragon, published by Possum Creek Games, is a pastoral fantasy table-top role-playing game about anthropomorphic animals journeying across a vast landscape, and what they discover about themselves and the world they inhabit along the way.
                </p>
                <p>
                    This quiz will help determine what playbook, or character archetype, you are.
                    You can take the quiz by clicking on the following link:
                </p>
                <div class="w-fit mx-auto">
                    <router-link active-class="active-link" class="navlink" to="/quiz">
                        <div class="inline-flex px-3 py-1 space-x-2 rounded-md bg-olive-800 text-white transition-all duration-300 ease-in-out hover:bg-olive-600">
                            <span class="scale-75">
                                <AccountQuestion/>
                            </span>
                            <span class="uncial-antiqua">Take the Quiz</span>
                        </div>
                    </router-link>
                </div>
            </article>
        </Content>
    </TextFrame>
</template>