Welcome banner

<script setup>
import PrimaryButton from '@/buttons/PrimaryButton.vue'
import Text          from '@/components/Text.vue'

defineProps({
    heading: {
        type: String,
        default: 'Welcome to the new EmojiCopy',
    },
    body: {
        type: String,
        default: 'The full version is here. Favorites, combos, and collections are ready when you are.',
    },
})
const emit = defineEmits(['cta', 'dismiss'])
</script>

<template>
    <div class="welcome-banner">
        <div class="welcome-banner__icon jp-font">🎉</div>
        <div class="welcome-banner__text">
            <Text tag="span" class="welcome-banner__heading" type="body/m-heavy" :text="heading" />
            <Text tag="span" class="welcome-banner__body" type="body/s" :text="body" />
        </div>
        <div class="welcome-banner__actions">
            <PrimaryButton variant="green" size="md" label="See what's in Pro"
                           @click="emit('cta')" />
            <PrimaryButton variant="gray"  size="md" label="Got it"
                           @click="emit('dismiss')" />
        </div>
    </div>
</template>

<!-- Parent invocation (top of MyEmoji.vue): -->
<WelcomeBanner v-if="!account.dismissedWelcome"
               @cta="router.push('/pricing')"
               @dismiss="account.dismissWelcome()" />

<style scoped>
.welcome-banner {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--r-lg);
    background:
        radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--green-500) 30%, transparent), transparent 60%),
        var(--c-surface-secondary);
    border: 1px solid color-mix(in srgb, var(--green-600) 30%, var(--c-border-primary));
}

.welcome-banner__icon {
    font-size: 2.4rem;
    flex: none;
}

.welcome-banner__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.welcome-banner__heading {
    font-family: var(--ff-inter);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--c-text-primary);
}

.welcome-banner__body {
    font-family: var(--ff-inter);
    font-weight: 400;
    font-size: 1.3rem;
    color: var(--c-text-secondary);
}

.welcome-banner__actions {
    display: flex;
    gap: 8px;
    align-items: center;
}
</style>