<div class="relative overflow-hidden rounded-2xl border border-border bg-surface p-5 shadow-sm">
    <div class="mb-3 flex items-center justify-between">
        <div>
            <p class="text-[10px] font-bold uppercase tracking-widest text-text-muted">14-Day Forecast</p>
            <h3 class="text-lg font-black text-text-base">Price Trend</h3>
        </div>
        <flux:badge color="orange">Pro</flux:badge>
    </div>

    <svg viewBox="0 0 200 60" class="mb-4 h-16 w-full opacity-40"
         fill="none" stroke="var(--color-primary)" stroke-width="2.5"
         stroke-linecap="round" stroke-linejoin="round">
        <polyline points="0,45 20,38 40,42 60,30 80,35 100,20 120,25 140,15 160,22 180,12 200,18" />
    </svg>

    <div class="absolute inset-0 flex flex-col items-center justify-center rounded-2xl bg-surface/80 backdrop-blur-sm">
        <iconify-icon icon="lucide:lock" class="mb-2 text-3xl text-primary"></iconify-icon>
        <p class="mb-3 text-sm font-bold text-text-base">14-day forecast is a Pro feature</p>
        <flux:button href="{{ route('register') }}" as="a" variant="primary" size="sm">
            Unlock Forecast
        </flux:button>
    </div>
</div>
