(defcomp
  ()
  (div
    (~tw :tokens "space-y-6")
    (div
      (~tw :tokens "space-y-2")
      (h4
        (~tw :tokens "text-sm font-semibold text-stone-700")
        "sx-vals — send extra values")
      (button
        :sx-get "/sx/(geography.(hypermedia.(example.(api.echo-vals))))"
        :sx-target "#vals-result"
        :sx-swap "innerHTML"
        :sx-vals "{\"source\": \"button\", \"version\": \"2.0\"}"
        (~tw :tokens "px-4 py-2 bg-violet-600 text-white rounded hover:bg-violet-700 transition-colors text-sm")
        "Send with vals")
      (div
        :id "vals-result"
        (~tw :tokens "p-3 rounded bg-stone-100 text-sm text-stone-400")
        "Click to see server-received values."))
    (div
      (~tw :tokens "space-y-2")
      (h4
        (~tw :tokens "text-sm font-semibold text-stone-700")
        "sx-headers — send custom headers")
      (button
        :sx-get "/sx/(geography.(hypermedia.(example.(api.echo-headers))))"
        :sx-target "#headers-result"
        :sx-swap "innerHTML"
        :sx-headers {:X-Request-Source "demo" :X-Custom-Token "abc123"}
        (~tw :tokens "px-4 py-2 bg-violet-600 text-white rounded hover:bg-violet-700 transition-colors text-sm")
        "Send with headers")
      (div
        :id "headers-result"
        (~tw :tokens "p-3 rounded bg-stone-100 text-sm text-stone-400")
        "Click to see server-received headers."))))