<!-- Smart 8-Channel Relay Switchboard -->
<div class="smart-relay-switchboard p-5 rounded-3xl bg-slate-900 border border-slate-800 shadow-xl space-y-3">
  <div class="flex items-center justify-between pb-2 border-b border-slate-800/80">
    <span class="text-[10px] font-black uppercase tracking-widest text-indigo-400">8-Channel Power Relays</span>
    <button class="text-[10px] font-extrabold text-rose-400 bg-rose-500/10 px-2 py-0.5 rounded-full border border-rose-500/20" hx-action="$appz.haptic('heavy')">Killswitch</button>
  </div>
  <div class="grid grid-cols-2 gap-2">
    <div class="p-3 rounded-2xl border bg-indigo-600 text-white border-indigo-500 shadow-md shadow-indigo-600/20 flex items-center justify-between transition-all">
      <div>
        <span class="text-xs font-bold block">Relay 01: Server Rack</span>
        <span class="text-[9px] text-indigo-200">420 Watts</span>
      </div>
      <button class="w-8 h-5 rounded-full bg-slate-950 p-0.5 relative transition-all" hx-action="$appz.haptic('selection')">
        <div class="w-4 h-4 rounded-full bg-white shadow-md translate-x-3"></div>
      </button>
    </div>
    <div class="p-3 rounded-2xl border bg-slate-800 text-slate-400 border-slate-700/40 flex items-center justify-between transition-all">
      <div>
        <span class="text-xs font-bold block">Relay 02: HVAC Aux</span>
        <span class="text-[9px] text-slate-500">0 Watts (Off)</span>
      </div>
      <button class="w-8 h-5 rounded-full bg-slate-950 p-0.5 relative transition-all" hx-action="$appz.haptic('selection')">
        <div class="w-4 h-4 rounded-full bg-slate-600 shadow-md"></div>
      </button>
    </div>
  </div>
</div>