Analytics Metrics Card

<div class="bg-white/[0.03] backdrop-blur-sm ring-1 ring-white/[0.08] rounded-3xl p-4">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap');
  </style>
  <div class="xl:w-[380px] flex-shrink-0">
    <div class="space-y-6">
      <div class="relative">
        <div class="absolute -inset-2 bg-gradient-to-r from-emerald-500/10 via-transparent to-blue-500/10 rounded-2xl blur-xl"></div>
        <div class="relative">
          <div class="flex flex-col gap-2 text-center mb-3 items-start">
            <div id="primaryMetric" class="md:text-8xl text-8xl font-light text-white tracking-tight font-[Manrope]">+127%</div>
          </div>
          <div id="metricDescription" class="text-white/60 text-left mb-1">Total acquisition growth</div>
          <div id="metricDetails" class="text-sm text-white/40 font-[Inter]">143,829 new users acquired</div>
        </div>
      </div>
      <div class="grid grid-cols-2 gap-6">
        <div class="p-4 rounded-xl bg-gradient-to-br from-white/[0.03] to-white/[0.01] ring-1 ring-white/[0.08]">
          <div class="text-2xl font-semibold text-white mb-1">3.42%</div>
          <div class="text-sm text-white/50">Avg CTR</div>
          <div class="flex items-center gap-1 mt-2">
            <div class="h-1.5 w-1.5 rounded-full bg-emerald-400"></div>
            <span class="text-xs text-emerald-400">+0.8%</span>
          </div>
        </div>
        <div class="p-4 rounded-xl bg-gradient-to-br from-white/[0.03] to-white/[0.01] ring-1 ring-white/[0.08]">
          <div class="text-2xl font-semibold text-white mb-1">$2.14</div>
          <div class="text-sm text-white/50">Avg CPC</div>
          <div class="flex items-center gap-1 mt-2">
            <div class="h-1.5 w-1.5 rounded-full bg-rose-400"></div>
            <span class="text-xs text-rose-400">+$0.23</span>
          </div>
        </div>
      </div>
      <div class="p-5 rounded-xl bg-gradient-to-br from-white/[0.03] to-white/[0.01] ring-1 ring-white/[0.08] backdrop-blur-sm">
        <div class="flex items-start gap-3 mb-4">
          <div class="h-8 w-8 rounded-lg bg-violet-500/15 flex items-center justify-center flex-shrink-0">
            <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" class="h-4 w-4 text-violet-400">
              <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"></path>
              <path d="M9 18h6"></path>
              <path d="M10 22h4"></path>
            </svg>
          </div>
          <div>
            <h3 class="text-lg font-medium text-white mb-2">Strategic Insights</h3>
            <div id="insightText" class="space-y-2.5 text-sm text-white/70 leading-relaxed">
              <p class="font-[Inter]">
                Google Ads and LinkedIn are driving the highest quality leads with 2.3x better LTV. Consider reallocating 15% of Meta budget.
              </p>
            </div>
          </div>
        </div>
        <div class="flex items-center gap-2 pt-3 border-t border-white/[0.06]">
          <button id="refreshInsights" class="text-xs text-violet-400 hover:text-violet-300 font-medium flex items-center gap-1 transition-colors">
            <span class="font-[Inter]">Refresh analysis</span>
            <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" class="h-3 w-3">
              <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"></path>
              <path d="M21 3v5h-5"></path>
              <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"></path>
              <path d="M8 16H3v5"></path>
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>
  <script>
    document.getElementById('refreshInsights').addEventListener('click',function(){const icon=this.querySelector('svg');icon.style.transform='rotate(360deg)';icon.style.transition='transform 0.5s ease';setTimeout(()=>{icon.style.transform='rotate(0deg)';},500);});
  </script>
</div>