(defcomp
  (&key title message)
  (div
    (~tw :tokens "fixed inset-0 z-50 flex items-center justify-center")
    (div
      (~tw :tokens "absolute inset-0 bg-black/50")
      :sx-get "/sx/(geography.(hypermedia.(example.(api.dialog-close))))"
      :sx-target "#dialog-container"
      :sx-swap "innerHTML")
    (div
      (~tw :tokens "relative bg-stone-100 rounded-lg shadow-xl p-6 max-w-md w-full mx-4 space-y-4")
      (h3 (~tw :tokens "text-lg font-semibold text-stone-800") title)
      (p (~tw :tokens "text-stone-600") message)
      (div
        (~tw :tokens "flex justify-end gap-2")
        (button
          :sx-get "/sx/(geography.(hypermedia.(example.(api.dialog-close))))"
          :sx-target "#dialog-container"
          :sx-swap "innerHTML"
          (~tw :tokens "px-4 py-2 bg-stone-200 text-stone-700 rounded text-sm hover:bg-stone-300")
          "Cancel")
        (button
          :sx-get "/sx/(geography.(hypermedia.(example.(api.dialog-close))))"
          :sx-target "#dialog-container"
          :sx-swap "innerHTML"
          (~tw :tokens "px-4 py-2 bg-violet-600 text-white rounded text-sm hover:bg-violet-700")
          "Confirm")))))