@props([
    'statistic',
    'tone' => 'light',   // light | dark
])

{{--
    Animated counter. The final number is rendered server-side, so the value is
    present without JavaScript and for reduced-motion visitors; GSAP counts up
    from zero to the same figure when motion is allowed.
--}}
<div {{ $attributes->merge(['class' => 'flex flex-col gap-1']) }} data-reveal-child>
    <p @class([
        'font-display text-4xl font-bold tracking-[-0.03em] sm:text-5xl',
        'text-primary' => $tone === 'light',
        'text-white' => $tone === 'dark',
    ])>
        @if ($statistic->prefix)<span class="text-2xl align-top">{{ $statistic->prefix }}</span>@endif
        <span data-count-to="{{ $statistic->numericValue() }}">{{ number_format($statistic->numericValue()) }}</span>
        @if ($statistic->suffix)<span>{{ $statistic->suffix }}</span>@endif
    </p>

    <p @class([
        'text-sm font-medium',
        'text-text-secondary' => $tone === 'light',
        'text-white/70' => $tone === 'dark',
    ])>{{ $statistic->label }}</p>

    @if ($statistic->description)
        <p @class([
            'text-xs',
            'text-text-muted' => $tone === 'light',
            'text-white/50' => $tone === 'dark',
        ])>{{ $statistic->description }}</p>
    @endif
</div>