<script setup lang="ts">
/**
 * Публичный layout (без auth) для юр-страниц и страницы цен.
 *
 * Шапка-бренд + контент (RouterView) + футер с реквизитами/контактами/ссылками.
 * Палитра v8 Forest: page bg warm ivory (#F6F3EC), бренд teal (#0F6E56),
 * акцент-нуар (#012019). Требование ЮKassa — реквизиты + контакты + ссылки
 * на оферту/политику/возврат/цены должны быть на сайте.
 */
import { RouterLink, RouterView } from 'vue-router';
import { SELLER, LEGAL_LINKS } from '../constants/legal';
</script>

<template>
    <v-app>
        <v-main class="public-main">
            <header class="public-header">
                <RouterLink to="/login" class="public-brand">Лидерра<span class="dot">.</span></RouterLink>
                <nav class="public-nav" aria-label="Правовые документы">
                    <RouterLink v-for="l in LEGAL_LINKS" :key="l.to" :to="l.to">{{ l.label }}</RouterLink>
                </nav>
            </header>

            <div class="public-content">
                <RouterView />
            </div>

            <footer class="public-footer">
                <div class="pf-req">
                    <strong>{{ SELLER.legalName }}</strong><br />
                    ИНН {{ SELLER.inn }} · ОГРНИП {{ SELLER.ogrnip }}<br />
                    {{ SELLER.address }}<br />
                    {{ SELLER.email }} · {{ SELLER.phone }}
                </div>
                <nav class="pf-links" aria-label="Правовые документы (футер)">
                    <RouterLink v-for="l in LEGAL_LINKS" :key="l.to" :to="l.to">{{ l.label }}</RouterLink>
                    <RouterLink to="/login">Вход</RouterLink>
                </nav>
            </footer>
        </v-main>
    </v-app>
</template>

<style scoped>
.public-main {
    background: #f6f3ec;
}
.public-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 32px;
    border-bottom: 1px solid rgba(1, 32, 25, 0.08);
    flex-wrap: wrap;
    gap: 12px;
}
.public-brand {
    font-weight: 600;
    font-size: 18px;
    letter-spacing: -0.01em;
    color: #012019;
    text-decoration: none;
}
.public-brand .dot {
    color: #0f6e56;
}
.public-nav {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}
.public-nav a {
    color: #0f6e56;
    text-decoration: none;
    font-size: 14px;
}
.public-nav a:hover {
    text-decoration: underline;
}
.public-content {
    padding: 32px;
    min-height: 50vh;
}
.public-footer {
    padding: 28px 32px;
    border-top: 1px solid rgba(1, 32, 25, 0.08);
    display: flex;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    font-size: 13px;
    color: #4a5a55;
    line-height: 1.6;
}
.pf-links {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pf-links a {
    color: #0f6e56;
    text-decoration: none;
}
.pf-links a:hover {
    text-decoration: underline;
}
</style>
