export default function PetZone() {
  return (
    <div className="glass-card p-4 relative overflow-hidden" style={{ minHeight: 120 }}>
      <h3 className="text-sm font-bold text-kira-plum mb-2 flex items-center gap-2">
        <span>🐱</span> Pet Zone
      </h3>
      <div className="flex items-end justify-around gap-4">
        {/* Orange fluffy cat */}
        <div className="flex flex-col items-center animate-bounce-slow">
          <div className="relative">
            {/* Body */}
            <div className="w-14 h-10 bg-orange-300 rounded-3xl rounded-br-xl relative">
              {/* Head */}
              <div className="w-10 h-9 bg-orange-300 rounded-full absolute -top-5 left-2">
                {/* Ears */}
                <div className="absolute -top-2 left-0 w-3 h-3 bg-orange-300 rounded-tl-full transform -rotate-12" />
                <div className="absolute -top-2 right-0 w-3 h-3 bg-orange-300 rounded-tr-full transform rotate-12" />
                {/* Eyes */}
                <div className="absolute top-2 left-1.5 w-2 h-2.5 bg-amber-800 rounded-full" />
                <div className="absolute top-2 right-1.5 w-2 h-2.5 bg-amber-800 rounded-full" />
                {/* Nose */}
                <div className="absolute top-3.5 left-3.5 w-1.5 h-1 bg-pink-300 rounded-full" />
              </div>
              {/* Tail */}
              <div className="absolute -right-3 top-1 w-8 h-2.5 bg-orange-300 rounded-full origin-left rotate-12" />
            </div>
            {/* Paws */}
            <div className="flex gap-3 mt-0.5 ml-2">
              <div className="w-2.5 h-1.5 bg-orange-200 rounded-full" />
              <div className="w-2.5 h-1.5 bg-orange-200 rounded-full" />
            </div>
          </div>
          <span className="text-[10px] text-kira-plum/60 mt-1 font-medium">Mochi</span>
        </div>

        {/* Black shorthair cat - sleeping */}
        <div className="flex flex-col items-center">
          <div className="relative animate-float-slow">
            {/* Sleeping body (curled up) */}
            <div className="w-16 h-8 bg-gray-900 rounded-full relative overflow-hidden">
              {/* Head tucked in */}
              <div className="w-8 h-6 bg-gray-800 rounded-full absolute -left-2 -top-1">
                {/* Ears */}
                <div className="absolute -top-1.5 left-1 w-2.5 h-2.5 bg-gray-900 rounded-tl-full transform -rotate-12" />
                <div className="absolute -top-1.5 right-1 w-2.5 h-2.5 bg-gray-900 rounded-tr-full transform rotate-12" />
                {/* Closed eyes (sleeping) */}
                <div className="absolute top-2 left-1 w-2 h-0.5 bg-gray-600 rounded-full" />
                <div className="absolute top-2 right-1 w-2 h-0.5 bg-gray-600 rounded-full" />
              </div>
              {/* Tail curled around */}
              <div className="absolute -right-2 top-2 w-6 h-2 bg-gray-900 rounded-full" />
            </div>
            {/* ZZZ */}
            <div className="absolute -top-3 -right-2 text-[10px] text-kira-lav font-bold opacity-60 animate-zzz">Z z z</div>
          </div>
          <span className="text-[10px] text-kira-plum/60 mt-1 font-medium">Luna</span>
        </div>
      </div>

      <style>{`
        @keyframes bounce-slow {
          0%, 100% { transform: translateY(0); }
          50% { transform: translateY(-4px); }
        }
        @keyframes float-slow {
          0%, 100% { transform: translateY(0) scale(1); }
          50% { transform: translateY(-2px) scale(1.01); }
        }
        @keyframes zzz {
          0%, 100% { opacity: 0.3; transform: translateX(0); }
          50% { opacity: 0.8; transform: translateX(3px); }
        }
        .animate-bounce-slow { animation: bounce-slow 3s ease-in-out infinite; }
        .animate-float-slow { animation: float-slow 4s ease-in-out infinite; }
        .animate-zzz { animation: zzz 2s ease-in-out infinite; }
      `}</style>
    </div>
  );
}
