(defcomp
  ()
  (div
    (~tw :tokens "space-y-3")
    (form
      :sx-post "/sx/(geography.(hypermedia.(reference.(api.greet))))"
      :sx-target "#ref-evt-vf-result"
      :sx-swap "innerHTML"
      :sx-validate "true"
      :sx-on:sx:validationFailed "document.getElementById('ref-evt-vf-status').style.display = 'block'"
      (~tw :tokens "flex gap-2")
      (input
        :type "email"
        :name "email"
        :required "true"
        :placeholder "Email (required)"
        (~tw :tokens "flex-1 px-3 py-2 border border-stone-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-violet-500 invalid:border-red-400"))
      (button
        :type "submit"
        (~tw :tokens "px-4 py-2 bg-violet-600 text-white rounded hover:bg-violet-700 transition-colors text-sm")
        "Submit"))
    (div
      :id "ref-evt-vf-status"
      (~tw :tokens "p-2 rounded bg-amber-50 text-amber-700 text-sm")
      :style "display: none"
      "Validation failed — form was not submitted.")
    (div
      :id "ref-evt-vf-result"
      (~tw :tokens "p-3 rounded bg-stone-100 text-stone-400 text-sm")
      "Submit with empty/invalid email to trigger the event.")))
