<script setup>
import { defineAsyncComponent } from 'vue';
import MelissaConfigPage from './MelissaConfigPage.vue';

const ConfiguracoesTwilioWhatsappPage = defineAsyncComponent(
    () => import('@/layout/configuracoes/ConfiguracoesTwilioWhatsappPage.vue')
);

const emit = defineEmits(['close']);

const faq = [
    { icon: 'pi pi-verified',    label: 'Número novo',     text: 'AgenciaPSI provisiona um número 100% seu, via API oficial da Meta.' },
    { icon: 'pi pi-check-circle', label: 'Entregabilidade', text: 'Bloqueios são raros — o canal oficial tem prioridade e maior alcance.' },
    { icon: 'pi pi-credit-card', label: 'Créditos',        text: 'Cada mensagem consome créditos do seu pacote pré-pago.' }
];
</script>

<template>
    <MelissaConfigPage
        title="WhatsApp Oficial AgenciaPSI"
        icon="pi pi-verified"
        subtitle="Número provisionado pela AgenciaPSI via Twilio + API oficial Meta. Maior entregabilidade, custo por mensagem."
        faq-sub="Canal oficial"
        :faq="faq"
        @close="emit('close')"
    >
        <ConfiguracoesTwilioWhatsappPage />
    </MelissaConfigPage>
</template>
