/**
 * rVote demo page — server-rendered HTML body.
 *
 * Returns the static HTML skeleton for the interactive poll demo.
 * The client-side vote-demo.ts populates #rd-polls-container via WebSocket.
 */

export function renderDemo(): string {
	return `
<div class="rd-root" style="--rd-accent-from:#f97316; --rd-accent-to:#fb923c">

  <!-- ── Hero ── -->
  <div class="rd-hero">
    <h1>rVote Demo</h1>
    <p class="rd-subtitle">Interactive polls synced in real-time across all r* demos</p>
    <div class="rd-meta">
      <span>Vote on options with +/- buttons</span>
      <span>Changes sync instantly via WebSocket</span>
    </div>
  </div>

  <!-- ── Connection bar ── -->
  <div class="rd-section rd-section--narrow">
    <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem; flex-wrap:wrap; gap:0.75rem">
      <div style="display:flex; align-items:center; gap:0.75rem; flex-wrap:wrap">
        <span id="rd-conn-badge" class="rd-status rd-status--disconnected">Disconnected</span>
        <span class="rd-badge rd-badge--orange" style="font-size:0.7rem">Live &mdash; synced across all r* demos</span>
      </div>
      <button id="rd-reset-btn" class="rd-btn rd-btn--ghost" disabled>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>
        Reset Demo
      </button>
    </div>

    <!-- Loading state (shown until first snapshot) -->
    <div id="rd-loading" class="rd-card" style="border:2px dashed rgba(100,116,139,0.4); display:none">
      <div class="rd-card-body" style="padding:3rem; text-align:center">
        <div style="width:2rem; height:2rem; margin:0 auto 0.75rem; border:3px solid rgba(249,115,22,0.2); border-top-color:#f97316; border-radius:50%; animation:rd-spin 0.8s linear infinite"></div>
        <p class="rd-text-muted">Connecting to rSpace...</p>
      </div>
    </div>
    <style>@keyframes rd-spin { to { transform: rotate(360deg); } }</style>

    <!-- Empty state (no polls after connection) -->
    <div id="rd-empty" class="rd-card" style="border:2px dashed rgba(100,116,139,0.4); display:none">
      <div class="rd-card-body" style="padding:3rem; text-align:center">
        <div style="font-size:2rem; margin-bottom:0.75rem">🗳</div>
        <p class="rd-text-muted">No polls found. Try resetting the demo.</p>
      </div>
    </div>

    <!-- Poll cards container (populated by vote-demo.ts) -->
    <div id="rd-polls-container" style="display:flex; flex-direction:column; gap:1rem"></div>
  </div>

  <!-- ── CTA ── -->
  <div class="rd-section rd-section--narrow">
    <div class="rd-cta">
      <h2>Build with rVote</h2>
      <p>Run conviction-weighted polls and governance decisions in your own community space.</p>
      <a href="/create-space" style="background:linear-gradient(135deg,#f97316,#fb923c); box-shadow:0 4px 12px rgba(249,115,22,0.3)">
        Create Your Space
      </a>
    </div>
  </div>

</div>`;
}