/**
 * rFunds demo page — server-rendered HTML body.
 *
 * Embeds the full <folk-funds-app space="demo" mode="demo"> component
 * for real interactivity (flow listing, river visualization, TBFF diagrams)
 * plus showcase sections explaining the rFunds vision.
 */

const FEATURES = [
	{
		icon: "\u{1F30A}",
		title: "River Visualization",
		desc: "Watch resources flow through animated Sankey rivers. Sources feed into funnels, funnels feed outcomes, and surplus overflows to where it's needed most.",
	},
	{
		icon: "\u{1F4CA}",
		title: "TBFF Flows",
		desc: "Threshold-Based Funding Flows distribute resources based on enoughness. When a funnel is sufficient, surplus flows to the next highest-need area.",
	},
	{
		icon: "\u{1F4B8}",
		title: "Treasury Management",
		desc: "Track deposits, withdrawals, and allocations across all community funnels. Transparent financial governance in real time.",
	},
	{
		icon: "\u2696\uFE0F",
		title: "Enoughness Layer",
		desc: "Each funnel has a sufficiency threshold. Golden glow indicates a funded funnel. Resources keep flowing until everyone has enough.",
	},
];

const INTEGRATIONS = [
	{ icon: "\u{1F6D2}", name: "rCart", desc: "Order revenue flows through TBFF funnels with automatic creator/provider/community splits." },
	{ icon: "\u{1F5F3}", name: "rVote", desc: "Governance votes determine funding priorities and threshold adjustments." },
	{ icon: "\u{2708}\uFE0F", name: "rTrips", desc: "Group expenses feed into shared budget flows with per-person tracking." },
	{ icon: "\u{1F4DD}", name: "rNotes", desc: "Attach budget rationales, meeting minutes, and audit logs to flows." },
	{ icon: "\u{1F4C5}", name: "rCal", desc: "Budget reviews, treasury snapshots, and governance votes on the calendar timeline." },
	{ icon: "\u2615\uFE0F", name: "rSpace", desc: "Each space has its own treasury. Nest flows across spaces for multi-community coordination." },
];

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

  <!-- Hero -->
  <section class="rd-hero">
    <div style="display:inline-block;padding:0.375rem 1rem;background:rgba(245,158,11,0.1);border:1px solid rgba(245,158,11,0.2);border-radius:9999px;font-size:0.875rem;color:#fcd34d;font-weight:500;margin-bottom:1.5rem;">
      Threshold-Based Funding Flows
    </div>
    <h1>rFunds Demo</h1>
    <p class="rd-subtitle">Budget flows, river visualization, and treasury management with enoughness thresholds</p>
    <div class="rd-meta">
      <span>\u{1F30A} River Visualization</span>
      <span style="color:#475569">|</span>
      <span>\u{1F4CA} TBFF Flows</span>
      <span style="color:#475569">|</span>
      <span>\u{1F4B8} Treasury</span>
      <span style="color:#475569">|</span>
      <span>\u2696\uFE0F Enoughness</span>
    </div>
  </section>

  <!-- Interactive Funds App -->
  <section class="rd-section rd-section--narrow">
    <div class="rd-card" style="padding:0;overflow:hidden;">
      <folk-funds-app space="demo" mode="demo"></folk-funds-app>
    </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>Design Your Funding Flows</h2>
      <p>
        rFunds lets your community design transparent budget flows with threshold-based
        mechanisms, enoughness scoring, and animated river visualizations.
      </p>
      <a href="/create-space" style="background:linear-gradient(135deg,#f59e0b,#10b981);box-shadow:0 8px 24px rgba(245,158,11,0.25);">
        Create Your Space
      </a>
    </div>
  </section>

</div>`;
}