/**
 * rVote demo page — server-rendered HTML body.
 *
 * Embeds the full <folk-vote-dashboard space="demo"> component for
 * real interactivity (browse spaces, create proposals, cast conviction
 * votes, binary final votes) plus showcase sections explaining the rVote vision.
 */

const FEATURES = [
	{
		icon: "\u{1F4CA}",
		title: "Conviction Voting",
		desc: "Stake credits on proposals you support. Weight costs credits quadratically (weight\u00B2), preventing plutocratic capture while rewarding conviction.",
	},
	{
		icon: "\u{1F3AF}",
		title: "Promotion Threshold",
		desc: "Proposals accumulate conviction score. When they hit the threshold, they auto-promote to a binary YES/NO/ABSTAIN final vote.",
	},
	{
		icon: "\u23F3",
		title: "Vote Decay",
		desc: "Conviction decays after 30 days. This ensures ongoing relevance — stale votes fade, keeping governance dynamic and current.",
	},
	{
		icon: "\u{1F3DB}\uFE0F",
		title: "Governance Spaces",
		desc: "Each community gets its own voting space with configurable thresholds, credit budgets, and voting periods.",
	},
];

const INTEGRATIONS = [
	{ icon: "\u{1F30A}", name: "rFunds", desc: "Passed proposals trigger funding flows. Vote on budget allocations and threshold adjustments." },
	{ icon: "\u{1F4DD}", name: "rNotes", desc: "Link supporting research, discussion threads, and rationale documents to proposals." },
	{ icon: "\u{1F4C5}", name: "rCal", desc: "Voting deadlines, governance meetings, and proposal review periods on the calendar." },
	{ icon: "\u{1F465}", name: "rNetwork", desc: "Delegate voting power to trusted network members. Liquid democracy across communities." },
	{ icon: "\u{1F6D2}", name: "rCart", desc: "Vote on merchandise decisions, provider selection, and catalog curation." },
	{ icon: "\u2615\uFE0F", name: "rSpace", desc: "Each space has its own governance layer. Nest voting across spaces for multi-community decisions." },
];

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

  <!-- Hero -->
  <section class="rd-hero">
    <div style="display:inline-block;padding:0.375rem 1rem;background:rgba(249,115,22,0.1);border:1px solid rgba(249,115,22,0.2);border-radius:9999px;font-size:0.875rem;color:#fdba74;font-weight:500;margin-bottom:1.5rem;">
      Conviction Voting Engine
    </div>
    <h1>rVote Demo</h1>
    <p class="rd-subtitle">Credit-weighted conviction voting for collaborative governance decisions</p>
    <div class="rd-meta">
      <span>\u{1F4CA} Conviction Voting</span>
      <span style="color:#475569">|</span>
      <span>\u{1F3AF} Thresholds</span>
      <span style="color:#475569">|</span>
      <span>\u23F3 Vote Decay</span>
      <span style="color:#475569">|</span>
      <span>\u{1F3DB}\uFE0F Governance</span>
    </div>
  </section>

  <!-- Interactive Vote Dashboard -->
  <section class="rd-section rd-section--narrow">
    <div class="rd-card" style="padding:0;overflow:hidden;">
      <folk-vote-dashboard space="demo"></folk-vote-dashboard>
    </div>
  </section>

  <!-- Core Concepts -->
  <section class="rd-section">
    <div class="rd-grid rd-grid--2">
      ${FEATURES.map(
				(f) => `
      <div class="rd-card" style="padding:1.5rem;">
        <div style="font-size:1.75rem;margin-bottom:0.75rem;">${f.icon}</div>
        <h3 style="font-size:1rem;font-weight:600;color:#e2e8f0;margin:0 0 0.5rem;">${f.title}</h3>
        <p style="font-size:0.875rem;color:#94a3b8;margin:0;line-height:1.5;">${f.desc}</p>
      </div>`,
			).join("")}
    </div>
  </section>

  <!-- Ecosystem Integrations -->
  <section class="rd-section">
    <h2 style="text-align:center;font-size:1.25rem;font-weight:700;color:#f1f5f9;margin:0 0 1.5rem;">
      r* Ecosystem Integrations
    </h2>
    <div class="rd-grid rd-grid--3">
      ${INTEGRATIONS.map(
				(i) => `
      <div class="rd-card" style="padding:1.25rem;">
        <div style="font-size:1.5rem;margin-bottom:0.5rem;">${i.icon}</div>
        <h3 style="font-size:0.875rem;font-weight:600;color:#e2e8f0;margin:0 0 0.375rem;">${i.name}</h3>
        <p style="font-size:0.8rem;color:#94a3b8;margin:0;line-height:1.4;">${i.desc}</p>
      </div>`,
			).join("")}
    </div>
  </section>

  <!-- CTA -->
  <section class="rd-section rd-section--narrow">
    <div class="rd-cta">
      <h2>Govern Together</h2>
      <p>
        rVote brings conviction-weighted governance to your community.
        Proposals rise through collective conviction, not majority rule.
      </p>
      <a href="/create-space" style="background:linear-gradient(135deg,#f97316,#fb923c);box-shadow:0 8px 24px rgba(249,115,22,0.25);">
        Create Your Space
      </a>
    </div>
  </section>

</div>`;
}