Smart Home Room Control Dashboard Card

<div class="lg:col-span-2">
  <div
    class="glass-card animate-slide-up delay-800 transition-all duration-500 hover:bg-white/8 hover:shadow-2xl hover:shadow-blue-500/10 rounded-3xl pt-8 pr-8 pb-8 pl-8">
    <div class="flex mb-8 items-center justify-between">
      <div>
        <h3 class="text-2xl font-bold tracking-tight mb-2 text-hover">Room Controls</h3>
        <p class="text-white/60 hover:text-white/80 transition-colors">Manage all your smart rooms</p>
      </div>
      <button class="text-sm text-blue-400 hover:text-blue-300 transition-all bg-blue-500/10 px-4 py-2 rounded-xl hover:bg-blue-500/20 hover:scale-105 button-hover">View All</button>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <!-- Kitchen -->
      <div class="room-card bg-white/5 rounded-2xl p-6 border border-white/5">
        <div class="flex items-center justify-between mb-4">
          <div class="flex items-center space-x-4">
            <div class="p-3 rounded-xl bg-gradient-to-br from-purple-500/20 to-pink-500/20 icon-hover">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                data-lucide="chef-hat" class="lucide lucide-chef-hat w-5 h-5 text-purple-400">
                <path
                  d="M17 21a1 1 0 0 0 1-1v-5.35c0-.457.316-.844.727-1.041a4 4 0 0 0-2.134-7.589 5 5 0 0 0-9.186 0 4 4 0 0 0-2.134 7.588c.411.198.727.585.727 1.041V20a1 1 0 0 0 1 1Z">
                </path>
                <path d="M6 17h12"></path>
              </svg>
            </div>
            <div>
              <span class="font-semibold text-lg hover:text-purple-300 transition-colors cursor-pointer">Kitchen</span>
              <p class="text-xs text-white/60">
                <span class="number-digit" style="--digit-delay: 1.6s">3</span> devices active
              </p>
            </div>
          </div>
          <div class="toggle-switch w-12 h-6 relative cursor-pointer bg-gray-600 rounded-full"
            onclick="toggleSwitch(this)">
            <div class="toggle-knob absolute right-1 top-1 w-4 h-4 bg-white rounded-full transform translate-x-4"
              style="transform: translateX(0px);"></div>
          </div>
        </div>
        <div class="space-y-2">
          <div class="w-full bg-white/10 rounded-full h-1 hover:h-2 transition-all">
            <div
              class="bg-gradient-to-r from-purple-400 to-pink-400 h-1 rounded-full animate-progress-fill delay-1400 hover:h-2 transition-all"
              style="--progress-width: 80%"></div>
          </div>
          <p class="text-xs text-white/50 hover:text-white/70 transition-colors">Cooking mode active</p>
        </div>
      </div>

      <!-- Bedroom -->
      <div class="room-card bg-white/5 rounded-2xl p-6 border border-white/5">
        <div class="flex items-center justify-between mb-4">
          <div class="flex items-center space-x-4">
            <div class="p-3 rounded-xl bg-gradient-to-br from-blue-500/20 to-indigo-500/20 icon-hover">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                data-lucide="bed" class="lucide lucide-bed w-5 h-5 text-blue-400">
                <path d="M2 4v16"></path>
                <path d="M2 8h18a2 2 0 0 1 2 2v10"></path>
                <path d="M2 17h20"></path>
                <path d="M6 8v9"></path>
              </svg>
            </div>
            <div class="">
              <span class="font-semibold text-lg hover:text-blue-300 transition-colors cursor-pointer">Bedroom</span>
              <p class="text-xs text-white/60">Sleep mode</p>
            </div>
          </div>
          <div
            class="toggle-switch w-12 h-6 relative cursor-pointer active bg-gradient-to-r from-green-500 to-emerald-500 rounded-full"
            onclick="toggleSwitch(this)">
            <div class="toggle-knob absolute left-1 top-1 w-4 h-4 bg-white rounded-full"
              style="transform: translateX(16px);"></div>
          </div>
        </div>
        <div class="flex items-center space-x-3 hover-lift cursor-pointer group">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="moon"
            class="lucide lucide-moon w-4 h-4 text-blue-300 group-hover:scale-110 transition-transform">
            <path
              d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401">
            </path>
          </svg>
          <span class="text-xs text-white/60 group-hover:text-white/80 transition-colors">Night mode until <span class="number-digit" style="--digit-delay: 1.8s">7</span>:00
          AM</span>
        </div>
      </div>

      <!-- Living Room -->
      <div class="room-card bg-white/5 rounded-2xl p-6 border border-white/5">
        <div class="flex items-center justify-between mb-4">
          <div class="flex items-center space-x-4">
            <div class="p-3 rounded-xl bg-gradient-to-br from-orange-500/20 to-red-500/20 icon-hover">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="tv"
                class="lucide lucide-tv w-5 h-5 text-orange-400">
                <path d="m17 2-5 5-5-5"></path>
                <rect width="20" height="15" x="2" y="7" rx="2"></rect>
              </svg>
            </div>
            <div>
              <span class="font-semibold text-lg hover:text-orange-300 transition-colors cursor-pointer">Living Room</span>
              <p class="text-xs text-white/60">Entertainment mode</p>
            </div>
          </div>
          <div class="toggle-switch w-12 h-6 relative cursor-pointer bg-gray-600 rounded-full"
            onclick="toggleSwitch(this)">
            <div class="toggle-knob absolute right-1 top-1 w-4 h-4 bg-white rounded-full transform translate-x-4"
              style="transform: translateX(0px);"></div>
          </div>
        </div>
        <div class="space-y-2">
          <div class="w-full bg-white/10 rounded-full h-1 hover:h-2 transition-all">
            <div
              class="bg-gradient-to-r from-orange-400 to-red-400 h-1 rounded-full animate-progress-fill delay-1600 hover:h-2 transition-all"
              style="--progress-width: 60%"></div>
          </div>
          <p class="text-xs text-white/50 hover:text-white/70 transition-colors">Movie night preset</p>
        </div>
      </div>

      <!-- Office -->
      <div class="room-card bg-white/5 rounded-2xl p-6 border border-white/5">
        <div class="flex items-center justify-between mb-4">
          <div class="flex items-center space-x-4">
            <div class="p-3 rounded-xl bg-gradient-to-br from-gray-500/20 to-slate-500/20 icon-hover">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                data-lucide="monitor" class="lucide lucide-monitor w-5 h-5 text-gray-400">
                <rect width="20" height="14" x="2" y="3" rx="2"></rect>
                <line x1="8" x2="16" y1="21" y2="21"></line>
                <line x1="12" x2="12" y1="17" y2="21"></line>
              </svg>
            </div>
            <div>
              <span class="font-semibold text-lg hover:text-gray-300 transition-colors cursor-pointer">Office</span>
              <p class="text-xs text-white/60">Away mode</p>
            </div>
          </div>
          <div class="toggle-switch w-12 h-6 bg-gray-600 rounded-full relative cursor-pointer"
            onclick="toggleSwitch(this)">
            <div class="toggle-knob absolute left-1 top-1 w-4 h-4 bg-white rounded-full"></div>
          </div>
        </div>
        <div class="flex items-center space-x-3 hover-lift cursor-pointer group">
          <div class="w-2 h-2 bg-gray-400 rounded-full group-hover:scale-150 transition-transform"></div>
          <span class="text-xs text-white/60 group-hover:text-white/80 transition-colors">Auto-schedule active</span>
        </div>
      </div>
    </div>
  </div>
</div>