@props([
    'label',
    // The figure to show. With `count` set this must be the bare formatted
    // number ("5,400") and prefix/suffix carry the rest ("Rs ", " days"), so
    // the animated and non-animated renderings read identically.
    'value',
    'hint'  => null,
    'icon'  => 'chart',
    'tone'  => 'brand',      // brand | ok | warn | info | indigo | pink | cyan
    'href'  => null,         // makes the whole card a link
    'count' => null,         // numeric value to animate up to; $value stays the fallback
    'prefix' => '',          // rendered before the animated number, e.g. "Rs "
    'suffix' => '',          // rendered after it, e.g. " days"
])

@php
    // Every tone is a full set - icon gradient, ambient glow, hint colour - so a
    // card can never end up with a green icon and a purple halo.
    $tones = [
        'brand'  => [
            'icon' => 'from-brand-500 to-brand-700 shadow-brand-600/40',
            'glow' => 'from-brand-500/25',
            'ring' => 'group-hover:border-brand-400/40',
            'hint' => 'text-brand-600 dark:text-brand-400',
        ],
        'ok'     => [
            'icon' => 'from-emerald-400 to-emerald-600 shadow-emerald-500/40',
            'glow' => 'from-emerald-500/25',
            'ring' => 'group-hover:border-emerald-400/40',
            'hint' => 'text-emerald-600 dark:text-emerald-400',
        ],
        'warn'   => [
            'icon' => 'from-amber-400 to-orange-600 shadow-amber-500/40',
            'glow' => 'from-amber-500/25',
            'ring' => 'group-hover:border-amber-400/40',
            'hint' => 'text-amber-600 dark:text-amber-400',
        ],
        'bad'    => [
            'icon' => 'from-rose-400 to-red-600 shadow-red-500/40',
            'glow' => 'from-red-500/25',
            'ring' => 'group-hover:border-red-400/40',
            'hint' => 'text-red-600 dark:text-red-400',
        ],
        'info'   => [
            'icon' => 'from-blue-400 to-blue-600 shadow-blue-500/40',
            'glow' => 'from-blue-500/25',
            'ring' => 'group-hover:border-blue-400/40',
            'hint' => 'text-blue-600 dark:text-blue-400',
        ],
        'indigo' => [
            'icon' => 'from-indigo-400 to-indigo-600 shadow-indigo-500/40',
            'glow' => 'from-indigo-500/25',
            'ring' => 'group-hover:border-indigo-400/40',
            'hint' => 'text-indigo-600 dark:text-indigo-400',
        ],
        'pink'   => [
            'icon' => 'from-pink-400 to-rose-600 shadow-pink-500/40',
            'glow' => 'from-pink-500/25',
            'ring' => 'group-hover:border-pink-400/40',
            'hint' => 'text-pink-600 dark:text-pink-400',
        ],
        'cyan'   => [
            'icon' => 'from-cyan-400 to-teal-600 shadow-cyan-500/40',
            'glow' => 'from-cyan-500/25',
            'ring' => 'group-hover:border-cyan-400/40',
            'hint' => 'text-cyan-600 dark:text-cyan-400',
        ],
    ];

    $t   = $tones[$tone] ?? $tones['brand'];
    $tag = $href ? 'a' : 'div';
@endphp

<{{ $tag }} @if ($href) href="{{ $href }}" @endif
    {{ $attributes->merge(['class' =>
        'surface group relative isolate overflow-hidden p-4 sm:p-5 transition duration-300 '
        . 'hover:-translate-y-1 hover:shadow-xl hover:shadow-slate-900/5 dark:hover:shadow-black/40 ' . $t['ring']]) }}>

    {{-- Ambient light. Sits behind the content (-z-10) and only warms up on
         hover, so a wall of five cards is calm until one is pointed at. --}}
    <span aria-hidden="true"
          class="pointer-events-none absolute -right-10 -top-12 -z-10 size-32 rounded-full bg-gradient-to-br
                 {{ $t['glow'] }} to-transparent blur-2xl opacity-70 transition-opacity duration-500
                 group-hover:opacity-100"></span>

    <div class="flex items-start justify-between gap-3">
        <div class="min-w-0">
            <p class="truncate text-[11px] font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">
                {{ $label }}
            </p>
            {{-- The server-rendered figure is the fallback: with JavaScript off
                 the correct number is already on the page, and the counter only
                 takes over the text node once it starts running. --}}
            <p class="mt-1.5 text-2xl font-bold tabular-nums tracking-tight text-slate-900 sm:text-3xl dark:text-white">
                @if ($count !== null)
                    <span x-data="counter({{ (float) $count }})">{{ $prefix }}<span x-text="display">{{ $value }}</span>{{ $suffix }}</span>
                @else
                    {{ $value }}
                @endif
            </p>
        </div>

        <span class="grid size-11 shrink-0 place-items-center rounded-xl bg-gradient-to-br {{ $t['icon'] }}
                     text-white shadow-lg transition-transform duration-300 group-hover:scale-110"
              aria-hidden="true">
            <x-icon :name="$icon" class="size-5" />
        </span>
    </div>

    @if ($hint)
        <p class="mt-2.5 truncate text-xs font-medium {{ $t['hint'] }}">{{ $hint }}</p>
    @endif
</{{ $tag }}>