<script setup lang="ts">
import { Link, usePage } from "@inertiajs/vue3"
import { SharedProps } from "@/Types/types"

const page = usePage<SharedProps>().props
const year = new Date().getFullYear()
const version = __APP_VERSION__
</script>

<template>
    <footer class="glass">
        <span class="footer-copyright">
            &copy; {{ year }} FlightsGoneBy

            <span class="footer-version">v{{ version }}</span>
        </span>

        <span class="footer-links">
            <Link v-if="page.auth.user" :href="route('support')" class="footer-link">
                Support
            </Link>
        </span>
    </footer>
</template>

<style scoped>
/* Footer = ~5dvh */
footer {
    flex: 0 0 5dvh;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-copyright {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #556;
}

.footer-links {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.footer-link {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #778;
    text-decoration: none;
    transition: color 0.15s ease;
}

.footer-link:hover {
    color: #ffc107;
}

@media (max-width: 600px) {
    footer {
        padding: 0 1rem;
    }

    .footer-copyright {
        font-size: 0.6rem;
    }

    .footer-link {
        font-size: 0.6rem;
    }
}

.footer-version {
    opacity: 0.8;
    margin-left: 0.4em;
}
</style>
