<script setup>
    import { storeToRefs } from 'pinia'
    import { mainStore } from '../../stores/MainStore.vue'
    import { useDark, useToggle } from "@vueuse/core";
    import qrCode from '../../assets/qr.digi.png'

    const isDark = useDark({selector: "body",});
</script>

<template>
    <div class="max-w-2xl p-6 mt-0 rounded-md promo-overlay" :class="{ isDark: isDark }">
        <div class="mt-3 pb-5">
            <h2 class="text-2xl"><a href="//www.dreamfreely.org">DreamFreely</a></h2>
            <!-- <div v-if="$route.path != '/medellin'"> -->
            <div>
                <!-- <p class="p-10">A creation of <a href="//canin.dreamfreely.org">Canin Carlos</a>.</p> -->
                <p>The idea is to have a website that just has event details, and redirects you to the primary source; that's it.</p>
                <p>You can <a href="https://airtable.com/appzQxsifc8AnD1zA/shrfUvOiFdaHI8xoz">submit a calendar here</a>, or <a href="https://airtable.com/appzQxsifc8AnD1zA/shrvhmYsAXY216C51">submit an event here</a>.</p>
                <p>If you represent a business and would like to be added to the directory, or seek ad space, <a>follow this link</a>.</p>

                <hr/>

                <p>La idea es tener un sitio web que solo contenga detalles del evento y te redirija a la fuente principal; eso es todo.</p>
                <p>Puedes <a href="https://airtable.com/appzQxsifc8AnD1zA/shrfUvOiFdaHI8xoz">enviar un calendario aquí</a>, o <a href="https://airtable.com/appzQxsifc8AnD1zA/shrvhmYsAXY216C51">enviar un evento aquí</a>.</p>
                <p>Si representas a una empresa y deseas que te incluyan en el directorio, o si buscas espacio publicitario, <a>sigue este enlace</a>.</p>
                <!-- <p>
                    <img id="qrcode" :src="qrCode"/>
                    <h2 class="text-xl green p-5">Shareable QR Code</h2>
                </p> -->
            </div>
        </div>             
    </div>    
</template>

<style scoped>
/* .template {
    background-color: #000;
    z-index: 4;
} */

#qrcode {
    width: 25em;
    margin: auto;
}
.promo-overlay {
    background-size: cover;    
}

.isDark {
    background-color: #000;
    color: #fff;
}
div >>> p {
    padding:.5rem;
}
</style>
