<template>
    <div
        v-if="!isPaidTier"
        class="relative overflow-hidden rounded-2xl border border-accent/30 bg-gradient-to-r from-accent/10 via-accent/5 to-transparent p-5 sm:p-6"
    >
        <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
            <div class="flex items-start gap-4">
                <div class="shrink-0 w-11 h-11 rounded-2xl bg-accent text-white flex items-center justify-center shadow-md">
                    <iconify-icon class="text-xl" icon="lucide:sparkles"></iconify-icon>
                </div>
                <div class="space-y-1">
                    <h3 class="text-lg sm:text-xl font-black text-zinc-800 leading-tight">
                        Stop guessing. Get a buy-or-wait alert before every fill-up.
                    </h3>
                    <p class="text-sm text-zinc-500">
                        14-day predictions + daily price-drop alerts across
                        <span class="font-bold text-zinc-800">{{ stationCountLabel }}</span> UK stations.
                        From <span class="font-bold text-zinc-800">£0.99/mo</span>.
                    </p>
                </div>
            </div>
            <a
                :href="ctaHref"
                class="shrink-0 inline-flex items-center justify-center gap-2 px-5 py-3 rounded-xl bg-accent text-white text-sm font-black shadow-lg hover:bg-accent-content transition-colors"
            >
                {{ ctaLabel }}
                <iconify-icon class="text-base" icon="lucide:arrow-right"></iconify-icon>
            </a>
        </div>
    </div>
</template>

<script setup>
import { computed } from 'vue'
import { useAuth } from '../composables/useAuth.js'

const props = defineProps({
    stationCount: { type: Number, default: null },
})

const { isAuthenticated, isPaidTier } = useAuth()

const stationCountLabel = computed(() => {
    if (!props.stationCount) {
        return '14,500+'
    }
    return new Intl.NumberFormat('en-GB').format(props.stationCount)
})

const ctaHref = computed(() => isAuthenticated.value ? '#pricing' : '/register?tier=plus&cadence=monthly')
const ctaLabel = computed(() => isAuthenticated.value ? 'See plans' : 'Start saving')
</script>
