@props([
    'title',
    'subtext',
    'name',
    'metricLabel1',
    'metricValue1',
    'metricLabel2',
    'metricValue2',
    'color' => 'indigo', // indigo, pink
    'emptyMessage' => 'No data available',
    'emptyIcon' => null,
])

@php
    $colors = [
        'indigo' => [
            'icon_bg' => 'bg-gradient-to-br from-indigo-500 to-violet-600',
            'icon_glow' => 'shadow-indigo-500/30',
            'top_bar' => 'from-indigo-400 via-violet-500 to-purple-500',
            'orb' => 'bg-indigo-400/30',
            'value_color' => 'text-indigo-600',
            'eyebrow_color' => 'text-indigo-700',
            'eyebrow_bg' => 'bg-indigo-100/70 ring-indigo-200/60',
        ],
        'pink' => [
            'icon_bg' => 'bg-gradient-to-br from-pink-500 to-rose-600',
            'icon_glow' => 'shadow-pink-500/30',
            'top_bar' => 'from-pink-400 via-rose-500 to-fuchsia-500',
            'orb' => 'bg-pink-400/30',
            'value_color' => 'text-pink-600',
            'eyebrow_color' => 'text-pink-700',
            'eyebrow_bg' => 'bg-pink-100/70 ring-pink-200/60',
        ],
    ];

    $theme = $colors[$color] ?? $colors['indigo'];
@endphp

<div class="glass-card-strong group relative overflow-hidden rounded-3xl transition-all duration-300 hover:-translate-y-0.5 hover:shadow-2xl hover:shadow-blue-900/10">
    <!-- Top gradient bar -->
    <div class="absolute inset-x-0 top-0 h-[3px] bg-gradient-to-r {{ $theme['top_bar'] }}"></div>

    <!-- Decorative orbs -->
    <div class="pointer-events-none absolute -right-10 -top-10 h-40 w-40 rounded-full {{ $theme['orb'] }} blur-3xl transition-opacity duration-500 group-hover:opacity-90"></div>

    <div class="relative px-6 py-5">
        <!-- Header -->
        <div class="flex items-center gap-3">
            <div class="flex h-11 w-11 items-center justify-center rounded-2xl {{ $theme['icon_bg'] }} shadow-lg {{ $theme['icon_glow'] }} ring-1 ring-white/40">
                {{ $icon ?? '' }}
            </div>
            <div class="min-w-0 flex-1">
                <h2 class="truncate text-base font-semibold tracking-tight text-zinc-900">{{ $title }}</h2>
                <p class="mt-0.5 truncate text-xs text-zinc-500">{{ $subtext }}</p>
            </div>
            <span class="hidden rounded-full {{ $theme['eyebrow_bg'] }} px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider {{ $theme['eyebrow_color'] }} ring-1 ring-inset sm:inline-flex">
                Top
            </span>
        </div>
    </div>

    <div class="relative border-t border-white/40 bg-white/30 px-6 py-5 backdrop-blur-xl">
        @if($name)
            <div class="space-y-4">
                <div>
                    <p class="text-[11px] font-semibold uppercase tracking-wider text-zinc-500">{{ str_contains($title, 'Product') ? 'Product' : 'Category' }}</p>
                    <p class="mt-1 line-clamp-2 text-2xl font-bold tracking-tight text-zinc-900">{{ $name }}</p>
                </div>
                <div class="grid grid-cols-2 gap-3">
                    <div class="glass-pill rounded-xl p-3">
                        <p class="text-[10px] font-semibold uppercase tracking-wider text-zinc-500">{{ $metricLabel1 }}</p>
                        <p class="mt-1 text-lg font-bold {{ $theme['value_color'] }}">{{ $metricValue1 }}</p>
                    </div>
                    <div class="glass-pill rounded-xl p-3">
                        <p class="text-[10px] font-semibold uppercase tracking-wider text-zinc-500">{{ $metricLabel2 }}</p>
                        <p class="mt-1 text-lg font-bold text-zinc-900">{{ $metricValue2 }}</p>
                    </div>
                </div>
            </div>
        @else
            <div class="flex flex-col items-center justify-center py-6 text-zinc-500">
                <div class="mb-3 flex h-12 w-12 items-center justify-center rounded-2xl bg-white/60 ring-1 ring-white/60 backdrop-blur-sm">
                    {{ $emptyIcon }}
                </div>
                <p class="text-sm font-medium text-zinc-600">{{ $emptyMessage }}</p>
            </div>
        @endif
    </div>
</div>