<!-- Smart EV Battery & Range Estimator -->
<div class="smart-ev-battery-range p-5 rounded-3xl bg-slate-900 border border-slate-800 shadow-xl space-y-4"
     hx-state='{ "pct": 84, "rangeKm": 438, "charging": false }'>
  <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-emerald-400">EV Traction Battery</span>
    <span class="text-[10px] font-bold text-slate-400">400V Architecture</span>
  </div>
  
  <div class="flex items-center justify-between">
    <div>
      <span class="text-4xl font-black text-white" hx-text="pct + '%'">84%</span>
      <span class="text-[10px] font-bold text-slate-400 block mt-0.5">82.4 kWh Remaining</span>
    </div>
    <div class="text-right">
      <span class="text-2xl font-black text-indigo-400" hx-text="rangeKm + ' km'">438 km</span>
      <span class="text-[9px] font-extrabold uppercase text-slate-500 block">EPA Range</span>
    </div>
  </div>

  <!-- Segmented Battery Level Bar -->
  <div class="w-full h-3 rounded-full bg-slate-950 p-0.5 border border-slate-800 flex">
    <div class="h-full rounded-full bg-gradient-to-r from-emerald-500 to-indigo-500 transition-all duration-500" style="width: 84%;"></div>
  </div>
</div>