(defcomp
  ()
  (~docs/page
    :title "Hypermedia Feeds Reactive State"
    (p
      "Click \"Fetch Price\" to hit a real server endpoint. The response is "
      (em "hypermedia")
      " — SX content swapped into the page. But a "
      (code "data-init")
      " script in the response also writes to the "
      (code "\"demo-price\"")
      " store signal. The island's reactive UI — total, savings, price display — updates instantly from the signal change.")
    (p
      "This is the marsh pattern: "
      (strong "the server response is both content and a signal write")
      ". Hypermedia and reactivity aren't separate — the same response does both.")
    (~reactive-islands/marshes/demo-marsh-product)
    (~docs/code
      :src (highlight
        ";; Island with a store-backed price signal\n(defisland ~reactive-islands/marshes/demo-marsh-product ()\n  (let ((price (def-store \"demo-price\" (fn () (signal 19.99))))\n        (qty (signal 1))\n        (total (computed (fn () (* (deref price) (deref qty))))))\n    (div\n      ;; Reactive price display — updates when store changes\n      (span \"$\" (deref price))\n      (span \"Qty:\") (button \"-\") (span (deref qty)) (button \"+\")\n      (span \"Total: $\" (deref total))\n\n      ;; Fetch from server — response arrives as hypermedia\n      (button :sx-get \"/sx/(geography.(reactive.(api.flash-sale)))\"\n              :sx-target \"#marsh-server-msg\"\n              :sx-swap \"innerHTML\"\n        \"Fetch Price\")\n      ;; Server response lands here:\n      (div :id \"marsh-server-msg\"))))"
        "lisp"))
    (~docs/code
      :src (highlight
        ";; Server returns SX content + a data-init script:\n;;\n;; (<>\n;;   (p \"Flash sale! Price: $14.99\")\n;;   (script :type \"text/sx\" :data-init\n;;     \"(reset! (use-store \\\"demo-price\\\") 14.99)\"))\n;;\n;; The <p> is swapped in as normal hypermedia content.\n;; The script writes to the store signal.\n;; The island's (deref price), total, and savings\n;; all update reactively — no re-render, no diffing."
        "lisp"))
    (p
      "Two things happen from one server response: content appears in the swap target (hypermedia) and the price signal updates (reactivity). The island didn't fetch the price. The server didn't call a signal API. The response "
      (em "is")
      " both.")))
