<script setup lang="ts">
/**
 * DashboardPageHead — приветствие + meta-строка (новые лиды / средняя стоимость) +
 * range-toggle (Сегодня / 7 дней / 30 дней / Период…). Использует Vue 3.5
 * `defineModel` для двусторонней привязки range.
 *
 * Sprint 4 Phase B/3 — split DashboardView (audit O-refactor-04 закрытие).
 */
const range = defineModel<'today' | '7d' | '30d' | 'custom'>({ required: true });
</script>

<template>
    <header class="page-head">
        <div>
            <h1 class="text-h4 mb-2 page-greet">Доброе утро, <em class="text-primary">Иван</em></h1>
            <div class="page-meta text-body-2 text-medium-emphasis">
                <span><span class="num text-primary">+3</span> новых лида с утра</span>
                <span class="sep">·</span>
                <span>сегодня <span class="num">11</span> · вчера <span class="num">38</span></span>
                <span class="sep">·</span>
                <span>средняя стоимость <span class="num">2 248&nbsp;₽</span></span>
            </div>
        </div>
        <v-btn-toggle v-model="range" mandatory color="primary" density="comfortable" variant="outlined">
            <v-btn value="today" size="small">Сегодня</v-btn>
            <v-btn value="7d" size="small">7 дней</v-btn>
            <v-btn value="30d" size="small">30 дней</v-btn>
            <v-btn value="custom" size="small">Период…</v-btn>
        </v-btn-toggle>
    </header>
</template>

<style scoped>
.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.page-greet {
    font-variation-settings: 'opsz' 28;
    letter-spacing: -0.018em;
}
.page-greet em {
    font-style: normal;
    font-weight: 600;
}

.page-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.page-meta .sep {
    /* WCAG2AA 4.5:1 fix (was #92907b → 2.92:1 on ivory; #6b6356 → 5.33:1). */
    color: #6b6356;
}
.num {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-feature-settings: 'tnum';
    font-weight: 500;
}
</style>
