@props([
  'label' => '',
  'value' => '',
  'trend' => null,
  'trendDirection' => null,
  'variant' => 'default',
  'icon' => null,
])
@php
  $variantClasses = match ($variant) {
    'gold'     => 'bg-cmu-gold-50 border-cmu-gold-200 text-cmu-green-900',
    'blue'     => 'bg-cmu-green-50 border-cmu-green-200 text-cmu-green-900',
    'featured' => 'bg-cmu-green-800 text-white border-cmu-green-800 shadow-cmu-raised bg-cmu-pattern',
    default    => 'bg-white border-gray-200 text-cmu-charcoal',
  };

  $labelTone = $variant === 'featured'
      ? 'text-cmu-gold-200'
      : ($variant === 'gold' ? 'text-cmu-gold-700' : 'text-cmu-ink');

  $valueTone = $variant === 'featured' ? 'text-white' : 'text-cmu-green-900';

  $trendTone = match ($trendDirection) {
    'up'   => 'text-cmu-green-700',
    'down' => 'text-cmu-red-700',
    default => $variant === 'featured' ? 'text-cmu-gold-200' : 'text-cmu-ink',
  };

  $trendIcon = match ($trendDirection) {
    'up'   => '▲',
    'down' => '▼',
    default => '·',
  };
@endphp
<div @class(['rounded-cmu-lg border shadow-cmu-card p-5 flex flex-col gap-3', $variantClasses])>
  <div class="flex items-start justify-between gap-3">
    <div class="text-xs font-semibold tracking-[0.12em] uppercase {{ $labelTone }}">
      {{ $label }}
    </div>
    @if($icon)
      <div class="w-8 h-8 rounded-cmu flex items-center justify-center {{ $variant === 'featured' ? 'bg-white/10 text-cmu-gold-400' : 'bg-cmu-green-50 text-cmu-green-800' }}">
        {!! $icon !!}
      </div>
    @endif
  </div>
  <div class="font-display text-3xl font-semibold leading-none {{ $valueTone }}">
    {{ $value }}
  </div>
  @if($trend)
    <div class="text-xs font-medium {{ $trendTone }} flex items-center gap-1">
      <span aria-hidden="true">{{ $trendIcon }}</span>
      <span>{{ $trend }}</span>
    </div>
  @endif
</div>