<!-- Smart Wind Compass & Anemometer -->
<div class="smart-wind-compass p-5 rounded-3xl bg-slate-900 border border-slate-800 shadow-xl flex items-center justify-between"
     hx-state='{ "speedKmh": 24.5, "directionDeg": 45, "gustKmh": 38.0 }'>
  <div>
    <span class="text-[10px] font-black uppercase tracking-widest text-indigo-400">Ultrasonic Anemometer</span>
    <div class="flex items-baseline gap-2 mt-1">
      <span class="text-3xl font-black text-white" hx-text="speedKmh">24.5</span>
      <span class="text-xs font-bold text-slate-400 uppercase">KM/H</span>
    </div>
    <p class="text-[10px] text-slate-400 mt-0.5">Gusting to <span class="font-bold text-white" hx-text="gustKmh">38.0</span> km/h • Direction NE</p>
  </div>
  
  <!-- Rotating Compass Dial -->
  <div class="relative w-20 h-20 rounded-full border-2 border-slate-700 bg-slate-950 flex items-center justify-center">
    <span class="absolute top-1 text-[8px] font-black text-slate-400">N</span>
    <span class="absolute bottom-1 text-[8px] font-black text-slate-400">S</span>
    <span class="absolute left-1 text-[8px] font-black text-slate-400">W</span>
    <span class="absolute right-1 text-[8px] font-black text-slate-400">E</span>
    <!-- Arrow Needle -->
    <div class="w-1.5 h-10 bg-indigo-500 rounded-full transform rotate-45 origin-center transition-transform shadow-md"></div>
  </div>
</div>