<script setup>
    import Footer from '../components/Sections/Footer.vue';
    import Header from '../components/Sections/Header.vue';

    import { useMenuStore } from '../stores/MenuStore';
    import { useEventsStore } from '../stores/EventsStore';
    import { mainStore } from '../stores/MainStore.vue';

    const menuStore = useMenuStore();
    const EventsStore = useEventsStore();
    const MainStore = mainStore();

    </script>
    
<template>
  <div class="text-center">
    <Header></Header>
    <!-- <ButtonSet /> -->

    <div class="flex grid text-center p-4 grid-flow-row lg:grid-cols-3">
        <div class="text-center p-2">
          <a class=" text-center" href="/medellin" :click="EventsStore.shortcode = 'mde'">  
            <img src="../assets/Medellin.png" style="width:15em;"/>
            <p class="text-lg">Medellin</p>
          </a>
        </div>
        <div class="text-center p-2">
          <a class=" text-center" href="/mpls-stp">
            <img src="../assets/Mpls.png" style="width:15em;"/>
            <p class="text-lg">Mpls/StPaul</p>
          </a>
        </div>
        <div class="text-center p-2">
          <a class=" text-center" href="/beyond">
            <img src="../assets/earth.png" style="width:15em;"/>
            <p class="text-lg">Beyond</p>
          </a>
        </div>
    </div>

    <div class="p-8">
      <Footer lead="DreamFreely"></Footer>
    </div>
  </div>
</template>

<style scoped>

img {
  width: 50em;
  border-radius: 8em;
  padding: 1em;
  margin: 2em;
  margin: auto;
}

a {
  padding: 2em;
}

</style>