<template>
  <div class="bg-white/60 backdrop-blur-md rounded-[1.5rem] overflow-hidden shadow-[0_8px_30px_rgb(0,0,0,0.04)] border border-white/60 flex flex-col animate-pulse">
    <div class="aspect-[4/3] bg-slate-200" />
    <div class="p-4 flex-1 flex flex-col">
      <div class="flex justify-between mb-4">
        <div class="w-1/2">
          <div class="h-2.5 bg-slate-200 rounded-full w-1/2 mb-2" />
          <div class="h-4 bg-slate-200 rounded-full w-3/4" />
        </div>
        <div class="w-10 h-6 bg-slate-200 rounded-lg" />
      </div>

      <div class="space-y-2 mb-6">
        <div class="h-3 bg-slate-200 rounded-full w-full" />
        <div class="h-3 bg-slate-200 rounded-full w-2/3" />
      </div>

      <div class="flex gap-2 mb-4 mt-auto">
        <div class="h-5 bg-slate-200 rounded-md w-16" />
        <div class="h-5 bg-slate-200 rounded-md w-16" />
      </div>

      <div class="pt-3 border-t border-white/40 flex justify-between items-end">
        <div class="w-1/2">
          <div class="h-3 bg-slate-200 rounded-full w-1/2 mb-2" />
          <div class="h-6 bg-slate-200 rounded-full w-3/4" />
        </div>
        <div class="w-24 h-9 bg-slate-200 rounded-xl" />
      </div>
    </div>
  </div>
</template>
