<% const s = (profile && profile.social) ? profile.social : {}; %>
<div id="tab-info" class="profile-tab-panel<%= activeTab !== 'info' ? ' hidden' : '' %>">
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <div class="lg:col-span-2 space-y-6">
      <form method="post" action="/admin/profile/info" enctype="application/x-www-form-urlencoded" class="profile-card">
        <p class="profile-section-title">Basic Information</p>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
          <div><label class="profile-label">First Name</label><input type="text" name="firstName" class="profile-input" value="<%= names.firstName %>"/></div>
          <div><label class="profile-label">Last Name</label><input type="text" name="lastName" class="profile-input" value="<%= names.lastName %>"/></div>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
          <div><label class="profile-label">Display Name</label><input type="text" name="displayName" class="profile-input" value="<%= displayName %>"/></div>
          <div><label class="profile-label">Role</label><input type="text" class="profile-input" value="<%= roleLabel %>" disabled/></div>
        </div>
        <div class="mb-4"><label class="profile-label">Bio</label><textarea name="bio" class="profile-input" placeholder="Tell the team a bit about yourself…"><%= profile.bio || '' %></textarea></div>
        <div class="flex items-center justify-between pt-2">
          <p class="text-xs" style="color:rgba(255,255,255,.25)">Last updated <%= lastUpdatedLabel %></p>
          <button type="submit" class="btn-primary text-sm">Save Changes</button>
        </div>
      </form>

      <form method="post" action="/admin/profile/contact" enctype="application/x-www-form-urlencoded" class="profile-card">
        <p class="profile-section-title">Contact & Location</p>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
          <div><label class="profile-label">Email Address</label><input type="email" class="profile-input" value="<%= email %>" disabled/></div>
          <div><label class="profile-label">Phone Number</label><input type="tel" name="phone" class="profile-input" value="<%= profile.phone || '' %>"/></div>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
          <div><label class="profile-label">City</label><input type="text" name="city" class="profile-input" value="<%= profile.city || '' %>"/></div>
          <div><label class="profile-label">Country</label>
            <select name="country" class="profile-input">
              <% ['Canada','United States','United Kingdom','Australia',''].forEach(function(c) { %>
              <option value="<%= c %>"<%= (profile.country || '') === c ? ' selected' : '' %>><%= c || '—' %></option>
              <% }); %>
            </select>
          </div>
        </div>
        <div class="mb-4"><label class="profile-label">Timezone</label>
          <select name="timezone" class="profile-input">
            <% const tzs = ['America/Vancouver','America/Toronto','America/New_York','Europe/London','UTC']; %>
            <% tzs.forEach(function(tz) { %>
            <option value="<%= tz %>"<%= (profile.timezone || 'America/Vancouver') === tz ? ' selected' : '' %>><%= tz %></option>
            <% }); %>
          </select>
        </div>
        <div class="flex justify-end pt-2"><button type="submit" class="btn-primary text-sm">Save Changes</button></div>
      </form>
    </div>

    <div class="space-y-5">
      <div class="profile-card text-center">
        <p class="profile-section-title">Profile Photo</p>
        <div class="flex justify-center mb-4">
          <div class="profile-avatar-wrap">
            <% if (avatarUrl) { %><img src="<%= avatarUrl %>" alt="" class="w-24 h-24 rounded-2xl object-cover"/><% } else { %>
            <div class="w-24 h-24 rounded-2xl flex items-center justify-center text-3xl font-black text-white mx-auto" style="background:linear-gradient(135deg,#8065f8,#4490d3)"><%= initials %></div>
            <% } %>
            <label class="profile-avatar-overlay rounded-2xl cursor-pointer" for="avatar-file-input"><svg class="w-5 h-5 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>
        <label for="avatar-file-input" class="btn-ghost w-full justify-center mb-2 text-sm cursor-pointer">Upload New Photo</label>
        <p class="text-xs" style="color:rgba(255,255,255,.25)">JPG, PNG or GIF · Max 5 MB</p>
        <% if (avatarUrl) { %>
        <form method="post" action="/admin/profile/avatar/remove" class="mt-2"><button type="submit" class="text-xs" style="color:rgba(239,68,68,.6)">Remove photo</button></form>
        <% } %>
      </div>

      <div class="profile-card">
        <p class="profile-section-title">Account Details</p>
        <div class="space-y-3 text-xs">
          <div class="flex justify-between"><span style="color:rgba(255,255,255,.35)">Account ID</span><span class="font-mono font-semibold" style="color:rgba(255,255,255,.6)"><%= accountId %></span></div>
          <div class="flex justify-between"><span style="color:rgba(255,255,255,.35)">Email verified</span><span class="font-bold" style="color:<%= user.emailVerified ? '#13b3b4' : '#f87171' %>"><%= user.emailVerified ? 'Yes' : 'No' %></span></div>
          <div class="flex justify-between"><span style="color:rgba(255,255,255,.35)">Login method</span><span class="font-semibold text-white"><%= googleLinked ? (hasPassword ? 'Email + Google' : 'Google') : 'Email' %></span></div>
        </div>
      </div>

      <form method="post" action="/admin/profile/social" enctype="application/x-www-form-urlencoded" class="profile-card">
        <p class="profile-section-title">Social Links</p>
        <div class="space-y-3">
          <input type="url" name="linkedin" class="profile-input text-xs" placeholder="LinkedIn URL" value="<%= s.linkedin || '' %>"/>
          <input type="url" name="twitter" class="profile-input text-xs" placeholder="Twitter / X URL" value="<%= s.twitter || '' %>"/>
          <input type="url" name="website" class="profile-input text-xs" placeholder="Website URL" value="<%= s.website || '' %>"/>
          <button type="submit" class="btn-ghost w-full justify-center text-xs mt-1">Save Links</button>
        </div>
      </form>
    </div>
  </div>
</div>
