Collect feedback on options

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Which version would you send?</title>
  <style>
    body { font: 16px/1.5 system-ui, sans-serif; max-width: 720px; margin: 40px auto; padding: 0 16px; }
    fieldset { border: 1px solid #ddd; border-radius: 10px; margin: 0 0 20px; padding: 16px; }
    label.opt { display: block; padding: 8px; border-radius: 8px; cursor: pointer; }
    label.opt:hover { background: #f4f4f8; }
    textarea { width: 100%; margin-top: 8px; }
  </style>
</head>
<body>
  <h1>Which version would you send?</h1>
  <p><label>Your name <input id="reader" required></label></p>

  <div id="groups"></div>
  <button id="send">Send my picks</button>
  <p id="status"></p>

  <script>
    const GROUPS = [
      { id: 'welcome', options: { A: 'Welcome aboard! Here’s how to get started…', B: 'Hi! Glad you’re here. Three things to try first…' } },
      { id: 'renewal', options: { A: 'Your plan renews on Friday.', B: 'Heads up: your plan renews in 3 days.' } },
    ]

    const root = document.getElementById('groups')
    for (const g of GROUPS) {
      const fs = document.createElement('fieldset')
      fs.innerHTML = `<legend>${g.id}</legend>` +
        Object.entries(g.options).map(([k, text]) =>
          `<label class="opt"><input type="radio" name="${g.id}" value="${k}"> <b>${k}</b> — ${text}</label>`
        ).join('') +
        `<label class="opt"><input type="radio" name="${g.id}" value="none"> None of these</label>` +
        `<textarea id="why-${g.id}" placeholder="Why?"></textarea>`
      root.append(fs)
    }

    document.getElementById('send').onclick = async () => {
      const data = {
        reader: document.getElementById('reader').value,
        rows: GROUPS.map(g => ({
          group: g.id,
          best: document.querySelector(`input[name="${g.id}"]:checked`)?.value ?? null,
          why: document.getElementById(`why-${g.id}`).value,
        })),
      }

      const status = document.getElementById('status')
      const res = window.Shareable ? await Shareable.submit(data) : { ok: false }
      if (res.ok) {
        status.textContent = res.updated ? 'Updated ✓ (your new picks replaced the old ones)' : 'Sent ✓ Thank you!'
      } else {
        if (res.error) status.textContent = res.error
        // Fallback: not sent (e.g. a saved copy, where only the live link can send), so save the picks as a file.
        const a = document.createElement('a')
        a.href = URL.createObjectURL(new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' }))
        a.download = 'my-picks.json'
        a.click()
      }
    }
  </script>
</body>
</html>

{
  "reader": "Dana",
  "rows": [
    { "group": "welcome", "best": "B", "why": "Warmer, and the list is useful" },
    { "group": "renewal", "best": "B", "why": "A sounds like a bill" }
  ]
}