@props(['value' => 0, 'label' => null, 'sub' => null, 'tone' => 'accent', 'size' => 'md'])
@php
    $v = max(0, min(100, (float) $value));
    $r = 34;
    $circ = 2 * M_PI * $r;
    $offset = $circ * (1 - $v / 100);
    $stroke = [
        'accent' => 'text-accent', 'online' => 'text-online',
        'warning' => 'text-warning', 'offline' => 'text-offline', 'cyan' => 'text-cyan',
    ][$tone] ?? 'text-accent';
    $box = $size === 'lg' ? 'h-24 w-24' : 'h-16 w-16';
    $num = $size === 'lg' ? 'text-lg' : 'text-xs';
@endphp
<div {{ $attributes->merge(['class' => 'flex flex-col items-center']) }}>
    <div class="relative {{ $box }}">
        {{-- progress via SVG stroke attributes (not inline style) --}}
        <svg class="{{ $box }} -rotate-90" viewBox="0 0 80 80" aria-hidden="true">
            <circle cx="40" cy="40" r="{{ $r }}" fill="none" stroke="currentColor" stroke-width="6" class="text-line" />
            <circle cx="40" cy="40" r="{{ $r }}" fill="none" stroke="currentColor" stroke-width="6" stroke-linecap="round"
                    stroke-dasharray="{{ $circ }}" stroke-dashoffset="{{ $offset }}" class="{{ $stroke }} transition-[stroke-dashoffset] duration-700" />
        </svg>
        <div class="absolute inset-0 grid place-items-center">
            <span class="tabular font-mono {{ $num }} font-semibold text-ink">{{ round($v) }}<span class="text-ink-3">%</span></span>
        </div>
    </div>
    @if ($label)
        <p class="mt-2 font-mono text-[11px] uppercase tracking-wider text-ink-3">{{ $label }}</p>
    @endif
    @if ($sub)
        <p class="font-mono text-[11px] text-ink-4">{{ $sub }}</p>
    @endif
</div>