<% const n = notifications || {}; %>
<div id="tab-notifications" class="profile-tab-panel<%= activeTab !== 'notifications' ? ' hidden' : '' %>">
  <form method="post" action="/admin/profile/notifications" enctype="application/x-www-form-urlencoded" class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <div class="lg:col-span-2 profile-card">
      <p class="profile-section-title">Email Notifications</p>
      <% const emailRows = [
        { key: 'formSubmissions', title: 'New form submissions', desc: 'Email when a contact or demo form is submitted' },
        { key: 'campaignReports', title: 'Newsletter campaign reports', desc: 'Summary after each campaign send' },
        { key: 'blogPublished', title: 'Blog post published', desc: 'When a scheduled post goes live' },
        { key: 'securityAlerts', title: 'Security alerts', desc: 'New logins and security events' },
        { key: 'weeklyDigest', title: 'Weekly digest', desc: 'Weekly site summary' },
        { key: 'productUpdates', title: 'Product updates', desc: 'Analytics Grade release notes' },
      ]; %>
      <div class="space-y-1">
        <% emailRows.forEach(function(row, i) { %>
        <div class="flex items-center justify-between py-3.5<%= i < emailRows.length - 1 ? ' border-b' : '' %>" style="<%= i < emailRows.length - 1 ? 'border-color:rgba(255,255,255,.05)' : '' %>">
          <div><p class="text-sm font-semibold text-white"><%= row.title %></p><p class="text-xs mt-0.5" style="color:rgba(255,255,255,.35)"><%= row.desc %></p></div>
          <label class="profile-toggle"><input type="checkbox" name="<%= row.key %>"<%= n[row.key] ? ' checked' : '' %>/><span class="profile-toggle-track"></span><span class="profile-toggle-thumb"></span></label>
        </div>
        <% }); %>
      </div>
      <div class="flex justify-end pt-4"><button type="submit" class="btn-primary text-sm">Save Preferences</button></div>
    </div>
    <div class="profile-card">
      <p class="profile-section-title">Digest Frequency</p>
      <% ['weekly','daily','never'].forEach(function(freq) { %>
      <label class="flex items-center gap-3 p-3 rounded-xl mb-2 cursor-pointer" style="border:1px solid <%= (n.digestFrequency || 'weekly') === freq ? 'rgba(128,101,248,.3)' : 'rgba(255,255,255,.07)' %>;<%= (n.digestFrequency || 'weekly') === freq ? 'background:rgba(128,101,248,.08)' : '' %>">
        <input type="radio" name="digestFrequency" value="<%= freq %>"<%= (n.digestFrequency || 'weekly') === freq ? ' checked' : '' %> style="accent-color:#8065f8"/>
        <span class="text-sm font-semibold text-white capitalize"><%= freq %></span>
      </label>
      <% }); %>
      <p class="text-xs mt-4" style="color:rgba(255,255,255,.35)">Notifications sent to <strong class="text-purple-400"><%= email %></strong></p>
    </div>
  </form>
</div>
