<script setup>
import { ref } from 'vue'
import { router, usePage } from '@inertiajs/vue3'
import CliBar from '@/Components/Cli/CliBar.vue'

const page = usePage()
const user = page.props.auth?.user

// Redirect to map (the map IS the dashboard)
const goToMap = () => router.visit('/map')
</script>

<template>
    <div class="dashboard">
        <div class="welcome">
            <h1 class="title">INNOVATIEPLATFORM</h1>
            <p class="subtitle">R&amp;D Lab — Waterschap Brabantse Delta</p>

            <div class="user-greeting" v-if="user">
                <span class="greeting-text">Welkom, {{ user.name }}</span>
            </div>

            <button @click="goToMap" class="enter-btn">
                OPEN METRO MAP &gt;&gt;
            </button>
        </div>

        <CliBar />
    </div>
</template>

<style scoped>
.dashboard {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1a2e;
    position: relative;
}

.welcome {
    text-align: center;
}

.title {
    font-family: 'Press Start 2P', monospace;
    font-size: 24px;
    color: #00d2ff;
    text-shadow: 0 0 30px rgba(0, 210, 255, 0.4);
    letter-spacing: 4px;
}

.subtitle {
    font-family: 'VT323', monospace;
    font-size: 20px;
    color: #8892b0;
    margin-top: 12px;
}

.user-greeting {
    margin-top: 32px;
}

.greeting-text {
    font-family: 'VT323', monospace;
    font-size: 18px;
    color: #00ff88;
}

.enter-btn {
    margin-top: 40px;
    padding: 14px 32px;
    background: rgba(0, 210, 255, 0.1);
    border: 2px solid #00d2ff;
    color: #00d2ff;
    font-family: 'Press Start 2P', monospace;
    font-size: 12px;
    cursor: pointer;
    letter-spacing: 2px;
    transition: all 0.3s;
}

.enter-btn:hover {
    background: rgba(0, 210, 255, 0.2);
    box-shadow: 0 0 30px rgba(0, 210, 255, 0.3);
    transform: translateY(-2px);
}
</style>
