<template>
    <div v-if="$route.name == 'Open Data'">
        <div class="main-footer footerDark">
           <div class="container">
                <img class="dish-animation" src="@/assets/images/dog-bowl.svg">
                <h5 class="main-footer__description">Join our Discord channel to help the doggos of the world live a better life.</h5>
                <div class="footer-btn">
                    <a href="#" target="_blank" class="btn-global"><img src="@/assets/images/social/icon-1.png"> Join Us on Discord</a>
                </div>
                <p class="main-footer__copy">© Copyright 2021 - All Rights Reserved.</p>
            </div>
        </div>
    </div>      
    <div v-else>
       <div class="main-footer">
           <div class="container">
                <img class="dish-animation" src="@/assets/images/dog-bowl.svg">
                <h5 class="main-footer__description">Join our Discord channel to help the doggos of the world live a better life.</h5>
                <div class="footer-btn">
                    <a href="#" target="_blank" class="btn-global"><img src="@/assets/images/social/icon-1.png"> Join Us on Discord</a>
                </div>
                <p class="main-footer__copy">© Copyright 2021 - All Rights Reserved.</p>
            </div>
        </div>
    </div>

</template> 


<script>
export default {
  name: "TheFooter",
};
</script>

<style lang="scss">

    $grren: #97D26F;

    .main-footer {
        position: relative;
        background: $grren;
        margin-top: 0px;
        padding: 10px 0 60px;
        .dish-animation {
            position: absolute;
            top: -126px;
            // top: -75px;
            left: 0;
            right: 0;
            margin: 0 auto;
            width: 190px;
            height: 180px;
            // width: 147px;
            // height: 85px;
        }
        &:before {
            content: '';
            position: absolute;
            left: 0;
            top: -50px;
            background-image: url('../assets/images/grassNew.svg');
            background-repeat: no-repeat;
            background-size: 100%;
            width: 100%;
            padding-top: 8vw;
            background-position-x: center;
            background-position-y: top;
        }
        &__description {
            font-size: 40px;
            line-height: 55px;
            text-align: center;
            color: #fff;
            width: 870px;
            max-width: 100%;
            margin: 40px auto 40px;
        }
        &__copy {
            font-family: 'filsonproregularregular';
            color: #fff;
            font-size: 16px;
            line-height: 22px;
            text-align: center;
        }
        .footer-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 50px;
        }
        &.footerDark{
            background: #86C45C;
            &::before{
                top: -60px;
                background-image: url('../assets/images/footer-somente-folhas_escuro.svg');
                @media(max-width:768px){
                    top: -18px;
                }
            }
        }
    }

    @media(max-width:768px) {
        .main-footer__description {
            font-size: 32px;
            line-height: 42px;
            padding: 0 15px;
            box-sizing: border-box;
        }
        .main-footer .dish-animation {
            // top: -60px;
            top: -104px;
        }
        .main-footer:before{
            top: -18px;
        }
    }
    @media(min-width:769px) and (max-width:1000px) {
        .main-footer:before {
            top: -35px;
        }
    }
</style>