AI Insights Card with Tailwind Metrics Panel

<article class="relative ring-1 ring-neutral-200 sm:p-8 flex flex-col hover:-translate-y-0.5 transition-transform duration-200 bg-white rounded-3xl px-5 py-5 max-w-xl">
      <div class="flex items-center gap-3 mb-4">
        
        <span class="inline-flex items-center gap-2 rounded-full bg-indigo-400/10 text-indigo-600 text-xs px-2.5 py-1">
          <span class="h-1.5 w-1.5 rounded-full bg-indigo-400"></span>
          AI Intelligence
        </span>
      </div>
      <h3 class="text-2xl sm:text-3xl font-semibold tracking-tight text-neutral-900 leading-tight mb-4">AI-Powered Insights</h3>
      <p class="text-neutral-600 text-base leading-relaxed mb-6 flex-1">Leverage artificial intelligence for predictive analytics, automated decision-making, and strategic insights.</p>

      <!-- AI insights panel -->
      <div class="mt-auto">
        <div class="rounded-2xl bg-zinc-100 ring-1 ring-neutral-200 p-4">
          <div class="flex items-center justify-between mb-3">
            <p class="text-sm font-medium text-neutral-900 flex items-center gap-2">
              </p><div class="h-2 w-2 rounded-full bg-indigo-400 animate-pulse"></div>
              AI Analysis
            <p></p>
            <span class="text-xs font-medium text-indigo-600">Active</span>
          </div>
          <div class="space-y-2">
            <div class="flex items-center justify-between px-3.5 py-2 rounded-lg bg-white/60 ring-1 ring-neutral-200">
              <span class="text-sm text-neutral-600 flex items-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="trending-up" class="lucide lucide-trending-up w-3.5 h-3.5 text-emerald-500"><path d="M16 7h6v6" class=""></path><path d="m22 7-8.5 8.5-5-5L2 17" class=""></path></svg>
                Performance Score
              </span>
              <span class="text-sm font-medium text-neutral-900">94%</span>
            </div>
            <div class="flex items-center justify-between px-3.5 py-2 rounded-lg bg-white/60 ring-1 ring-neutral-200">
              <span class="text-sm text-neutral-600 flex items-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="lightbulb" class="lucide lucide-lightbulb w-3.5 h-3.5 text-amber-500"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5" class=""></path><path d="M9 18h6" class=""></path><path d="M10 22h4" class=""></path></svg>
                Recommendations
              </span>
              <span class="text-sm font-medium text-neutral-900">12 new</span>
            </div>
          </div>
        </div>
      </div>
    </article>