<!--
|--------------------------------------------------------------------------
| Agência PSI
|--------------------------------------------------------------------------
| Criado e desenvolvido por Leonardo Nohama
|
| Tecnologia aplicada à escuta.
| Estrutura para o cuidado.
|
| Arquivo: src/views/pages/public/Landingpage-v1.vue
| Data: 2026
| Local: São Carlos/SP — Brasil
|--------------------------------------------------------------------------
| © 2026 — Todos os direitos reservados
|--------------------------------------------------------------------------
-->
<script setup>
import { computed, ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { supabase } from '@/lib/supabase/client';

import Chip from 'primevue/chip';
import Accordion from 'primevue/accordion';
import AccordionTab from 'primevue/accordiontab';

const router = useRouter();

const brandName = 'Agência PSI'; // ajuste para o nome final do produto
const year = computed(() => new Date().getFullYear());

function go(path) {
    router.push(path);
}

function scrollTo(id) {
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
}

const features = ref([
    { title: 'Agenda inteligente', desc: 'Configure semana, encaixes, bloqueios e visão por dia/semana.', icon: 'pi pi-calendar' },
    { title: 'Autoagendamento (PRO)', desc: 'Página para o paciente confirmar, agendar e reagendar sem fricção.', icon: 'pi pi-globe', pro: true },
    { title: 'Prontuário e sessões', desc: 'Registro por paciente, histórico por sessão e linha do tempo.', icon: 'pi pi-file-edit' },
    { title: 'Financeiro integrado', desc: 'Receitas e despesas conectadas ao que acontece na agenda.', icon: 'pi pi-wallet' },
    { title: 'Pacientes e tags', desc: 'Segmentação por grupos, etiquetas e filtros para achar rápido.', icon: 'pi pi-users' },
    { title: 'Clínica / multi-profissional', desc: 'Múltiplos profissionais, papéis, convites e visão gerencial.', icon: 'pi pi-building' }
]);

/** PRICING dinâmico do SaaS */
const billingInterval = ref('year'); // 'month' | 'year'
const pricing = ref([]);
const loadingPricing = ref(false);

const featuredPlanKey = computed(() => {
    const list = Array.isArray(pricing.value) ? pricing.value : [];
    const featured = list.find((p) => p && p.is_featured && p.is_visible);
    return featured?.plan_key || null;
});

function goStart() {
    if (featuredPlanKey.value) {
        router.push(`/auth/signup?plan=${encodeURIComponent(featuredPlanKey.value)}&interval=${billingInterval.value}`);
        return;
    }
    router.push('/auth/signup');
}

function formatBRLFromCents(cents) {
    if (cents == null) return '—';
    const v = Number(cents) / 100;
    if (!Number.isFinite(v)) return '—';
    return v.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
}

function priceFor(p) {
    if (!p) return null;
    const cents = billingInterval.value === 'year' ? p.yearly_cents : p.monthly_cents;
    // fallback: se não existir anual, mostra mensal (e vice-versa)
    if (cents == null) return billingInterval.value === 'year' ? p.monthly_cents : p.yearly_cents;
    return cents;
}

// plano gratuito: por chave (_free) ou preço zero/ausente
function isFreePlan(p) {
    const k = String(p?.plan_key || '').toLowerCase();
    if (k.endsWith('_free') || k === 'free') return true;
    const cents = priceFor(p);
    return cents == null || Number(cents) === 0;
}

async function fetchPricing() {
    loadingPricing.value = true;
    try {
        const { data, error } = await supabase.from('v_public_pricing').select('*').eq('is_visible', true).order('sort_order', { ascending: true });

        if (!error) pricing.value = data || [];
    } finally {
        loadingPricing.value = false;
    }
}

onMounted(fetchPricing);
</script>

<template>
    <div class="min-h-screen bg-[var(--surface-ground)] text-[var(--text-color)]">
        <!-- TOPBAR -->
        <div class="sticky top-0 z-40 border-b border-[var(--surface-border)] bg-[color-mix(in_srgb,var(--surface-card),transparent_12%)] backdrop-blur">
            <div class="mx-auto max-w-7xl px-4 md:px-6 py-3 flex items-center justify-between gap-3">
                <button class="flex items-center gap-3 min-w-0" @click="scrollTo('top')">
                    <div class="h-10 w-10 rounded-2xl border border-[var(--surface-border)] bg-[var(--surface-card)] grid place-items-center shadow-sm">
                        <i class="pi pi-sparkles text-lg opacity-80" />
                    </div>
                    <div class="min-w-0 text-left">
                        <div class="font-semibold leading-tight truncate">{{ brandName }}</div>
                        <div class="text-xs text-[var(--text-color-secondary)] truncate">Gestão clínica sem ruído.</div>
                    </div>
                </button>

                <div class="flex items-center gap-2">
                    <Button label="Entrar" icon="pi pi-sign-in" severity="secondary" outlined @click="go('/auth/login')" />
                    <Button label="Começar" icon="pi pi-bolt" @click="goStart()" />
                </div>
            </div>
        </div>

        <!-- HERO -->
        <section id="top" class="relative overflow-hidden">
            <!-- background: noir grid + glow -->
            <div class="pointer-events-none absolute inset-0">
                <div class="hero-grid absolute inset-0 opacity-[0.35]" />
                <div class="absolute -top-28 -left-28 h-96 w-96 rounded-full blur-3xl opacity-60 bg-indigo-400/10" />
                <div class="absolute top-20 -right-24 h-[28rem] w-[28rem] rounded-full blur-3xl opacity-60 bg-emerald-400/10" />
                <div class="absolute -bottom-40 left-1/3 h-[34rem] w-[34rem] rounded-full blur-3xl opacity-60 bg-fuchsia-400/10" />
                <div class="hero-noise absolute inset-0 opacity-[0.12]" />
            </div>

            <div class="mx-auto max-w-7xl px-4 md:px-6 pt-10 md:pt-16 pb-10 md:pb-14 relative">
                <div class="grid grid-cols-12 gap-6 items-center">
                    <div class="col-span-12 lg:col-span-7">
                        <div class="flex flex-wrap items-center gap-2 mb-4">
                            <Chip label="Para psicólogos e clínicas" icon="pi pi-shield" />
                            <span class="text-xs text-[var(--text-color-secondary)]"> • menos dispersão • mais presença • mais previsibilidade </span>
                        </div>

                        <h1 class="text-3xl md:text-5xl font-semibold leading-tight">Um sistema que <span class="hero-underline">reduz ruído</span> — sem roubar seu método.</h1>

                        <p class="mt-4 text-base md:text-lg text-[var(--text-color-secondary)] max-w-2xl leading-relaxed">
                            Centralize a rotina clínica em um lugar só: pacientes, sessões, lembretes e indicadores. O objetivo não é "burocratizar": é deixar o consultório respirável.
                        </p>

                        <div class="mt-6 flex flex-col sm:flex-row gap-2">
                            <Button label="Criar conta grátis" icon="pi pi-arrow-right" class="w-full sm:w-auto" @click="goStart()" />
                            <Button label="Ver planos" icon="pi pi-credit-card" severity="secondary" outlined class="w-full sm:w-auto" @click="scrollTo('pricing')" />
                            <Button label="Como funciona" icon="pi pi-compass" severity="secondary" text class="w-full sm:w-auto" @click="scrollTo('how')" />
                        </div>

                        <div class="mt-6 flex flex-wrap gap-2">
                            <Tag severity="secondary" value="Agenda online (PRO)" />
                            <Tag severity="secondary" value="Controle de sessões" />
                            <Tag severity="secondary" value="Financeiro integrado" />
                            <Tag severity="secondary" value="Clínica / multi-profissional" />
                            <Tag severity="secondary" value="Separação por tenant + RLS" />
                        </div>

                        <div class="mt-6 text-xs text-[var(--text-color-secondary)]">"A diferença entre ter uma agenda e ter um sistema mora nos detalhes."</div>
                    </div>

                    <div class="col-span-12 lg:col-span-5">
                        <Card class="overflow-hidden rounded-[2rem] border border-[var(--surface-border)]">
                            <template #content>
                                <div class="p-1">
                                    <div class="rounded-2xl border border-[var(--surface-border)] bg-[var(--surface-ground)] p-4">
                                        <div class="flex items-start justify-between gap-3">
                                            <div>
                                                <div class="font-semibold text-lg">Painel de hoje</div>
                                                <div class="text-sm text-[var(--text-color-secondary)]">Um recorte: o essencial, sem excesso.</div>
                                            </div>
                                            <i class="pi pi-chart-line opacity-70" />
                                        </div>

                                        <Divider class="my-4" />

                                        <div class="grid grid-cols-12 gap-3">
                                            <div class="col-span-12 md:col-span-6">
                                                <div class="rounded-2xl border border-[var(--surface-border)] bg-[var(--surface-card)] p-3">
                                                    <div class="text-xs text-[var(--text-color-secondary)]">Sessões</div>
                                                    <div class="text-2xl font-semibold mt-1">6</div>
                                                    <div class="text-xs text-[var(--text-color-secondary)] mt-1">com lembretes automáticos</div>
                                                </div>
                                            </div>

                                            <div class="col-span-12 md:col-span-6">
                                                <div class="rounded-2xl border border-[var(--surface-border)] bg-[var(--surface-card)] p-3">
                                                    <div class="text-xs text-[var(--text-color-secondary)]">Recebimentos</div>
                                                    <div class="text-2xl font-semibold mt-1">R$ 840</div>
                                                    <div class="text-xs text-[var(--text-color-secondary)] mt-1">visão clara do mês</div>
                                                </div>
                                            </div>

                                            <div class="col-span-12">
                                                <div class="rounded-2xl border border-[var(--surface-border)] bg-[var(--surface-card)] p-3">
                                                    <div class="flex items-center justify-between">
                                                        <div class="min-w-0">
                                                            <div class="text-xs text-[var(--text-color-secondary)]">Prontuário</div>
                                                            <div class="font-semibold mt-1 truncate">Anotações e histórico</div>
                                                            <div class="text-xs text-[var(--text-color-secondary)] mt-1">por paciente • por sessão • linha do tempo</div>
                                                        </div>
                                                        <i class="pi pi-file-edit opacity-70" />
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="mt-4 text-xs text-[var(--text-color-secondary)]">* Ilustração conceitual do produto.</div>
                                    </div>
                                </div>
                            </template>
                        </Card>

                        <div class="mt-4 grid grid-cols-12 gap-3">
                            <div class="col-span-12 sm:col-span-6">
                                <div class="rounded-2xl border border-[var(--surface-border)] bg-[color-mix(in_srgb,var(--surface-card),transparent_10%)] p-4">
                                    <div class="text-xs text-[var(--text-color-secondary)]">Promessa</div>
                                    <div class="font-semibold mt-1">Organizar sem invadir.</div>
                                    <div class="text-xs text-[var(--text-color-secondary)] mt-1">Você define o método. O sistema remove ruído.</div>
                                </div>
                            </div>
                            <div class="col-span-12 sm:col-span-6">
                                <div class="rounded-2xl border border-[var(--surface-border)] bg-[color-mix(in_srgb,var(--surface-card),transparent_10%)] p-4">
                                    <div class="text-xs text-[var(--text-color-secondary)]">Arquitetura</div>
                                    <div class="font-semibold mt-1">Multi-tenant de verdade.</div>
                                    <div class="text-xs text-[var(--text-color-secondary)] mt-1">Menus + guards + RLS alinhados.</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- VALUE STRIP -->
        <section class="mx-auto max-w-7xl px-4 md:px-6 pb-10">
            <div class="grid grid-cols-12 gap-4">
                <div class="col-span-12 md:col-span-4">
                    <Card class="h-full rounded-[2rem]">
                        <template #content>
                            <div class="flex items-start gap-3">
                                <div class="h-10 w-10 rounded-2xl border border-[var(--surface-border)] bg-[var(--surface-ground)] grid place-items-center">
                                    <i class="pi pi-calendar opacity-80" />
                                </div>
                                <div>
                                    <div class="font-semibold">Agenda e autoagendamento</div>
                                    <div class="text-sm text-[var(--text-color-secondary)] mt-1">O paciente confirma, agenda e reagenda com autonomia (PRO).</div>
                                </div>
                            </div>
                        </template>
                    </Card>
                </div>

                <div class="col-span-12 md:col-span-4">
                    <Card class="h-full rounded-[2rem]">
                        <template #content>
                            <div class="flex items-start gap-3">
                                <div class="h-10 w-10 rounded-2xl border border-[var(--surface-border)] bg-[var(--surface-ground)] grid place-items-center">
                                    <i class="pi pi-wallet opacity-80" />
                                </div>
                                <div>
                                    <div class="font-semibold">Financeiro integrado</div>
                                    <div class="text-sm text-[var(--text-color-secondary)] mt-1">Receita/despesa junto da agenda — sem planilhas espalhadas.</div>
                                </div>
                            </div>
                        </template>
                    </Card>
                </div>

                <div class="col-span-12 md:col-span-4">
                    <Card class="h-full rounded-[2rem]">
                        <template #content>
                            <div class="flex items-start gap-3">
                                <div class="h-10 w-10 rounded-2xl border border-[var(--surface-border)] bg-[var(--surface-ground)] grid place-items-center">
                                    <i class="pi pi-lock opacity-80" />
                                </div>
                                <div>
                                    <div class="font-semibold">Prontuário e sessões</div>
                                    <div class="text-sm text-[var(--text-color-secondary)] mt-1">Registro e histórico acessíveis, com organização e backup.</div>
                                </div>
                            </div>
                        </template>
                    </Card>
                </div>
            </div>

            <div class="mt-3 text-xs text-[var(--text-color-secondary)]">Módulos: agenda, prontuário/sessões, financeiro e gestão multi-profissional.</div>
        </section>

        <!-- HOW IT WORKS -->
        <section id="how" class="mx-auto max-w-7xl px-4 md:px-6 pb-12 scroll-mt-24">
            <div class="flex items-end justify-between gap-3 mb-4">
                <div>
                    <div class="text-2xl md:text-3xl font-semibold">Como funciona</div>
                    <div class="text-sm text-[var(--text-color-secondary)] mt-1">Três movimentos: preparar, atender, acompanhar — sem fricção.</div>
                </div>
                <Button label="Ver planos" severity="secondary" outlined icon="pi pi-arrow-down" @click="scrollTo('pricing')" />
            </div>

            <div class="grid grid-cols-12 gap-4">
                <div class="col-span-12 md:col-span-4">
                    <Card class="h-full rounded-[2rem]">
                        <template #content>
                            <div class="flex items-start gap-3">
                                <div class="h-10 w-10 rounded-2xl border border-[var(--surface-border)] bg-[var(--surface-ground)] grid place-items-center">
                                    <i class="pi pi-sliders-h opacity-80" />
                                </div>
                                <div>
                                    <div class="font-semibold">1) Preparar</div>
                                    <div class="text-sm text-[var(--text-color-secondary)] mt-1 leading-relaxed">Configure agenda, encaixes e regras. Se quiser, habilite autoagendamento (PRO).</div>
                                    <div class="mt-2">
                                        <Tag severity="secondary" value="Bloqueios" />
                                        <Tag class="ml-2" severity="secondary" value="Encaixes" />
                                    </div>
                                </div>
                            </div>
                        </template>
                    </Card>
                </div>

                <div class="col-span-12 md:col-span-4">
                    <Card class="h-full rounded-[2rem]">
                        <template #content>
                            <div class="flex items-start gap-3">
                                <div class="h-10 w-10 rounded-2xl border border-[var(--surface-border)] bg-[var(--surface-ground)] grid place-items-center">
                                    <i class="pi pi-comments opacity-80" />
                                </div>
                                <div>
                                    <div class="font-semibold">2) Atender</div>
                                    <div class="text-sm text-[var(--text-color-secondary)] mt-1 leading-relaxed">Sessão acontece. Registro fica onde precisa ficar: no prontuário, no tempo certo.</div>
                                    <div class="mt-2">
                                        <Tag severity="secondary" value="Sessões" />
                                        <Tag class="ml-2" severity="secondary" value="Prontuário" />
                                    </div>
                                </div>
                            </div>
                        </template>
                    </Card>
                </div>

                <div class="col-span-12 md:col-span-4">
                    <Card class="h-full rounded-[2rem]">
                        <template #content>
                            <div class="flex items-start gap-3">
                                <div class="h-10 w-10 rounded-2xl border border-[var(--surface-border)] bg-[var(--surface-ground)] grid place-items-center">
                                    <i class="pi pi-chart-bar opacity-80" />
                                </div>
                                <div>
                                    <div class="font-semibold">3) Acompanhar</div>
                                    <div class="text-sm text-[var(--text-color-secondary)] mt-1 leading-relaxed">Financeiro e indicadores acompanham o movimento. Menos "cadê?", mais previsibilidade.</div>
                                    <div class="mt-2">
                                        <Tag severity="secondary" value="Recebimentos" />
                                        <Tag class="ml-2" severity="secondary" value="Indicadores" />
                                    </div>
                                </div>
                            </div>
                        </template>
                    </Card>
                </div>
            </div>

            <Divider class="my-8" />

            <Accordion :activeIndex="0">
                <AccordionTab header="Como fica o fluxo na prática?">
                    <div class="text-sm text-[var(--text-color-secondary)] leading-relaxed">
                        Você abre a agenda, a sessão acontece, o registro vai para o prontuário, e o financeiro acompanha. O sistema existe para manter o consultório respirando — não para virar uma burocracia nova.
                    </div>
                </AccordionTab>
                <AccordionTab header="E para clínica (multi-profissionais)?">
                    <div class="text-sm text-[var(--text-color-secondary)] leading-relaxed">Perfis por função, agendas separadas, visão gerencial e convites (Modelo B). Você cresce sem quebrar a estrutura.</div>
                </AccordionTab>
                <AccordionTab header="Privacidade e segurança">
                    <div class="text-sm text-[var(--text-color-secondary)] leading-relaxed">Separação por clínica/tenant, controle de acesso e políticas no banco (RLS). (Quando quiser, a gente cria uma página dedicada de LGPD/Segurança.)</div>
                </AccordionTab>
            </Accordion>
        </section>

        <!-- FEATURES -->
        <section class="mx-auto max-w-7xl px-4 md:px-6 pb-12">
            <div class="flex items-end justify-between gap-3 mb-4">
                <div>
                    <div class="text-2xl md:text-3xl font-semibold">Recursos que sustentam a rotina</div>
                    <div class="text-sm text-[var(--text-color-secondary)] mt-1">O foco é tirar fricção — sem invadir o que é do seu método.</div>
                </div>
                <Button label="Ver planos" severity="secondary" outlined icon="pi pi-arrow-down" @click="scrollTo('pricing')" />
            </div>

            <div class="grid grid-cols-12 gap-4">
                <div v-for="f in features" :key="f.title" class="col-span-12 md:col-span-6 lg:col-span-4">
                    <Card class="h-full rounded-[2rem]">
                        <template #content>
                            <div class="flex items-start gap-3">
                                <div class="h-10 w-10 rounded-2xl border border-[var(--surface-border)] bg-[var(--surface-ground)] grid place-items-center">
                                    <i :class="f.icon" class="opacity-80" />
                                </div>
                                <div class="min-w-0">
                                    <div class="font-semibold">{{ f.title }}</div>
                                    <div class="text-sm text-[var(--text-color-secondary)] mt-1 leading-relaxed">
                                        {{ f.desc }}
                                    </div>
                                    <div v-if="f.pro" class="mt-2">
                                        <Tag severity="warning" value="PRO" />
                                    </div>
                                </div>
                            </div>
                        </template>
                    </Card>
                </div>
            </div>
        </section>

        <!-- PRICING (dinâmico do SaaS) -->
        <section id="pricing" class="mx-auto max-w-7xl px-4 md:px-6 pb-14 scroll-mt-24">
            <div class="text-3xl md:text-4xl font-semibold text-center">Planos</div>
            <div class="text-base md:text-lg text-[var(--text-color-secondary)] mt-2 text-center">Comece simples. Suba para PRO quando a agenda pedir automação.</div>

            <!-- toggle -->
            <div class="flex flex-col items-center text-center mt-6">
                <div class="inline-flex items-center rounded-xl border border-[var(--surface-border)] bg-[color-mix(in_srgb,var(--surface-card),transparent_10%)] p-1">
                    <Button label="Mensal" size="small" :severity="billingInterval === 'month' ? 'success' : 'secondary'" :outlined="billingInterval !== 'month'" @click="billingInterval = 'month'" />
                    <Button label="Anual" size="small" :severity="billingInterval === 'year' ? 'success' : 'secondary'" :outlined="billingInterval !== 'year'" class="ml-1" @click="billingInterval = 'year'" />
                </div>

                <div v-if="billingInterval === 'year'" class="mt-2">
                    <Tag severity="success" value="Economize até 20%" />
                </div>
            </div>

            <div v-if="loadingPricing" class="mt-8">
                <div class="grid grid-cols-12 gap-4">
                    <div v-for="i in 3" :key="i" class="col-span-12 md:col-span-4">
                        <div class="rounded-[2rem] border border-[var(--surface-border)] bg-[var(--surface-card)] p-5">
                            <div class="h-4 w-24 bg-[color-mix(in_srgb,var(--surface-200),transparent_40%)] rounded mb-3 animate-pulse" />
                            <div class="h-7 w-40 bg-[color-mix(in_srgb,var(--surface-200),transparent_40%)] rounded mb-4 animate-pulse" />
                            <div class="h-10 w-48 bg-[color-mix(in_srgb,var(--surface-200),transparent_40%)] rounded mb-4 animate-pulse" />
                            <div class="space-y-2">
                                <div class="h-3 w-full bg-[color-mix(in_srgb,var(--surface-200),transparent_40%)] rounded animate-pulse" />
                                <div class="h-3 w-11/12 bg-[color-mix(in_srgb,var(--surface-200),transparent_40%)] rounded animate-pulse" />
                                <div class="h-3 w-10/12 bg-[color-mix(in_srgb,var(--surface-200),transparent_40%)] rounded animate-pulse" />
                            </div>
                            <div class="h-10 w-full bg-[color-mix(in_srgb,var(--surface-200),transparent_40%)] rounded-xl mt-6 animate-pulse" />
                        </div>
                    </div>
                </div>
            </div>

            <div v-else class="mt-8">
                <div v-if="!pricing.length" class="rounded-[2rem] border border-[var(--surface-border)] bg-[var(--surface-card)] p-6 text-center">
                    <div class="text-lg font-semibold">Planos em preparação</div>
                    <div class="text-sm text-[var(--text-color-secondary)] mt-1">Ainda não há itens visíveis na vitrine pública. Publique no painel SaaS para aparecer aqui.</div>
                    <div class="mt-4 flex justify-center gap-2 flex-wrap">
                        <Button label="Entrar" severity="secondary" outlined icon="pi pi-sign-in" @click="go('/auth/login')" />
                        <Button label="Criar conta" icon="pi pi-bolt" @click="goStart()" />
                    </div>
                </div>

                <div v-else class="grid grid-cols-12 gap-4">
                    <div v-for="p in pricing" :key="p.plan_id" class="col-span-12 md:col-span-4">
                        <div
                            class="h-full rounded-[2rem] border border-[var(--surface-border)] bg-[var(--surface-card)] overflow-hidden transition-transform duration-300"
                            :class="p.is_featured ? 'ring-1 ring-emerald-500/30 md:-translate-y-2 md:scale-[1.02]' : 'hover:-translate-y-1'"
                        >
                            <div class="relative p-5">
                                <div v-if="p.is_featured" class="pointer-events-none absolute inset-0 opacity-70">
                                    <div class="absolute -top-20 -right-24 h-72 w-72 rounded-full bg-emerald-400/10 blur-3xl" />
                                    <div class="absolute -bottom-24 left-10 h-72 w-72 rounded-full bg-indigo-400/10 blur-3xl" />
                                </div>

                                <div class="relative">
                                    <div class="flex items-start justify-between gap-3">
                                        <div class="min-w-0">
                                            <div class="text-sm text-[var(--text-color-secondary)]">
                                                {{ p.badge || 'Plano' }}
                                            </div>
                                            <div class="text-xl font-semibold truncate">
                                                {{ p.public_name || p.plan_name || p.plan_key }}
                                            </div>
                                        </div>

                                        <Tag v-if="p.is_featured" severity="success" value="Popular" />
                                    </div>

                                    <div class="mt-4 text-3xl font-semibold leading-none">
                                        <template v-if="isFreePlan(p)">
                                            Grátis<span class="text-sm font-normal text-[var(--text-color-secondary)]"> para sempre </span>
                                        </template>
                                        <template v-else>
                                            {{ formatBRLFromCents(priceFor(p)) }}
                                            <span class="text-sm font-normal text-[var(--text-color-secondary)]"> /{{ billingInterval === 'month' ? 'mês' : 'ano' }} </span>
                                        </template>
                                    </div>

                                    <div v-if="!isFreePlan(p) && billingInterval === 'year'" class="text-xs text-emerald-500 mt-1 font-medium">Melhor custo-benefício</div>

                                    <div class="mt-2 text-sm text-[var(--text-color-secondary)] min-h-[44px] leading-relaxed">
                                        {{ p.public_description || '—' }}
                                    </div>

                                    <Divider class="my-4" />

                                    <ul v-if="p.bullets?.length" class="space-y-2 text-sm">
                                        <li v-for="b in p.bullets" :key="b.id" class="flex items-start gap-2">
                                            <i class="pi pi-check mt-1 text-emerald-500"></i>
                                            <span :class="b.highlight ? 'font-semibold' : 'text-[var(--text-color-secondary)]'">
                                                {{ b.text }}
                                            </span>
                                        </li>
                                    </ul>

                                    <div v-else class="text-sm text-[var(--text-color-secondary)]">Benefícios em breve.</div>

                                    <div class="mt-5">
                                        <Button
                                            label="Começar"
                                            class="w-full"
                                            :severity="p.is_featured ? 'success' : 'secondary'"
                                            :outlined="!p.is_featured"
                                            icon="pi pi-arrow-right"
                                            @click="go(`/auth/signup?plan=${encodeURIComponent(p.plan_key)}&interval=${billingInterval}`)"
                                        />
                                    </div>

                                    <div class="mt-3 text-xs text-[var(--text-color-secondary)]">Plano vem da vitrine SaaS — sem mexer no código.</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="mt-6 text-xs text-[var(--text-color-secondary)]">Dica: esses planos podem mapear diretamente para entitlements (FREE/PRO) e features (plan_features).</div>
            </div>
        </section>

        <!-- FOOTER -->
        <footer class="border-t border-[var(--surface-border)]">
            <div class="mx-auto max-w-7xl px-4 md:px-6 py-8 flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
                <div>
                    <div class="font-semibold">{{ brandName }}</div>
                    <div class="text-xs text-[var(--text-color-secondary)] mt-1">© {{ year }} — Todos os direitos reservados.</div>
                </div>

                <div class="flex flex-wrap gap-2">
                    <Button label="Entrar" severity="secondary" outlined icon="pi pi-sign-in" @click="go('/auth/login')" />
                    <Button label="Criar conta" icon="pi pi-bolt" @click="goStart()" />
                </div>
            </div>
        </footer>
    </div>
</template>

<style scoped>
.hero-grid {
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(circle at 30% 20%, black 0%, transparent 65%);
}

.hero-noise {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
    background-size: 180px 180px;
}

.hero-underline {
    position: relative;
    display: inline-block;
    white-space: nowrap;
}
.hero-underline::after {
    content: '';
    position: absolute;
    left: -2%;
    right: -2%;
    bottom: 0.12em;
    height: 0.5em;
    background: linear-gradient(90deg, rgba(16, 185, 129, 0), rgba(16, 185, 129, 0.22), rgba(99, 102, 241, 0.18), rgba(16, 185, 129, 0));
    border-radius: 999px;
    z-index: -1;
    filter: blur(0.2px);
}
</style>
