Settings Notifications

<section class="ws-settings mx-auto max-w-2xl rounded-2xl border border-slate-200 bg-[var(--ws-color-surface)] p-6 shadow-sm">
  <h2 class="text-lg font-semibold text-slate-900">Notification Settings</h2>
  <p class="mt-1 text-sm text-slate-500">Choose how you want to be notified about updates and activity.</p>

  <div class="mt-6 divide-y divide-slate-100">
    <!-- Setting row -->
    <div class="flex items-center justify-between py-4">
      <div>
        <h3 class="text-sm font-medium text-slate-900">In-App Notifications</h3>
        <p class="text-sm text-slate-500">Show notification badges and toasts inside the app.</p>
      </div>
      <button role="switch" aria-checked="true" class="relative h-6 w-11 rounded-full bg-blue-500 transition-colors focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2">
        <span class="absolute left-0.5 top-0.5 h-5 w-5 translate-x-5 rounded-full bg-[var(--ws-color-surface)] shadow transition-transform"></span>
      </button>
    </div>

    <!-- Setting row -->
    <div class="flex items-center justify-between py-4">
      <div>
        <h3 class="text-sm font-medium text-slate-900">Email Notifications</h3>
        <p class="text-sm text-slate-500">Receive email summaries for important updates.</p>
      </div>
      <button role="switch" aria-checked="true" class="relative h-6 w-11 rounded-full bg-blue-500 transition-colors focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2">
        <span class="absolute left-0.5 top-0.5 h-5 w-5 translate-x-5 rounded-full bg-[var(--ws-color-surface)] shadow transition-transform"></span>
      </button>
    </div>

    <!-- Setting row -->
    <div class="flex items-center justify-between py-4">
      <div>
        <h3 class="text-sm font-medium text-slate-900">Push Notifications</h3>
        <p class="text-sm text-slate-500">Get push notifications on your mobile device.</p>
      </div>
      <button role="switch" aria-checked="false" class="relative h-6 w-11 rounded-full bg-slate-200 transition-colors focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2">
        <span class="absolute left-0.5 top-0.5 h-5 w-5 translate-x-0 rounded-full bg-[var(--ws-color-surface)] shadow transition-transform"></span>
      </button>
    </div>

    <!-- Setting row -->
    <div class="flex items-center justify-between py-4">
      <div>
        <h3 class="text-sm font-medium text-slate-900">SMS Alerts</h3>
        <p class="text-sm text-slate-500">Receive critical alerts via text message.</p>
      </div>
      <button role="switch" aria-checked="false" class="relative h-6 w-11 rounded-full bg-slate-200 transition-colors focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2">
        <span class="absolute left-0.5 top-0.5 h-5 w-5 translate-x-0 rounded-full bg-[var(--ws-color-surface)] shadow transition-transform"></span>
      </button>
    </div>
  </div>

  <!-- Delivery method -->
  <div class="mt-6">
    <h3 class="text-sm font-medium text-slate-900">Verification Method</h3>
    <p class="mb-3 text-sm text-slate-500">Preferred method for receiving verification codes.</p>
    <div class="inline-flex rounded-lg border border-slate-200 p-1" role="radiogroup" aria-label="Verification method">
      <button role="radio" aria-checked="true" class="rounded-md bg-[var(--ws-color-surface-alt)] px-4 py-1.5 text-sm font-medium text-white">Email</button>
      <button role="radio" aria-checked="false" class="rounded-md px-4 py-1.5 text-sm font-medium text-slate-600 hover:text-slate-900 dark:hover:text-white">SMS</button>
      <button role="radio" aria-checked="false" class="rounded-md px-4 py-1.5 text-sm font-medium text-slate-600 hover:text-slate-900 dark:hover:text-white">Authenticator</button>
    </div>
  </div>

  <!-- Save -->
  <div class="mt-8 flex justify-end gap-3">
    <button class="rounded-lg border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 dark:hover:bg-slate-700">Cancel</button>
    <button class="rounded-lg bg-[var(--ws-color-surface)] px-4 py-2 text-sm font-medium text-white hover:bg-slate-800">Save Changes</button>
  </div>
</section>