<script setup lang="ts">
import { Head } from '@inertiajs/vue3';
import { ref } from 'vue';
import { useDisplay } from 'vuetify';
import Masthead from '@/components/Masthead.vue';

defineProps<{
    title?: string;
}>();

const { mobile } = useDisplay();
const drawer = ref(false);

const navItems = [
    { label: 'Top Stories', href: '/' },
    { label: 'World', href: '/world' },
    { label: 'Technology', href: '/technology' },
    { label: 'Business', href: '/business' },
    { label: 'Science', href: '/science' },
];

const subItems = [
    'Headlines',
    'Australia',
    'UK',
    'USA',
    'Politics',
    'Climate',
    'Health',
    'Sport',
    'Arts',
];
</script>

<template>
    <Head :title="title" />

    <VApp>
        <!-- Header -->
        <VAppBar flat height="56" color="surface" border="b">
            <VAppBarTitle>
                <Masthead dark />
            </VAppBarTitle>

            <!-- Desktop nav -->
            <template v-if="!mobile">
                <div class="d-flex ga-2 mr-4">
                    <VBtn variant="text" href="/login" class="nav-btn">
                        Login
                    </VBtn>
                    <VBtn variant="outlined" href="/register" class="nav-btn">
                        Register
                    </VBtn>
                </div>
            </template>

            <!-- Mobile hamburger -->
            <VAppBarNavIcon v-else @click="drawer = !drawer" />
        </VAppBar>

        <VAppBar flat :height="37" color="surface" style="top: 56px">
            <div class="red-rule" />
            <div class="subbar">
                <a
                    v-for="item in subItems"
                    :key="item"
                    href="#"
                    class="subbar-link"
                >
                    {{ item }}
                </a>
            </div>
        </VAppBar>

        <VNavigationDrawer v-model="drawer" temporary>
            <VList>
                <VListItem href="/login" title="Login" />
                <VListItem href="/register" title="Register" />
            </VList>
        </VNavigationDrawer>

        <!-- Main content -->
        <VMain class="bg-background">
            <VContainer class="content-well pa-6">
                <slot />
            </VContainer>
        </VMain>

        <!-- Footer -->
        <VFooter app color="#111111" class="footer">
            <Masthead small light />
            <VSpacer />
            <nav class="d-flex ga-4">
                <a
                    v-for="link in ['About', 'Donate']"
                    :key="link"
                    :href="`/${link.toLowerCase()}`"
                    class="footer-link"
                >
                    {{ link }}
                </a>
            </nav>
            <v-spacer />
            <span class="footer-copy"
                >© {{ new Date().getFullYear() }} DredgeNews</span
            >
        </VFooter>
    </VApp>
</template>

<style scoped lang="sass">
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Inter:wght@400;500&display=swap')

.nav-btn
    font-family: 'Inter', sans-serif
    font-size: 13px
    font-weight: 500
    letter-spacing: 0
    text-transform: none


.nav-link
    font-family: 'Inter', sans-serif
    font-size: 13px
    font-weight: 500
    color: #444
    text-decoration: none
    padding: 0 14px
    height: 56px
    display: flex
    align-items: center
    border-bottom: 3px solid transparent
    transition: color 0.15s

    &:hover
        color: #111

    &.active
        color: #111
        border-bottom-color: #C0392B

.red-rule
    height: 3px
    background: #C0392B
    width: 100%
    position: absolute
    top: 0
    left: 0
    z-index: 1

.subbar
    width: 100%
    background: #fff
    border-bottom: 1px solid #E8E8E8
    display: flex
    overflow-x: auto
    padding: 0 1.5rem
    position: absolute
    top: 3px
    left: 0

    &::-webkit-scrollbar
        display: none

.subbar-link
    font-family: 'Inter', sans-serif
    font-size: 12px
    color: #666
    text-decoration: none
    padding: 8px 12px
    white-space: nowrap
    border-bottom: 2px solid transparent
    flex-shrink: 0

    &:hover
        color: #111

    &.active
        color: #111
        border-bottom-color: #111

.content-well
    max-width: 1080px

.footer
    padding: 1.25rem 1.5rem
    display: flex
    align-items: center

.footer-link
    font-size: 12px
    color: #aaa
    text-decoration: none

    &:hover
        color: #fff

.footer-copy
    font-size: 11px
    color: #666
</style>
