<div class="profile-hero-card mb-6">
  <div class="absolute top-0 right-0 w-64 h-64 rounded-full pointer-events-none" style="background:radial-gradient(circle,rgba(128,101,248,.15) 0%,transparent 70%)"></div>
  <div class="relative z-10 flex flex-col sm:flex-row items-start sm:items-center gap-6">
    <div class="profile-avatar-wrap">
      <% if (avatarUrl) { %>
      <img src="<%= avatarUrl %>" alt="" class="w-24 h-24 rounded-2xl object-cover" id="avatar-display"/>
      <% } else { %>
      <div id="avatar-display" class="w-24 h-24 rounded-2xl flex items-center justify-center text-3xl font-black text-white" style="background:linear-gradient(135deg,#8065f8,#4490d3)"><%= initials %></div>
      <% } %>
      <span class="absolute bottom-1 right-1 w-4 h-4 rounded-full border-2 z-10" style="background:#13b3b4;border-color:#0b1f3a"></span>
      <label class="profile-avatar-overlay rounded-2xl cursor-pointer" for="avatar-file-input">
        <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/><circle cx="12" cy="13" r="3"/></svg>
      </label>
    </div>
    <div class="flex-1 min-w-0">
      <div class="flex items-center gap-3 flex-wrap mb-1">
        <h2 class="text-xl font-bold text-white" id="hero-name"><%= displayName %></h2>
        <span class="text-xs font-semibold px-2.5 py-1 rounded-full" style="background:rgba(128,101,248,.2);border:1px solid rgba(128,101,248,.35);color:#c4b5fd"><%= roleLabel %></span>
      </div>
      <p class="text-sm mb-3" style="color:rgba(255,255,255,.45)" id="hero-email"><%= email %></p>
      <div class="flex items-center gap-4 flex-wrap text-xs" style="color:rgba(255,255,255,.35)">
        <% if (location) { %><span class="flex items-center gap-1.5"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><circle cx="12" cy="11" r="3"/></svg><%= location %></span><% } %>
        <span class="flex items-center gap-1.5"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>Joined <%= joinedLabel %></span>
        <span class="flex items-center gap-1.5"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg><%= lastLoginLabel %></span>
      </div>
    </div>
    <div class="hidden md:flex items-center gap-6">
      <div class="text-center"><p class="text-2xl font-black text-white"><%= stats.postCount %></p><p class="text-[10px] uppercase tracking-widest mt-0.5" style="color:rgba(255,255,255,.3)">Posts</p></div>
      <div class="h-10 w-px" style="background:rgba(255,255,255,.08)"></div>
      <div class="text-center"><p class="text-2xl font-black" style="color:#13b3b4"><%= stats.subscriberCount %></p><p class="text-[10px] uppercase tracking-widest mt-0.5" style="color:rgba(255,255,255,.3)">Subscribers</p></div>
      <div class="h-10 w-px" style="background:rgba(255,255,255,.08)"></div>
      <div class="text-center"><p class="text-2xl font-black" style="color:#8065f8"><%= stats.campaignCount %></p><p class="text-[10px] uppercase tracking-widest mt-0.5" style="color:rgba(255,255,255,.3)">Campaigns</p></div>
    </div>
  </div>
</div>
