<template>

    <section class="hero" ref="hero">
        <HeroTitle class="hero__title" />
        <Transition name="fade-in">
            <HeroArrowDown class="hero__arrow-down" v-show="isVisible" />
        </Transition>
    </section>

</template>

<script setup>

    // --------------------------------------------------
    // DATA
    // --------------------------------------------------

    const hero = ref();
    const isVisible = ref(true);

    // --------------------------------------------------
    // LOGIC
    // --------------------------------------------------

    const toggleArrowDown = () => {
        if (hero.value) {
            if (window.innerHeight / 2 < hero.value.getBoundingClientRect().bottom) {
                isVisible.value = true;
            } else {
                isVisible.value = false;
            }
        }
    }

    // --------------------------------------------------
    // PROGRAM
    // --------------------------------------------------

    onMounted(() => {
        toggleArrowDown();
        window.addEventListener('scroll', toggleArrowDown);
    })

    onUnmounted(() => {
        window.removeEventListener('scroll', toggleArrowDown);
    })

</script>

<style lang="scss" scoped>

    // --------------------------------------------------
    // STYLE
    // --------------------------------------------------

    .hero {
        @include large-section;
        height: 100vh;
        height: 100svh;
        display: grid;
        grid:
            '.' 1fr
            'title' auto
            '.' minmax(6rem, 1fr)
            'arrow-down' var(--regular-icon-wrapper-size)
            / 100%;
        place-content: center;
        place-items: center;

        &__title {
            grid-area: title;
        }

        &__arrow-down {
            grid-area: arrow-down;
        }
    }

    // Transition component

    .fade-in {

        &-enter-from,
        &-leave-to {
            opacity: 0;
            transform: translateY(-2rem);
        }

        &-enter-active,
        &-leave-active {
            transition:
                opacity 400ms ease-in-out,
                transform 400ms ease-in-out;
        }
    }

</style>
