<style>
    .set-screen { background: var(--bg); min-height: 100vh; }
    .set-header {
      padding: 16px 20px;
      padding-top: calc(16px + env(safe-area-inset-top, 0px));
      background: var(--card);
      display: flex;
      align-items: center;
      gap: 12px;
      position: sticky;
      top: 0;
      z-index: 100;
    }
    .set-header .back-btn {
      width: 40px; height: 40px;
      border-radius: 50%;
      border: none;
      background: var(--bg);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .set-body { padding: 20px; padding-bottom: 100px; }
    .set-section-title {
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 8px;
      margin-top: 20px;
    }
    .set-section-title:first-child { margin-top: 0; }
    .set-item {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px 16px;
      background: var(--card);
      border-radius: var(--radius-sm);
      border: 1px solid var(--border);
      margin-bottom: 6px;
      cursor: pointer;
      transition: var(--transition);
    }
    .set-item:hover { border-color: var(--primary-light); }
    .set-item .set-icon {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
      flex-shrink: 0;
    }
    .set-item .set-info { flex: 1; }
    .set-item .set-info .set-title { font-weight: 500; font-size: 0.9rem; }
    .set-item .set-info .set-desc { font-size: 0.75rem; color: var(--text-muted); }
    .set-item .set-arrow { color: var(--text-muted); font-size: 1rem; }
    .set-item .set-toggle {
      width: 44px;
      height: 24px;
      border-radius: 12px;
      background: var(--border);
      position: relative;
      cursor: pointer;
      transition: var(--transition);
      border: none;
    }
    .set-item .set-toggle.active {
      background: var(--primary);
    }
    .set-item .set-toggle::after {
      content: '';
      position: absolute;
      top: 2px;
      left: 2px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #fff;
      transition: var(--transition);
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .set-item .set-toggle.active::after {
      left: 22px;
    }
    .set-version {
      text-align: center;
      padding: 20px;
      color: var(--text-muted);
      font-size: 0.75rem;
    }
  </style>

<div class="set-screen">
    <div class="set-header">
      <button class="back-btn" onclick="goBack()"><i class="bi bi-chevron-left"></i></button>
      <h5 class="fw-bold mb-0">Settings</h5>
    </div>

    <div class="set-body">
      <!-- Account -->
      <div class="set-section-title">{{__ "settings.account"}}</div>
      <a href="/profile/edit-profile" style="text-decoration: none; color: inherit;">
        <div class="set-item">
          <div class="set-icon" style="background:rgba(233,30,99,0.1);color:var(--primary)"><i class="bi bi-person-fill"></i></div>
          <div class="set-info">
            <div class="set-title">{{__ "settings.edit_profile"}}</div>
            <div class="set-desc">{{__ "settings.edit_profile_desc"}}</div>
          </div>
          <i class="bi bi-chevron-right set-arrow"></i>
        </div>
      </a>

      <div class="set-item" onclick="showToast('{{__ "settings.change_password"}}', 'info')">
        <div class="set-icon" style="background:rgba(255,152,0,0.1);color:var(--secondary)"><i class="bi bi-key-fill"></i></div>
        <div class="set-info">
          <div class="set-title">{{__ "settings.change_password"}}</div>
          <div class="set-desc">{{__ "settings.change_password_desc"}}</div>
        </div>
        <i class="bi bi-chevron-right set-arrow"></i>
      </div>

      <a href="/settings/delete-account" style="text-decoration: none; color: inherit;">
        <div class="set-item">
          <div class="set-icon" style="background:rgba(244,67,54,0.1);color:#F44336"><i class="bi bi-trash-fill"></i></div>
          <div class="set-info">
            <div class="set-title" style="color:#F44336">{{__ "settings.delete_account"}}</div>
            <div class="set-desc">{{__ "settings.delete_account_desc"}}</div>
          </div>
          <i class="bi bi-chevron-right set-arrow"></i>
        </div>
      </a>

      <!-- Trust & Verification -->
      <div class="set-section-title">{{__ "settings.trust"}}</div>
      <a href="/discovery/aadhaar-verify" style="text-decoration: none; color: inherit;">
        <div class="set-item">
          <div class="set-icon" style="background:rgba(33,150,243,0.1);color:#2196F3"><i class="bi bi-shield-check"></i></div>
          <div class="set-info">
            <div class="set-title">{{__ "settings.aadhaar"}}</div>
            <div class="set-desc" id="aadhaarStatusText">{{__ "settings.not_verified"}}</div>
          </div>
          <i class="bi bi-chevron-right set-arrow"></i>
        </div>
      </a>

      <!-- Privacy -->
      <div class="set-section-title">{{__ "settings.privacy"}}</div>
      <div class="set-item">
        <div class="set-icon" style="background:rgba(76,175,80,0.1);color:#4CAF50"><i class="bi bi-eye-slash-fill"></i></div>
        <div class="set-info">
          <div class="set-title">{{__ "settings.hide_profile"}}</div>
          <div class="set-desc">{{__ "settings.hide_profile_desc"}}</div>
        </div>
        <button class="set-toggle" onclick="this.classList.toggle('active')"></button>
      </div>

      <div class="set-item">
        <div class="set-icon" style="background:rgba(76,175,80,0.1);color:#4CAF50"><i class="bi bi-incognito"></i></div>
        <div class="set-info">
          <div class="set-title">{{__ "settings.private_mode"}}</div>
          <div class="set-desc">{{__ "settings.private_mode_desc"}}</div>
        </div>
        <button class="set-toggle" onclick="this.classList.toggle('active')"></button>
      </div>

      <a href="/settings/blocked-users" style="text-decoration: none; color: inherit;">
        <div class="set-item">
          <div class="set-icon" style="background:rgba(244,67,54,0.1);color:#F44336"><i class="bi bi-slash-circle"></i></div>
          <div class="set-info">
            <div class="set-title">{{__ "settings.blocked_users"}}</div>
            <div class="set-desc">{{__ "settings.blocked_users_desc"}}</div>
          </div>
          <i class="bi bi-chevron-right set-arrow"></i>
        </div>
      </a>

      <!-- Preferences -->
      <div class="set-section-title">{{__ "settings.preferences"}}</div>
      <div class="set-item">
        <div class="set-icon" style="background:rgba(233,30,99,0.1);color:var(--primary)"><i class="bi bi-translate"></i></div>
        <div class="set-info">
          <div class="set-title">{{__ "settings.language"}}</div>
          <div class="set-desc">
            <select id="languageSelect" class="form-select form-select-sm mt-1" style="max-width: 150px; background-color: var(--bg); border: 1px solid var(--border); color: var(--text);">
              <option value="en">English</option>
              <option value="mr">मराठी (Marathi)</option>
            </select>
          </div>
        </div>
      </div>

      <div class="set-item">
        <div class="set-icon" style="background:rgba(233,30,99,0.1);color:var(--primary)"><i class="bi bi-bell-fill"></i></div>
        <div class="set-info">
          <div class="set-title">{{__ "settings.notifications"}}</div>
          <div class="set-desc">{{__ "settings.notifications_desc"}}</div>
        </div>
        <i class="bi bi-chevron-right set-arrow"></i>
      </div>

      <!-- Support -->
      <div class="set-section-title">{{__ "settings.support"}}</div>
      <a href="/settings/help-support" style="text-decoration: none; color: inherit;">
        <div class="set-item">
          <div class="set-icon" style="background:rgba(33,150,243,0.1);color:#2196F3"><i class="bi bi-question-circle-fill"></i></div>
          <div class="set-info">
            <div class="set-title">{{__ "settings.help"}}</div>
            <div class="set-desc">{{__ "settings.help_desc"}}</div>
          </div>
          <i class="bi bi-chevron-right set-arrow"></i>
        </div>
      </a>

      <a href="/settings/about" style="text-decoration: none; color: inherit;">
        <div class="set-item">
          <div class="set-icon" style="background:rgba(123,31,162,0.1);color:var(--accent)"><i class="bi bi-info-circle-fill"></i></div>
          <div class="set-info">
            <div class="set-title">{{__ "settings.about"}}</div>
            <div class="set-desc">{{__ "settings.about_desc"}}</div>
          </div>
          <i class="bi bi-chevron-right set-arrow"></i>
        </div>
      </a>

      <a href="/settings/terms" style="text-decoration: none; color: inherit;">
        <div class="set-item">
          <div class="set-icon" style="background:rgba(33,150,243,0.1);color:#2196F3"><i class="bi bi-file-text-fill"></i></div>
          <div class="set-info">
            <div class="set-title">{{__ "settings.terms"}}</div>
            <div class="set-desc">{{__ "settings.terms_desc"}}</div>
          </div>
          <i class="bi bi-chevron-right set-arrow"></i>
        </div>
      </a>

      <a href="/settings/privacy" style="text-decoration: none; color: inherit;">
        <div class="set-item">
          <div class="set-icon" style="background:rgba(33,150,243,0.1);color:#2196F3"><i class="bi bi-shield-lock-fill"></i></div>
          <div class="set-info">
            <div class="set-title">{{__ "settings.privacy_policy"}}</div>
            <div class="set-desc">{{__ "settings.privacy_policy_desc"}}</div>
          </div>
          <i class="bi bi-chevron-right set-arrow"></i>
        </div>
      </a>

      <div class="set-version">
        Suvarna Bandhan v2.0.0 • {{__ "settings.footer"}}
      </div>
    </div>
  </div>

{{#section 'scripts'}}
<script>
document.addEventListener('DOMContentLoaded', () => {
  // Setup language selector based on cookie
  const getCookie = (name) => {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) return parts.pop().split(';').shift();
    return 'en';
  };
  
  const langSelect = document.getElementById('languageSelect');
  const currentLang = getCookie('lang');
  if (currentLang === 'mr') {
    langSelect.value = 'mr';
  }

  // Handle change
  langSelect.addEventListener('change', (e) => {
    const newLang = e.target.value;
    document.cookie = `lang=${newLang}; path=/; max-age=31536000`; // 1 year expiry
    window.location.reload();
  });
});
</script>
{{/section}}
