<!--
|--------------------------------------------------------------------------
| Agência PSI
|--------------------------------------------------------------------------
| Criado e desenvolvido por Leonardo Nohama
|
| Tecnologia aplicada à escuta.
| Estrutura para o cuidado.
|
| Arquivo: src/views/pages/portal/MinhasSessoes.vue
| Data: 2026
| Local: São Carlos/SP — Brasil
|--------------------------------------------------------------------------
| © 2026 — Todos os direitos reservados
|--------------------------------------------------------------------------
-->
<script setup>
// Placeholder simples — lógica será implementada futuramente.
</script>

<template>
    <div class="p-4 md:p-6">
        <!-- HEADER CONCEITUAL -->
        <div class="mb-6 overflow-hidden rounded-2xl border border-[var(--surface-border)] bg-[var(--surface-card)]">
            <div class="relative p-6">
                <!-- blobs sutis -->
                <div class="pointer-events-none absolute inset-0 opacity-80">
                    <div class="absolute -top-16 -right-16 h-52 w-52 rounded-full bg-indigo-400/10 blur-3xl" />
                    <div class="absolute bottom-0 left-10 h-44 w-44 rounded-full bg-emerald-400/10 blur-3xl" />
                </div>

                <div class="relative flex items-center gap-4">
                    <div class="grid h-14 w-14 place-items-center rounded-2xl bg-[var(--primary-color)]/10 text-[var(--primary-color)]">
                        <i class="pi pi-calendar text-2xl" />
                    </div>

                    <div>
                        <div class="text-2xl font-semibold leading-none">Minhas Sessões</div>
                        <div class="mt-2 text-sm text-color-secondary">Visualize e acompanhe suas sessões agendadas e realizadas.</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- CONTEÚDO PLACEHOLDER -->
        <div class="flex items-center justify-center rounded-2xl border border-dashed border-[var(--surface-border)] bg-[var(--surface-card)] py-16">
            <div class="text-center max-w-md">
                <div class="mx-auto mb-4 grid h-16 w-16 place-items-center rounded-2xl bg-[var(--primary-color)]/10 text-[var(--primary-color)]">
                    <i class="pi pi-hourglass text-2xl" />
                </div>

                <div class="text-lg font-semibold">Em desenvolvimento</div>

                <div class="mt-2 text-sm text-color-secondary">A área de acompanhamento das sessões será exibida aqui. Em breve você poderá visualizar histórico, próximas sessões e detalhes clínicos.</div>
            </div>
        </div>
    </div>
</template>

<style scoped>
/* mantém padrão visual consistente */
</style>
